slate

A completely customizable framework for building rich text editors. (Currently in beta.)

29,602

3,226

29,602

657

View on GitHub View on NPM

Top Related Projects

draft-js

22,569

A React framework for building text editors.

quill

43,060

Quill is a modern WYSIWYG editor built for compatibility and extensibility

tinymce

14,837

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

ckeditor5

9,335

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.

trix

18,951

A rich text editor for everyday writing

Quick Overview

Slate is a customizable framework for building rich text editors in React. It provides a set of tools and abstractions that make it easier to create complex, interactive editing experiences while maintaining flexibility and extensibility.

Pros

Highly customizable and flexible architecture
Built with React, making it easy to integrate into React-based applications
Supports complex editing operations and nested document structures
Active community and regular updates

Cons

Steep learning curve for beginners
Documentation can be overwhelming due to the framework's flexibility
Performance can be an issue with very large documents
Some users report occasional bugs and inconsistencies

Code Examples

Creating a basic editor:

import React, { useMemo, useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

const SimpleEditor = () => {
  const [value, setValue] = useState([{ children: [{ text: 'A line of text in a paragraph.' }] }])
  const editor = useMemo(() => withReact(createEditor()), [])

  return (
    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
      <Editable />
    </Slate>
  )
}

Adding custom formatting:

const CustomEditor = {
  isBoldMarkActive(editor) {
    const [match] = Editor.nodes(editor, {
      match: n => n.bold === true,
      universal: true,
    })
    return !!match
  },

  toggleBoldMark(editor) {
    const isActive = CustomEditor.isBoldMarkActive(editor)
    Transforms.setNodes(
      editor,
      { bold: isActive ? null : true },
      { match: n => Text.isText(n), split: true }
    )
  },
}

Handling keyboard shortcuts:

const Editable = () => (
  <Editable
    onKeyDown={event => {
      if (!event.ctrlKey) return
      switch (event.key) {
        case 'b': {
          event.preventDefault()
          CustomEditor.toggleBoldMark(editor)
          break
        }
      }
    }}
  />
)

Getting Started

Install Slate and its React bindings:
```
npm install slate slate-react
```

Create a basic editor component:

import React, { useMemo, useState } from 'react'
import { createEditor } from 'slate'
import { Slate, Editable, withReact } from 'slate-react'

const MyEditor = () => {
  const [value, setValue] = useState([{ children: [{ text: 'Start typing...' }] }])
  const editor = useMemo(() => withReact(createEditor()), [])

  return (
    <Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
      <Editable />
    </Slate>
  )
}

export default MyEditor

Use the editor component in your React application:

import MyEditor from './MyEditor'

const App = () => (
  <div>
    <h1>My Slate Editor</h1>
    <MyEditor />
  </div>
)

Competitor Comparisons

draft-js

22,569

A React framework for building text editors.

Pros of Draft.js

Robust and battle-tested, used in production by Facebook
Extensive documentation and community support
Built-in support for rich text editing features like inline styles and entities

Cons of Draft.js

Steeper learning curve due to its complex API
Less flexible for custom data models and schemas
Limited support for collaborative editing out of the box

Code Comparison

Draft.js:

import { Editor, EditorState } from 'draft-js';

const [editorState, setEditorState] = useState(EditorState.createEmpty());

<Editor editorState={editorState} onChange={setEditorState} />

Slate:

import { createEditor } from 'slate';
import { Slate, Editable, withReact } from 'slate-react';

const [editor] = useState(() => withReact(createEditor()));

<Slate editor={editor} value={initialValue} onChange={value => setValue(value)}>
  <Editable />
</Slate>

Both libraries provide React components for rich text editing, but Slate offers a more flexible and customizable approach. Draft.js has a more opinionated structure, while Slate allows for easier customization of the editor's behavior and data model. Slate's API is generally considered more intuitive and easier to work with for custom editing experiences.

quill

43,060

Quill is a modern WYSIWYG editor built for compatibility and extensibility

Pros of Quill

Simpler API and easier to get started with
Better out-of-the-box support for rich text formatting
More extensive documentation and examples

Cons of Quill

Less flexible and customizable than Slate
Limited support for complex document structures
Smaller community and fewer third-party plugins

Code Comparison

Slate:

const editor = withReact(createEditor())
const [value, setValue] = useState([
  { type: 'paragraph', children: [{ text: 'A line of text in a paragraph.' }] },
])

<Slate editor={editor} value={value} onChange={newValue => setValue(newValue)}>
  <Editable />
</Slate>

Quill:

const quill = new Quill('#editor', {
  theme: 'snow'
});
quill.setText('Hello World!');
quill.on('text-change', function(delta, oldDelta, source) {
  console.log('Editor contents changed');
});

Both Slate and Quill are popular rich text editors for React applications. Slate offers more flexibility and control over the editing experience, making it suitable for complex document structures. Quill, on the other hand, provides a simpler API and is easier to set up for basic rich text editing needs. The choice between the two depends on the specific requirements of your project and the level of customization you need.

tinymce

14,837

The world's #1 JavaScript library for rich text editing. Available for React, Vue and Angular

Pros of TinyMCE

More mature and feature-rich, with a longer development history
Extensive plugin ecosystem and customization options
Better out-of-the-box support for non-technical users

Cons of TinyMCE

Larger file size and potentially slower performance
Less flexible for custom implementations and advanced use cases
Steeper learning curve for developers due to its complexity

Code Comparison

TinyMCE initialization:

tinymce.init({
  selector: '#myTextarea',
  plugins: 'link image table',
  toolbar: 'undo redo | formatselect | bold italic'
});

Slate initialization:

const editor = withReact(createEditor())
const [value, setValue] = useState(initialValue)

return (
  <Slate editor={editor} value={value} onChange={setValue}>
    <Editable />
  </Slate>
)

TinyMCE offers a more configuration-based approach, while Slate provides a more programmatic and React-friendly setup. TinyMCE's initialization is simpler for basic use cases, but Slate offers greater flexibility for custom implementations.

ckeditor5

9,335

Powerful rich text editor framework with a modular architecture, modern integrations, and features like collaborative editing.

Pros of CKEditor 5

More feature-rich out-of-the-box, with a wide range of plugins and extensions
Better suited for non-technical users, with a WYSIWYG interface
Extensive documentation and community support

Cons of CKEditor 5

Larger bundle size, which may impact performance for lightweight applications
Less flexibility for custom data models and complex editing behaviors
Steeper learning curve for developers who want to extend or customize the editor

Code Comparison

CKEditor 5 (declarative configuration):

ClassicEditor
    .create(document.querySelector('#editor'), {
        toolbar: ['bold', 'italic', 'link'],
        language: 'en'
    })
    .catch(error => {
        console.error(error);
    });

Slate (programmatic configuration):

const editor = withReact(createEditor())
const [value, setValue] = useState(initialValue)

return (
  <Slate editor={editor} value={value} onChange={setValue}>
    <Editable />
  </Slate>
)

CKEditor 5 uses a more declarative approach with predefined configurations, while Slate offers a more programmatic and flexible setup, allowing for greater customization but requiring more code to achieve basic functionality.

prosemirror

7,605

The ProseMirror WYSIWYM editor

Pros of ProseMirror

More flexible and customizable document model
Better support for collaborative editing
Stronger focus on extensibility through plugins

Cons of ProseMirror

Steeper learning curve due to its complexity
Less opinionated, requiring more setup and configuration
Smaller community compared to Slate

Code Comparison

ProseMirror:

import {Schema} from "prosemirror-model"
import {EditorState} from "prosemirror-state"
import {EditorView} from "prosemirror-view"

const schema = new Schema({
  nodes: {
    doc: {content: "block+"},
    paragraph: {group: "block", content: "inline*"},
    text: {group: "inline"}
  }
})

const state = EditorState.create({schema})
const view = new EditorView(document.body, {state})

Slate:

import {createEditor} from 'slate'
import {Slate, Editable, withReact} from 'slate-react'

const editor = withReact(createEditor())
const initialValue = [
  {
    type: 'paragraph',
    children: [{text: 'A line of text in a paragraph.'}],
  },
]

return (
  <Slate editor={editor} value={initialValue}>
    <Editable />
  </Slate>
)

trix

18,951

A rich text editor for everyday writing

Pros of Trix

Simpler setup and integration, especially for Rails applications
Built-in toolbar with common formatting options
Lightweight and requires minimal configuration

Cons of Trix

Less customizable than Slate
Limited advanced features and extensibility
Primarily designed for basic rich text editing

Code Comparison

Trix (HTML):

<trix-editor class="trix-content" input="x"></trix-editor>
<input id="x" type="hidden" name="content">

Slate (JavaScript):

const editor = withReact(createEditor())
const [value, setValue] = useState(initialValue)

return (
  <Slate editor={editor} value={value} onChange={setValue}>
    <Editable />
  </Slate>
)

Summary

Trix is a simpler, more straightforward rich text editor that works well out of the box, especially for Rails applications. It offers a built-in toolbar and requires minimal setup. However, it lacks the advanced customization options and extensibility of Slate.

Slate, on the other hand, provides a more flexible and powerful framework for building complex, customized rich text editors. It offers greater control over the editing experience but requires more initial setup and configuration.

Choose Trix for quick implementation of basic rich text editing, or Slate for building highly customized and feature-rich editing experiences.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

A completely customizable framework
for building rich text editors.

Why? Â· Principles Â· Demo Â· Examples Â· Documentation Â· Contributing!

Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Google Docsâwhich are becoming table stakes for applications on the webâwithout your codebase getting mired in complexity.

It can do this because all of its logic is implemented with a series of plugins, so you aren't ever constrained by what is or isn't in "core". You can think of it like a pluggable implementation of contenteditable built on top of React. It was inspired by libraries like Draft.js, Prosemirror and Quill.

ð¤ Slate is currently in beta. Its core API is useable right now, but you might need to pull request improvements for advanced use cases, or fixes for some bugs. Some of its APIs are not "finalized" and will have breaking changes over time as we discover better solutions. There isn't currently a 1.0 release schedule, we're still getting the architecture right.

ð¤ Slate is also contributor-driven. It is not backed by any huge company, which means that all contributions are voluntary and done by the people who need them. If you need something improved, added, or fixed, please contribute it yourself or no one will. And if you want to become a more active maintainer, let us know in the Slack channel.

Why?

Why create Slate? Well... (Beware: this section has a few of my opinions!)

Before creating Slate, I tried a lot of the other rich text libraries out thereâDraft.js, Prosemirror, Quill, etc. What I found was that while getting simple examples to work was easy enough, once you started trying to build something like Medium, Dropbox Paper or Google Docs, you ran into deeper issues...

The editor's "schema" was hardcoded and hard to customize. Things like bold and italic were supported out of the box, but what about comments, or embeds, or even more domain-specific needs?
Transforming the documents programmatically was very convoluted. Writing as a user may have worked, but making programmatic changes, which is critical for building advanced behaviors, was needlessly complex.
Serializing to HTML, Markdown, etc. seemed like an afterthought. Simple things like transforming a document to HTML or Markdown involved writing lots of boilerplate code, for what seemed like very common use cases.
Re-inventing the view layer seemed inefficient and limiting. Most editors rolled their own views, instead of using existing technologies like React, so you have to learn a whole new system with new "gotchas".
Collaborative editing wasn't designed for in advance. Often the editor's internal representation of data made it impossible to use to for a realtime, collaborative editing use case without basically rewriting the editor.
The repositories were monolithic, not small and reusable. The code bases for many of the editors often didn't expose the internal tooling that could have been re-used by developers, leading to having to reinvent the wheel.
Building complex, nested documents was impossible. Many editors were designed around simplistic "flat" documents, making things like tables, embeds and captions difficult to reason about and sometimes impossible.

Of course not every editor exhibits all of these issues, but if you've tried using another editor you might have run into similar problems. To get around the limitations of their API's and achieve the user experience you're after, you have to resort to very hacky things. And some experiences are just plain impossible to achieve.

If that sounds familiar, you might like Slate.

Which brings me to how Slate solves all of that...

Principles

Slate tries to solve the question of "Why?" with a few principles:

First-class plugins. The most important part of Slate is that plugins are first-class entities. That means you can completely customize the editing experience, to build complex editors like Medium's or Dropbox's, without having to fight against the library's assumptions.
Schema-less core. Slate's core logic assumes very little about the schema of the data you'll be editing, which means that there are no assumptions baked into the library that'll trip you up when you need to go beyond the most basic use cases.
Nested document model. The document model used for Slate is a nested, recursive tree, just like the DOM itself. This means that creating complex components like tables or nested block quotes are possible for advanced use cases. But it's also easy to keep it simple by only using a single level of hierarchy.
Parallel to the DOM. Slate's data model is based on the DOMâthe document is a nested tree, it uses selections and ranges, and it exposes all the standard event handlers. This means that advanced behaviors like tables or nested block quotes are possible. Pretty much anything you can do in the DOM, you can do in Slate.
Intuitive commands. Slate documents are edited using "commands", that are designed to be high-level and extremely intuitive to write and read, so that custom functionality is as expressive as possible. This greatly increases your ability to reason about your code.
Collaboration-ready data model. The data model Slate usesâspecifically how operations are applied to the documentâhas been designed to allow for collaborative editing to be layered on top, so you won't need to rethink everything if you decide to make your editor collaborative.
Clear "core" boundaries. With a plugin-first architecture, and a schema-less core, it becomes a lot clearer where the boundary is between "core" and "custom", which means that the core experience doesn't get bogged down in edge cases.

Demo

Check out the live demo of all of the examples!

Examples

To get a sense for how you might use Slate, check out a few of the examples:

Plain text â showing the most basic case: a glorified <textarea>.
Rich text â showing the features you'd expect from a basic editor.
Markdown preview â showing how to add key handlers for Markdown-like shortcuts.
Inlines â showing how wrap text in inline nodes with associated data.
Images â showing how to use void (text-less) nodes to add images.
Hovering toolbar â showing how a hovering toolbar can be implemented.
Tables â showing how to nest blocks to render more advanced components.
Paste HTML â showing how to use an HTML serializer to handle pasted HTML.
Mentions â showing how to use inline void nodes for simple @-mentions.
See all the examples...

If you have an idea for an example that shows a common use case, pull request it!

Documentation

If you're using Slate for the first time, check out the Getting Started walkthroughs and the Concepts to familiarize yourself with Slate's architecture and mental models.

If even that's not enough, you can always read the source itself, which is heavily commented.

There are also translations of the documentation into other languages:

ä¸æ (v0.47)
ä¸æ (v0.57)
ä¸æ (v0.59)

If you're maintaining a translation, feel free to pull request it here!

Packages

Slate's codebase is monorepo managed with Lerna. It consists of a handful of packagesâalthough you won't always use all of them. They are:

Package	Version	Size	Description
`slate`			Slate's core data model logic.
`slate-history`			A plugin that adds undo/redo history to Slate.
`slate-hyperscript`			A hyperscript tool to write JSX Slate documents!
`slate-react`			React components for rendering Slate editors.