Tutorial Build a Notion-Style Editor in Angular
Step-by-step Angular tutorial for a Notion-style block editor: slash commands, drag handles, nested drag-and-drop, block colors and a floating outline.
Notion-style block editing
Block editing looks simple and is not. A drag handle has to know what can nest inside what, a slash menu has to survive being typed into mid-document, and turn-into has to preserve the text while replacing the node around it. These posts cover how each of those is built as a framework-agnostic extension rather than a bundled product feature.
Articles and tutorials
Tutorial 
Blog Domternal 0.9.0: Lists That Feel Like Notion
What is new in Domternal 0.9.0: type-preserving list items, per-item Turn into, Notion-style list spacing, split-aware outdent and lighter wrapper deps.
Tutorial Build a Notion-Style Editor in React
Step-by-step React tutorial for a Notion-style block editor with slash commands, drag handles, multi-level nesting, block colors and a floating outline.
Blog Notion-Style Block Editor for Any Framework
Notion-style block editing as headless ProseMirror extensions: slash menu, drag handles, Turn into, block colors, and a scroll-spy outline, in any framework.
In the docs
Notion Mode → Turning the preset on and what it restyles. Block Controls → Drag handle, context menu and slash command. Table of Contents → The scroll-spy outline extension.
More topics
Back to all articles or all tutorials.