Slate is a completely customizable framework for building rich text editors. It provides a set of tools and components to create complex text editing experiences with ease.
Creating a Basic Editor
This code initializes a basic Slate editor instance. The `Editor` class is the core of Slate, and it provides the foundational methods and properties needed to build a rich text editor.
const { Editor } = require('slate');
const editor = new Editor();
console.log(editor);Handling User Input
This code demonstrates how to handle user input by inserting text into the editor. The `Transforms` module provides various methods to manipulate the editor's content.
const { Editor, Transforms } = require('slate');
const editor = new Editor();
Transforms.insertText(editor, 'Hello, Slate!');
console.log(editor.children);Custom Elements and Marks
This code shows how to define custom elements and marks. In this example, a custom text node with a bold mark is created and added to the editor's content.
const { Editor, Text } = require('slate');
const editor = new Editor();
const customText = { text: 'Custom Text', bold: true };
editor.children = [{ type: 'paragraph', children: [customText] }];
console.log(editor.children);Plugins
This code demonstrates how to extend the editor's functionality using plugins. The `withCustomPlugin` function wraps the editor and overrides the `insertText` method to add custom behavior.
const { Editor } = require('slate');
const withCustomPlugin = editor => {
const { insertText } = editor;
editor.insertText = text => {
console.log('Inserting text:', text);
insertText(text);
};
return editor;
};
const editor = withCustomPlugin(new Editor());
editor.insertText('Hello, Plugins!');Draft.js is a framework for building rich text editors in React. It provides a set of immutable models and React components to create complex text editing experiences. Compared to Slate, Draft.js is more opinionated and less flexible but offers a more straightforward API for common use cases.
ProseMirror is a toolkit for building rich text editors with a focus on extensibility and performance. It provides a highly customizable and modular architecture, similar to Slate, but with a steeper learning curve. ProseMirror is known for its fine-grained control over document structure and editing behavior.
Quill is a modern WYSIWYG editor built for compatibility and extensibility. It offers a simple API and a rich set of features out of the box, making it easy to get started. Compared to Slate, Quill is less customizable but provides a more polished and user-friendly experience for basic text editing needs.
A completely customizable framework
for building rich text editors.
Why? · Principles · Demo · Examples · Plugins · Documentation · Contributing!
Slate lets you build rich, intuitive editors like those in Medium, Dropbox Paper or Canvas—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 and Immutable. It was inspired by libraries like Draft.js, Prosemirror and Quill.
Slate is currently in beta. It's useable now, but you might need to pull request a fix or two for advanced use cases.
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. What I found was that while getting simple examples to work might be possible, once you start trying to build something like Medium, Dropbox Paper or Canvas, you have to resort to very hacky things to get the user experience you want. And some experiences are just impossible. On the way, your codebase becomes harder and harder to maintain.
Here's how Slate compares to some of the existing editors out there:
Draft.js — Slate borrowed a few concepts from Draft.js, namely its event system, its use of Immutable.js and React, and its goal of being a "framework" for creating editors. It also borrowed its plugin-centric design from the Draft.js Plugins project. But the issues I ran into while using Draft.js were: that lots of the logic around the schema is hardcoded in "core" and difficult to customize, that the transform API is complex to use and not suited to collaborative editing in the future, that serialization isn't considered by the core library in a nice way, that the flat document model made certain behaviors impossible, and that lots of the API feels very heavy to work with.
Prosemirror — Slate borrowed a few concepts from Prosemirror, namely its nested document tree, and its transform model. But the issues I ran into while using it were: that the API is hard to understand, that the codebase wasn't structured around common node module practices, that lots of magic was built into the core library that was hard to customize, that toolbars and buttons are too tied to the editor itself, and that the documentation isn't great. (It's still in beta though!)
Quill — I never used Quill directly, so my hesitations about it are solely from considering it in early stages. The issues I see with it are: that the concept of "toolbars" is too coupled with the editor itself, that the configuration is too coupled to HTML classes and DOM nodes, that the idea of "formats" and "toolbars" being linked is limiting, and generally that too much "core" logic is given special privileges and is hard to customize.
Trix — I never used Trix directly either, so my issues with it are solely from considering it in early stages. The issues I found with it are: that it aims to be simple by limiting functionality instead of by limiting its own scope, that many behaviors are just impossible to implement with it, that it's too coupled to the DOM, and that the flat document model is limiting.
Of course those are my own opinions, but if you've tried using any of those libraries you might have run into similar problems. Which brings me to how Slate solves all of that...
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—the core editor logic is even implemented as its own plugin. That means you can completely customize the editing experience, to build complex editors like Medium's or Canvas's without having to fight against the library's assumptions.
Schema-less core. Slate's core logic doesn't assume anything 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 basic usage.
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.
Stateless and immutable data. By using React and Immutable.js, the Slate editor is built in a stateless fashion using immutable data structures, which leads to much easier to reason about code, and a much easier time writing plugins.
Intuitive transforms. Slate's content is edited using "transforms", that are designed to be extremely intuitive to use, so that writing plugins and custom functionality is as simple as possible.
Collaboration-ready data model. The data model Slate uses—specifically how transforms 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. (More work is required on this!)
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.
Check out the live demo of all of the examples!
To get a sense for how you might use Slate, check out a few of the examples:
<textarea>.If you have an idea for an example that shows a common use case, pull request it!
Slate encourages you to write small, reusable modules. Check out the public ones you can use in your project!
slate-auto-replace-text auto-replaces a string of text when typed. Useful for "smart" typography!slate-collapse-on-escape simply collapses the selection when escape is pressed.slate-paste-linkify wraps the selected text in a link when a URL is pasted from the clipboard.slate-soft-break adds a soft break when enter is pressed.If you're using Slate for the first time, check out the Getting Started guides and the Core Concepts to familiarize yourself with Slate's architecture and mental models. Once you've gotten familiar with those, you'll probably want to check out the full API Reference.
If even that's not enough, you can always read the source itself, which is explained along with a handful of readme's.
All contributions are super welcome! Check out the Contributing instructions for more info!
Slate is MIT-licensed.
FAQs
A completely customizable framework for building rich text editors.
We found that slate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 5 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.