Six editors, one workspace
The same document,
six different editors.
Every editor below gets the same shell, the same sample documents, and the same diagnostics, so the only thing that varies is the editor itself. Type in each one, load a template, then open the output panel to see what that editor actually hands you: HTML, Markdown, or a JSON node tree.
At a glance
The differences that actually change how you build with each one.
| Editor | Editing model | Source of truth | Reads out as | Toolbar |
|---|---|---|---|---|
| 01CKEditor 5 | Custom tree model with its own change/undo pipeline | HTML | Ships its own toolbar - the gray bar above the page | |
| 02TipTap | ProseMirror document with a strict, validating schema | HTML | Headless - every toolbar button on this page is hand-written | |
| 03Toast UI Editor | Markdown text, mirrored into a WYSIWYG ProseMirror view | Markdown | Ships its own icon toolbar plus a Markdown/WYSIWYG switch | |
| 04Editor.js | Flat array of typed blocks, each owned by its own tool plugin | Block JSON | Per-block plus/handle controls and an inline selection popup | |
| 05Slate | Nested JSON node tree you define; immutable, React-rendered | Node tree (JSON) | None supplied - the toolbar and renderers are written per app | |
| 06Lexical | Immutable node tree updated inside transactional editor.update() | Node tree (JSON) | Headless core - plugins supply behavior, you supply the toolbar |
The editors
- CKEditor 5Batteries-included WYSIWYG. The toolbar and UI ship with it.Only here: The only editor here whose toolbar, dropdowns, and balloon UI come pre-built
- TipTapHeadless ProseMirror. You build every button yourself.Only here: Schema validation rejects invalid structure instead of silently repairing it
- Toast UI EditorThe only one here with a real Markdown source mode.Only here: The only editor here that can round-trip Markdown as its source of truth
- Editor.jsNot HTML at all - a JSON array of typed blocks.Only here: The only editor here with no HTML source of truth - the document *is* JSON
- SlateA toolkit, not an editor. You define the schema.Only here: You define every node and mark type; there is no built-in schema to work around
- LexicalMeta's successor to Draft.js. Small, fast, plugin-driven.Only here: Smallest core here; every capability arrives as a separately imported plugin
1. Type in it
Each editor opens with the same Lorem Ipsum draft already loaded, so you can select text and try bold, italic, headings, and lists immediately. Every toolbar button names itself on hover.
2. Load the same template
The three sample documents - release notes, a research article, a contract - are identical across all six editors. Watch which structure survives the import and which gets flattened.
3. Read the output
The output panel on each page shows the live document as HTML, JSON, and Markdown. A grayed-out tab means that editor cannot produce that format at all - which is often the deciding factor.