editcontext-editor

Full editor

Try typing (including with an IME — e.g. Japanese or Chinese input), Ctrl/⌘+B for bold, Enter for new paragraphs, Shift+Enter for a line break, Tab inside tables to move between cells, paste from other apps, and undo/redo.

Document JSON (live)

HTML export (live)

Events (live — type, click, use Ctrl+Z, an IME…)

element events on the editor div · EditContext events on the edit context · document-level events · canceled = the editor called preventDefault

Import / load

Paste a document (JSON in the internal format, or HTML) and load it into the editor:

Blog comment box

The minimal integration this library is designed for — a few lines of code give you a comment field with common styling options and block types.

How it works

The editable element is a plain <div> — not contenteditable — with an EditContext attached. All text input (keyboard, IME, emoji picker, dictation…) flows through the EditContext's plain-text buffer and is reported back as textupdate events.
The library mirrors that buffer into its own JSON document model (paragraphs, headings, tables, inline/block images, text marks) and re-renders the DOM from the model on every change.
A position map translates between model locations, buffer offsets and DOM points, so selections, IME character bounds (characterboundsupdate) and composition underlines (textformatupdate) all line up — candidate windows appear exactly where you type.
Formatting requests (bold/italic/…), Enter, paste, cut and undo arrive as cancelable beforeinput events on the element and are handled by model operations.