Block Editing Paradigm — Rich Text Explorer

Three Paradigms

Inline / Document Model

ProseMirror, Tiptap, Slate

Helloworld!

Another paragraphwith mixedformatting

The document is a tree of nodes with inline marks. Text runs freely across the document with marks (bold, italic, etc.) applied as ranges. Maximum flexibility for inline formatting.

Pros: Rich inline formatting, complex nesting, schema validation, collaboration-friendly

Cons: Complex implementation, harder to serialize, steeper learning curve

Block-Based

Editor.js

📝 Paragraph block

📌 Heading block

🖼 Image block

📋 List block

Each block is independent with its own type, data, and rendering. Blocks are the atomic units — you can't have inline content spanning blocks. Clean JSON output.

Pros: Simple data model, easy custom blocks, clean JSON, drag-and-drop

Cons: Limited inline formatting, no cross-block selections, less sophisticated editing

Hybrid (Block + Inline)

BlockNote, Notion, AFFiNE

¶ Helloworld!

H Title withformatting

Blocks are the container units, but each block contains rich inline content. Combines block-level structure (drag, reorder, nest) with inline-level formatting (bold, italic, links).

Pros: Best of both worlds, Notion-like UX, block operations + rich inline

Cons: Most complex to build, cross-block operations tricky, newer/less proven

Data Model Comparison

Inline Model (ProseMirror/Tiptap)

json

{
  "type": "doc",
  "content": [
    {
      "type": "paragraph",
      "content": [
        { "type": "text", "text": "Hello " },
        { "type": "text", "text": "world", "marks": [{ "type": "bold" }] },
        { "type": "text", "text": "!" }
      ]
    }
  ]
}

Block Model (Editor.js)

json

{
  "blocks": [
    {
      "type": "paragraph",
      "data": { "text": "Hello <b>world</b>!" }
    },
    {
      "type": "heading",
      "data": { "text": "Title", "level": 2 }
    },
    {
      "type": "image",
      "data": { "url": "photo.jpg", "caption": "A photo" }
    }
  ]
}

Hybrid Model (BlockNote)

javascript

// Hybrid approach (BlockNote, Notion)
// Blocks contain inline content with marks
{
  "type": "paragraph",
  "content": [
    { "type": "text", "text": "Hello ", "styles": {} },
    { "type": "text", "text": "world", "styles": { "bold": true } }
  ],
  "props": { "backgroundColor": "yellow" }
}

Feature Comparison

Feature	Inline (ProseMirror)	Block (Editor.js)	Hybrid (BlockNote)
Inline formatting	Full (marks system)	Limited (HTML in blocks)	Full (styled text)
Block drag & drop	Plugin needed	Built-in	Built-in
Nested blocks	Via schema	No	Yes
Custom blocks	NodeViews	Tool plugins	Custom types
Cross-block selection	Yes	No	Limited
Collaboration	OT / CRDT	Not built-in	Yjs (CRDT)
Data format	JSON tree	Flat JSON blocks	Nested JSON
Learning curve	Steep	Easy	Moderate
Markdown support	Via serializer	No	Built-in

Ecosystem

ProseMirror

The gold standard for inline document editing. Powers Atlassian, NYT, Tiptap, Milkdown.

Inline

Editor.js

Simple block editor by CodeX. Clean JSON output, easy custom blocks. Good for CMS.

Block

BlockNote

Modern hybrid editor built on ProseMirror + Tiptap. React-focused, Notion-like UX.

Hybrid

BlockSuite / AFFiNE

Next-gen block editor framework. CRDT-native, supports canvas + doc modes.

Hybrid

Lexical (Meta)

React-focused editor with its own document model. Hybrid approach, extensible nodes.

Hybrid

Slate

React-only editor framework. Custom rendering, plugin-based. Flexible but React-locked.

Inline

Recommendation

When to use what

Content writing / docs: Inline (ProseMirror/Tiptap) — maximum formatting flexibility
CMS / structured content: Block (Editor.js) — clean data model, easy custom types
Notion-clone / knowledge base: Hybrid (BlockNote) — best UX for drag-and-drop + rich text
Markdown-first: CodeMirror 6 or Milkdown — markdown as source of truth