# Slate — Completely Customizable Rich Text Editor Framework

> Slate is a low-level framework for building rich text editors in React, giving developers full control over the document model, rendering, and behavior.

## Install

Save in your project root:

# Slate — Completely Customizable Rich Text Editor Framework

## Quick Use
```bash
npm install slate slate-react slate-history
```
```jsx
import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';
import { withHistory } from 'slate-history';
import { useMemo, useState } from 'react';

function MyEditor() {
  const editor = useMemo(() => withHistory(withReact(createEditor())), []);
  const [value, setValue] = useState([{ type: 'paragraph', children: [{ text: 'Hello Slate' }] }]);
  return (
    <Slate editor={editor} initialValue={value} onChange={setValue}>
      <Editable />
    </Slate>
  );
}
```

## Introduction
Slate provides the building blocks for constructing rich text editors without imposing opinions about schema, commands, or rendering. Unlike turnkey editors that ship with a fixed feature set, Slate lets you define your own document model and plug in custom elements, marks, and behaviors. It powers editors at Airtable, GitBook, Prezly, and many other products.

## What Slate Does
- Models documents as a nested tree of nodes with a fully customizable schema
- Renders with React, letting you use custom components for every element type
- Supports plugins that intercept and transform editor operations at any level
- Includes `slate-history` for undo/redo and `slate-react` for React bindings
- Handles selections, ranges, and cursor movement across complex nested structures

## Architecture Overview
Slate's core is a pure data model: an `Editor` object containing a tree of `Element` and `Text` nodes. Operations like `insertText` or `splitNodes` produce atomic transforms applied to this tree. The `slate-react` package maps the tree to React components and syncs DOM selections bidirectionally. Plugins wrap the editor via higher-order functions (`withReact`, `withHistory`), overriding or extending default behavior without patching internals.

## Self-Hosting & Configuration
- Install `slate`, `slate-react`, and `slate-history` from npm
- Define custom element and leaf renderers via `renderElement` and `renderLeaf` props
- Use `Transforms` API to programmatically insert, delete, or modify nodes
- Normalize the document on every change by defining custom normalizer rules
- Pair with a serializer to convert the Slate tree to/from HTML, Markdown, or any format

## Key Features
- Schema-less by default so you can model any document structure
- First-class React integration with hooks and context
- Fine-grained operation log for collaborative editing via OT or CRDT
- Plugin system based on function composition rather than class inheritance
- TypeScript support with generic node types for full type safety

## Comparison with Similar Tools
- **Editor.js** — block-based with JSON output; Slate is a lower-level framework for custom editors
- **TipTap** — ProseMirror wrapper with batteries included; Slate offers more control but requires more setup
- **Quill** — opinionated WYSIWYG with Delta format; Slate is unopinionated and schema-free
- **Draft.js** — immutable state model by Meta; Slate uses a mutable tree with atomic operations
- **Lexical** — Meta's newer editor framework; Slate has a larger existing ecosystem

## FAQ
**Q: Is Slate suitable for production use?**
A: Yes. It is used in production by many companies. The API has stabilized significantly since the 0.50+ rewrite.

**Q: Can Slate handle collaborative editing?**
A: Slate's operation-based architecture is compatible with OT and CRDT. Libraries like `slate-yjs` integrate Yjs for real-time collaboration.

**Q: How does Slate handle copy-paste and serialization?**
A: Slate intercepts paste events and deserializes HTML into its node tree. You can customize the deserializer to handle any input format.

**Q: Does Slate work outside of React?**
A: The core `slate` package is framework-agnostic. However, the official rendering layer (`slate-react`) requires React. Community ports exist for other frameworks.

## Sources
- https://github.com/ianstormtaylor/slate
- https://docs.slatejs.org
- https://www.slatejs.org

---
Source: https://tokrepo.com/en/workflows/93e0cab9-44b2-11f1-9bc6-00163e2b0d79
Author: AI Open Source