Build a Notion-Style Block Editor in React 2026 (3 Paths Compared)

Build a Notion-Style Block Editor in React 2026 (3 Paths Compared)

Building a Notion-style block editor sounds like a weekend project. Then you actually start.

Notion's editor is deceptively complex. Every paragraph is a discrete block. Every block can be dragged, reordered, transformed, or nested. Slash commands appear at just the right cursor position. Tables act like databases. Toggle blocks fold. And every keystroke feels instant — even with 500+ blocks on the page.

Replicating that in React takes real engineering. Not "spin up a WYSIWYG editor and add drag-drop" engineering. Real engineering.

This guide shows 3 proven paths to build a Notion-style block editor in React 2026. Path 1 ships in 10 minutes. Path 2 stays free. Path 3 gives total control at 4-6 weeks cost. Pick the right one for your product.

The 3 Paths to a React Block Editor

Most teams overthink this decision. The right answer depends on one question: is the editor your product, or is it a feature in your product? If it's a feature, go managed. If it IS the product, build custom.

What This Guide Covers

• ✅ 3 architectural paths — Eddyter, BlockNote, custom Lexical
• ✅ Working React code — copy-paste ready for all 3 paths
• ✅ Real 2026 pricing — no outdated numbers
• ✅ Cost math — 3-year TCO for each approach
• ✅ Notion features covered — slash commands, drag-drop, block types, nested blocks
• ✅ 7 common pitfalls — cursor jumping, focus loss, drag preview, more
• ✅ Best path by use case — Notion clone, AI writing tool, docs app

If you already know you want the code, jump to Path 1: Eddyter (10-Min Setup) or Path 3: Custom Lexical Build.

🎥 See a modern Lexical-based block editor: What is Eddyter? Why Developers Are Switching in 2026

The Short Answer

For most SaaS teams: Pick Path 1 (Eddyter). Full block editor with slash commands, drag-drop, and AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) built in. 10-minute setup. $12-$59/mo flat. Save $60K+ vs custom builds.

For Notion clones on tight budgets: Pick Path 2 (BlockNote). Free MIT-licensed with block-based UX out of box. Add Liveblocks ($99/mo) for real-time collaboration.

For custom editor products where editor IS the product: Pick Path 3 (Custom Lexical + @dnd-kit). Full control at 4-6 weeks engineering cost. Free MIT foundation.

Skip: Building on Draft.js (Meta deprecated), Quill (no block support, development stalled), TinyMCE (not architected for block-based UX).

Why Notion-Style Editors Are Hard to Build

Notion looks simple. It isn't. Here's what's actually going on under the hood.

1. Every Block Is Its Own Component

In a normal WYSIWYG editor, the entire document is one editable area. In Notion, each paragraph, heading, list, or embed is a discrete block. Each block manages its own focus, selection, and formatting. This changes the entire architectural mental model.

2. Slash Commands Need Precise Positioning

Type / and a menu appears at your exact cursor position. The menu filters as you type. Selecting an option transforms the current block (paragraph → heading, paragraph → code block, paragraph → embed). Getting this right requires:

• Cursor position tracking in DOM coordinates
• Portal-based popover positioning
• Keyboard navigation (arrow keys, enter, escape)
• Block transformation without losing focus

3. Drag-Drop Must Preserve State

Drag a block up or down. The document reorders. Cursor stays on the block. Undo history remembers the move as one action. Focus doesn't jump. Selection doesn't collapse.

Doing all of that right typically requires:

• @dnd-kit or similar drag library
• Careful integration with editor state
• Custom drag preview rendering
• Auto-scroll during long drags

4. Nested Blocks Multiply Complexity

Toggle blocks contain child blocks. Column layouts nest blocks side-by-side. Callouts, quotes, and code blocks all support nested content. Every drag-drop, slash command, and keyboard shortcut must handle nesting correctly.

5. Performance Matters at Scale

Notion documents with 500+ blocks stay responsive. That requires:

• Virtualization for long documents
• Debounced auto-save
• Incremental rendering
• Smart re-renders (only affected blocks update)

Getting all 5 right from scratch takes 4-6 weeks minimum. That's why most teams use Path 1 or Path 2 instead of Path 3.

For broader context on editor architecture, see How WYSIWYG Editors Work in 2026: A Developer's Deep Dive and Rich Text Editor Bundle Size Comparison 2026.

<a id="path-1"></a>

Path 1 — Build With Eddyter (10 Minutes, $12-$59/mo)

Eddyter ships a Notion-style block editor out of the box. Slash commands, drag-drop, block transformations, and AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) all built in. Under 10 minutes from npm install to production.

What You Get

• ✅ Slash commands (/) — 20+ block types included
• ✅ Drag-and-drop block reordering with proper focus handling
• ✅ Block transformations — paragraph ↔ heading ↔ list ↔ code
• ✅ Nested blocks — quotes, callouts, code blocks
• ✅ Advanced tables with cell merging
• ✅ AI features built in — chat, autocomplete, tone refinement
• ✅ Clean semantic HTML output
• ✅ ~140 KB bundle — Core Web Vitals safe
• ✅ Mobile-responsive — WCAG 2.1 AA out of box

Setup (10 Minutes)

Step 1: Get your API key from eddyter.com/user/license-key

Add to .env.local:

bash

1
NEXT_PUBLIC_EDDYTER_API_KEY=your-api-key-here

Step 2: Install Eddyter

bash

1
npm install eddyter

Step 3: Render the block editor

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
"use client";
import {
  ConfigurableEditorWithAuth,
  EditorProvider
} from 'eddyter';
import 'eddyter/style.css';
export default function NotionStyleEditor() {
  const apiKey = process.env.NEXT_PUBLIC_EDDYTER_API_KEY;
  const handleChange = (html) => {
    console.log('Content:', html);
    // Save to database
  };
  return (
    <EditorProvider>
      <ConfigurableEditorWithAuth
        apiKey={apiKey}
        onChange={handleChange}
      />
    </EditorProvider>
  );
}

That's the complete setup. Type / to see the slash command menu. Drag any block to reorder. Transform blocks with keyboard shortcuts. AI works on Premium plans.

For advanced customization (block type restrictions, custom slash command options, theming), see the Eddyter documentation.

When Path 1 Fits

• ✅ Building a SaaS product where the editor is a feature
• ✅ Need to ship in days, not weeks
• ✅ Want AI built in without add-on costs
• ✅ Building on React, Next.js, Vue, Angular, Svelte, Laravel, or Vanilla JS
• ✅ Predictable flat pricing matters

When Path 1 Doesn't Fit

• ❌ You need total control over block rendering
• ❌ You're building a custom editor product where editor IS the differentiator
• ❌ You need to modify core editor behavior at low level

For deeper analysis, see Best Rich Text Editor for React 2026, How to Add a Rich Text Editor in Next.js 2026 (10-Min Guide), and 10 Best WYSIWYG Editors for Developers 2026.

🎥 See real setup: Integrate Eddyter in 30 Minutes with Cursor, Claude, Lovable

<a id="path-2"></a>

Path 2 — Build With BlockNote (Free, React-Only)

BlockNote is a free MIT-licensed React block editor built specifically for Notion-style products. React-only. Complete block-based UI ships built in.

What You Get With BlockNote

• ✅ Free MPL 2.0 license — unlimited commercial use
• ✅ Block-based UX matches Notion mental model
• ✅ React 18 and 19 support
• ✅ Slash commands built in
• ✅ Drag-and-drop reordering
• ✅ ~180 KB bundle
• ✅ Community-active — weekly updates

Setup

Step 1: Install BlockNote

bash

1
npm install @blocknote/core @blocknote/react @blocknote/mantine

Step 2: Create the editor component

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
"use client";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
export default function BlockNoteEditor() {
  const editor = useCreateBlockNote();
  return (
    <BlockNoteView
      editor={editor}
      onChange={() => {
        const blocks = editor.document;
        console.log('Blocks:', blocks);
      }}
    />
  );
}

That's the basic setup. BlockNote outputs structured JSON blocks (not HTML), which suits Notion-style products but requires transformation for pure HTML use cases.

For Real-Time Collaboration (Add Liveblocks)

BlockNote pairs with Liveblocks for real-time collaboration. Add ~$99/mo for Liveblocks Starter plan:

bash

1
npm install @liveblocks/react @liveblocks/yjs y-protocols yjs

Then wrap the editor with Liveblocks Room provider (see Liveblocks docs for full setup).

When Path 2 Fits

• ✅ Building a Notion clone or knowledge management product
• ✅ React-only stack (no Vue, Angular, Svelte)
• ✅ Structured JSON output is OK (or you'll transform to HTML)
• ✅ Fixed budget prefers open-source over subscription
• ✅ Willing to trade AI features for cost savings

When Path 2 Doesn't Fit

• ❌ You need multi-framework support (Vue, Angular, Svelte)
• ❌ You need HTML output (not JSON)
• ❌ You need built-in multi-model AI without add-on costs
• ❌ You don't want vendor lock-in to Liveblocks for collaboration

For comparisons, see BlockNote vs TipTap 2026.

<a id="path-3"></a>

Path 3 — Build Custom on Lexical + @dnd-kit (4-6 Weeks, $60K+)

For teams where the editor IS the product — Notion competitors, custom document platforms, editor-first SaaS — building on Meta's Lexical framework gives total control. Free MIT license. 4-6 weeks minimum to reach production quality.

What You Build Yourself

• ⚠️ Block system — custom Lexical node types for each block
• ⚠️ Slash commands — cursor position tracking + portal popover
• ⚠️ Drag-and-drop — @dnd-kit integration with Lexical state
• ⚠️ Block transformations — paragraph ↔ heading ↔ list logic
• ⚠️ Nested blocks — quote, callout, code containers
• ⚠️ Undo/redo integration — group multi-block operations
• ⚠️ Focus management — cursor preservation during reorders
• ⚠️ Custom toolbar — block-specific formatting menus
• ⚠️ AI integration — if needed, build streaming rendering yourself

Architectural Approach

Step 1: Set up base Lexical editor

bash

1
2
npm install lexical @lexical/react
npm install @dnd-kit/core @dnd-kit/sortable

Step 2: Define custom block node types

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import { ElementNode, $applyNodeReplacement } from 'lexical';
export class BlockNode extends ElementNode {
  static getType() {
    return 'block';
  }
  static clone(node) {
    return new BlockNode(node.__blockType, node.__key);
  }
  constructor(blockType, key) {
    super(key);
    this.__blockType = blockType;
  }
  createDOM() {
    const div = document.createElement('div');
    div.className = `block block-${this.__blockType}`;
    div.setAttribute('data-block-type', this.__blockType);
    return div;
  }
  updateDOM(prevNode, dom) {
    if (prevNode.__blockType !== this.__blockType) {
      dom.className = `block block-${this.__blockType}`;
      dom.setAttribute('data-block-type', this.__blockType);
      return true;
    }
    return false;
  }
}

Step 3: Build slash command plugin

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
import { useEffect, useState } from 'react';
import { $getSelection, $isRangeSelection } from 'lexical';
export function SlashCommandPlugin() {
  const [editor] = useLexicalComposerContext();
  const [showMenu, setShowMenu] = useState(false);
  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
  const [query, setQuery] = useState('');
  useEffect(() => {
    return editor.registerTextContentListener((textContent) => {
      editor.getEditorState().read(() => {
        const selection = $getSelection();
        if (!$isRangeSelection(selection)) return;
        const anchorNode = selection.anchor.getNode();
        const text = anchorNode.getTextContent();
        const slashIndex = text.lastIndexOf('/');
        if (slashIndex === text.length - 1) {
          // Show menu at cursor position
          const domSelection = window.getSelection();
          if (domSelection && domSelection.rangeCount > 0) {
            const range = domSelection.getRangeAt(0);
            const rect = range.getBoundingClientRect();
            setMenuPosition({
              top: rect.bottom + window.scrollY,
              left: rect.left + window.scrollX
            });
            setShowMenu(true);
            setQuery('');
          }
        } else if (slashIndex >= 0) {
          setQuery(text.substring(slashIndex + 1));
        } else {
          setShowMenu(false);
        }
      });
    });
  }, [editor]);
  if (!showMenu) return null;
  return (
    <div
      className="slash-command-menu"
      style={{
        position: 'absolute',
        top: menuPosition.top,
        left: menuPosition.left,
        background: 'white',
        border: '1px solid #e5e5e5',
        borderRadius: '8px',
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        padding: '8px',
        zIndex: 1000,
      }}
    >
      {/* Filtered block type options */}
      <SlashCommandOptions query={query} />
    </div>
  );
}

Step 4: Build drag-and-drop with @dnd-kit

jsx

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy } from '@dnd-kit/sortable';
export function DragDropPlugin() {
  const [editor] = useLexicalComposerContext();
  const [blocks, setBlocks] = useState([]);
  const sensors = useSensors(
    useSensor(PointerSensor, {
      activationConstraint: { distance: 8 },
    }),
    useSensor(KeyboardSensor, {
      coordinateGetter: sortableKeyboardCoordinates,
    })
  );
  const handleDragEnd = (event) => {
    const { active, over } = event;
    if (!over || active.id === over.id) return;
    editor.update(() => {
      // Move Lexical nodes to new positions
      // Preserve cursor position
      // Add to undo history as single action
    });
  };
  return (
    <DndContext
      sensors={sensors}
      collisionDetection={closestCenter}
      onDragEnd={handleDragEnd}
    >
      <SortableContext items={blocks} strategy={verticalListSortingStrategy}>
        {blocks.map(block => (
          <SortableBlock key={block.id} block={block} />
        ))}
      </SortableContext>
    </DndContext>
  );
}

That's just the scaffolding. Real production Path 3 involves 15+ additional plugins, careful state management, extensive testing across browsers, and mobile touch handling.

When Path 3 Fits

• ✅ Building a Notion competitor (editor IS the product)
• ✅ You have 4-6 weeks of senior React engineering time
• ✅ You need full architectural control
• ✅ Custom block types beyond standard Notion set

When Path 3 Doesn't Fit

• ❌ You want to ship in days (use Path 1)
• ❌ Editor is a feature, not the product (use Path 1 or Path 2)
• ❌ You don't have Lexical or React editor expertise on team
• ❌ You need AI features without spending 3-6 additional weeks building AI integration

For deeper Lexical architecture, see How WYSIWYG Editors Work in 2026: A Developer's Deep Dive, Best Lexical Alternative 2026, and How to Migrate From TipTap to Lexical 2026.

Real Cost Math: 3-Year TCO Comparison

For a typical React SaaS with 1,000 users, here's what each path actually costs over three years:

Path 1 saves $57,000-$217,000 over 3 years vs custom builds. For build-vs-buy analysis, see Build vs Buy: Real Cost of Building a Rich Text Editor 2026 and Why Building Your Own Rich Text Editor Is a Startup Killer.

7 Common Pitfalls Building Block Editors

Teams building block editors consistently hit these issues.

Pitfall 1: Cursor Jumping During Drag-Drop

Drag a block. Cursor jumps to end of document. Users lose their place. Fix: preserve cursor position in Lexical selection state during drag operations.

Pitfall 2: Slash Menu Appears at Wrong Position

Menu shows at start of line instead of cursor. Fix: use window.getSelection().getRangeAt(0).getBoundingClientRect() for exact cursor coordinates.

Pitfall 3: Undo Doesn't Undo Block Moves

Drag a block. Press Ctrl+Z. Nothing happens. Fix: wrap drag operations in editor.update() with proper history tagging.

Pitfall 4: Nested Blocks Break Focus

Focus jumps from nested block to parent unexpectedly. Fix: implement custom focus management in nested block components.

Pitfall 5: Performance Degrades at Scale

Documents with 500+ blocks lag. Fix: implement virtualization with react-window or @tanstack/react-virtual.

Pitfall 6: Drag Preview Looks Ugly

Default HTML5 drag preview shows raw block content. Fix: use @dnd-kit's DragOverlay component with custom preview.

Pitfall 7: Mobile Drag-Drop Doesn't Work

Touch events don't trigger drag on mobile. Fix: configure @dnd-kit PointerSensor for touch support and add touch-specific activation constraints.

Best Path by Use Case

For Notion Clones (Product Is the Editor)

Pick Path 3 (Custom Lexical). Or Path 2 (BlockNote) if speed to MVP matters more than differentiation.

For SaaS Products With Editor as Feature

Pick Path 1 (Eddyter). 10-minute setup, AI included, flat pricing. See Best Rich Text Editor for B2B SaaS Apps 2026.

For AI Writing Tools With Block-Based UX

Pick Path 1 (Eddyter). Only option with multi-model AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) built in. See Best Rich Text Editor for AI Agent Products 2026 and Best Rich Text Editors for AI Apps 2026.

For Knowledge Management Products

Pick Path 1 or Path 2. Both work well. Eddyter for AI features + multi-framework. BlockNote for open-source preference.

For Documentation Sites

Pick Path 1. See Best Rich Text Editor for Documentation Sites 2026.

For Prototypes and MVPs

Pick Path 2 (BlockNote). Free, fast, block-based UX matches Notion mental model.

For framework-specific guidance, see:

• Best Rich Text Editor for React 2026
• Best Rich Text Editor for Next.js App Router 2026
• Best Rich Text Editor for Vue.js 2026
• 10 Best WYSIWYG Editors for Developers 2026

Frequently Asked Questions

1. What's the easiest way to build a Notion-style block editor in React?

Use Eddyter. Install with npm install eddyter, add your API key, render the component with "use client". Under 10 minutes to a working block editor with slash commands, drag-drop, block transformations, and AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3) built in. Works with React 18.2+ and React 19. Native Next.js App Router support. See Path 1 above for complete working code. For teams wanting fully open-source, BlockNote is the next-best option — free MIT license with block-based UI built in, but React-only and requires Liveblocks ($99/mo) for collaboration.

2. Can I build a Notion clone with BlockNote in React?

Yes, BlockNote is designed specifically for this use case. It provides block-based editing UX matching Notion's mental model — every element is a discrete block that can be dragged, transformed, and reordered. Complete UI ships built in. Add Liveblocks ($99/mo) for real-time collaboration. Trade-offs: React-only (no Vue, Angular, Svelte), structured JSON output (not HTML), and AI features require paid BlockNote AI plan on top of base subscription. For Notion clones on tight budgets, BlockNote is the fastest open-source path. For SaaS products where the editor is a feature (not the product), Eddyter delivers better ROI.

3. Should I build a Notion editor with Lexical or use a ready-made library?

Depends on whether the editor IS your product. For Notion competitors where editor differentiation is the entire business model — Lexical + custom development gives total architectural control at 4-6 weeks initial engineering cost plus ongoing maintenance ($60K-$150K+ over 3 years). For SaaS products where the editor is a feature enabling other product value (documentation, content creation, note-taking within a larger app), using Eddyter saves $57K-$217K over 3 years while delivering equivalent Notion-style UX. The rule: if the editor is your product, build it. If the editor is a feature, buy it.

4. How do I add drag-and-drop block reordering to a React editor?

Use @dnd-kit/core and @dnd-kit/sortable. Wrap the editor content in <DndContext> with <SortableContext> and verticalListSortingStrategy. Implement handleDragEnd to reorder blocks in your editor state. For Lexical editors, wrap the reorder logic in editor.update() with proper history tagging so undo/redo works correctly. Preserve cursor position through the reorder operation to prevent focus jumping. Path 3 above shows working code. Eddyter and BlockNote handle drag-drop natively — no custom implementation needed.

5. How do slash commands work in React block editors?

Slash commands work by: (1) listening for / character input in the editor, (2) tracking cursor position with window.getSelection().getRangeAt(0).getBoundingClientRect(), (3) rendering a portal-based popover menu at cursor coordinates, (4) filtering menu options based on characters typed after /, (5) transforming the current block when user selects an option. Getting positioning right across browsers, viewports, and edge cases (menu near viewport edge, scrolling during typing) requires careful engineering. Path 3 shows scaffolding code. Eddyter and BlockNote include slash commands out of the box — no implementation required.

6. Does Eddyter's block editor work with Next.js App Router?

Yes. Eddyter is native Next.js 14 and 15 with full App Router support. Add "use client" as the first line of your editor component since rich text editors need browser APIs. Parent pages can stay Server Components — only the editor component needs the directive. Works with React 18.2+ and React 19.x. See How to Add a Rich Text Editor in Next.js 2026 (10-Min Guide) for complete Next.js integration walkthrough including Route Handler save patterns.

Ready to Build Your Notion-Style Editor?

Stop engineering block systems, slash commands, and drag-drop from scratch. Drop Eddyter into your React app today — Notion-style block editor with AI (GPT-5, Claude Sonnet 5, Haiku 4.5, Gemini 3), ~140 KB bundle, 10-minute setup, $12-$59/mo flat.

👉 Try Eddyter free at eddyter.com
📚 Read the docs
💰 See pricing
🎥 Watch the intro video | Watch the 30-min integration guide