Grid Editor demos

Every page here is a working editor. They are static: served from any web server, or from GitHub Pages, with no build step. Each one runs the built files in dist/, so run npm run build after changing anything under src/.

Every gesture works with a finger as well as with a mouse — sorting, resizing a column, dragging a button off the toolbar — so these are worth opening on a phone. The editor needs SortableJS and Bootstrap 5; The editor loads grideditor.bundle.min.js instead, which is the editor and SortableJS in one file.

The editor basic.html

tinyMCE in the content areas, the drawer as the drag handle, and the bundled build

Plugins of your own custom-plugins.html

Two plugins written in the page itself: a container, and a drawer tool that opens a modal and saves its settings on the node as an attribute

The source in CodeMirror codemirror.html

The source button's html in a code editor, and edit_source to leave the button out

Text editors text-editors.html

TinyMCE, CKEditor 5, summernote and one written in the page as a plugin, on the textTypes hook: one at a time or all together

Containers containers.html

Tabs, accordions, popups, offcanvases and cards, two levels deep, and the export opened as a real page

Elements elements.html

Element level controls, including an element with no visual output