Slate

Slate is a framework for building fully customizable rich text editors, giving developers the same low-level building blocks that power editors like Medium’s and Dropbox Paper’s rather than a fixed set of editor features. Instead of a pre-built WYSIWYG widget, Slate models editor content as an immutable, JSON-representable document tree and exposes a plugin-based architecture so every behavior — from what elements exist to how selection and history work — can be overridden or extended.

The project is split into focused packages: slate holds the core, view-agnostic document model, editor interface, and operation/transform logic; slate-react binds that core to React and contenteditable; slate-dom provides DOM-level utilities shared across renderers; slate-history adds undo/redo; and slate-hyperscript offers a JSX-like way to build test/seed documents. Because the schema is entirely developer-defined, teams use Slate to build anything from a simple comment box to a full block-based document editor.

What You Get

• A fully custom, JSON-serializable document schema — you define what block/inline/text types exist
• An Editor interface and Transforms API for programmatically inserting, deleting, and normalizing content
• A plugin architecture that lets you override core editor behaviors (isVoid, isInline, normalizeNode, etc.)
• slate-react for binding the core model to React via contenteditable
• slate-history for undo/redo built on the same operation log used for collaborative editing
• slate-hyperscript for writing editor documents in JSX-like test fixtures

Common Use Cases

• Building a custom block-based document editor (like Notion-style or Medium-style editors)
• Adding a rich text comment box or annotation editor with a constrained, app-specific schema
• Implementing collaborative or versioned editing on top of Slate’s operation-based change model
• Migrating away from contenteditable-only or fixed-feature WYSIWYG editors toward a fully customizable schema

Under The Hood

Architecture The core packages/slate/src directory defines the document model in interfaces/ (over 100 TypeScript files covering editor.ts at nearly 1,000 lines, node.ts, element.ts, text.ts, path.ts, point.ts, range.ts), each interface pairing a data shape with static helper functions rather than classes; create-editor.ts assembles the base Editor object and its default plugin behaviors, while transforms-node/, transforms-selection/, and transforms-text/ implement the composable operations (insertNodes, splitNodes, setSelection, etc.) that mutate the document immutably and emit Operation objects for the history log. slate-react layers React bindings and contenteditable DOM reconciliation on top of this core, slate-dom factors out DOM utilities shared by non-React renderers, and slate-history implements undo/redo by replaying/reversing the operation log — keeping the core package itself completely rendering-framework-agnostic. Tech Stack TypeScript monorepo managed with Yarn workspaces and Lerna, @babel/runtime for compiled output, published per-package to npm (slate, slate-react, slate-dom, slate-history, slate-hyperscript), with a documentation site under site/ and docs/ built with GitBook config. Code Quality The core package has its own test/ directory (24+ test files) run via Jest, alongside a playwright/ directory for end-to-end browser testing of the React bindings — reflecting a two-tier test strategy (pure logic unit tests for the model, browser-level tests for actual contenteditable behavior), and the project uses Changesets (.changeset/) for coordinated multi-package version releases. API Design The API trades a slightly steeper learning curve (developers must understand the immutable node/path/operation model) for very high flexibility — every default behavior is overridable via the plugin pattern, and the extensive docs/ and site/ examples walk through building custom elements, marks, and normalization rules step by step.