Draft.js, Editor.js, Slate.js: Choosing the Best Text Editor for Your React Project

If your React project requires rich text editing functionality, there are a number of libraries to consider. In this session we'll look at the features of some of the key players so that you can help judge which is the best fit for your requirements.

This talk has been presented at React Summit Remote Edition 2021, check out the latest edition of this React Conference.

FAQ

Draft.js supports block styles, inline styles, undo and redo, paste support, and lists. It also supports nested lists to a depth of five, media like images and YouTube, and links, but it does not support tables.

Draft.js is funded and supported by Facebook, and its release cycle follows semantic versioning. The current version mentioned is 0.11.7.

Editor.js offers a block-based data model where everything is a block with a type and data. It supports tables via a beta plugin and has a rich set of features that can be extended through additional plugins. The supporting company behind Editor.js is Codex.

Slate.js was designed with collaboration as a first-class feature, making it ideal for projects like Google Docs where collaborative editing is crucial. It allows for nested structures and extensive customization.

Draft.js and Slate.js are both released under the MIT license, offering broad permissions with limited restrictions. Editor.js is licensed under the Apache 2.0 license, which also provides liberal terms with some requirements to mention modifications.

The choice depends on your project needs: Draft.js is backed by Facebook and is suitable for basic functionalities with custom coding. Editor.js offers rich features out-of-the-box and is quick to set up. Slate.js allows for ultimate control and customization, ideal for complex requirements including nesting and collaboration.

Draft.js uses a JSON structure with blocks that contain keys, types, and text. Editor.js also uses a JSON format where everything is treated as a block. Slate.js's structure involves nodes and children, with the lowest level being a text node, supporting more complex nested structures.

Lee Rowlands

8 min

14 May, 2021

Comments

Video Summary and Transcription

Welcome to my session on DraftJS, EditJS, and SlideJS. We will discuss their strengths and data model, focusing on React's component and prop model. We will evaluate the editors based on their sustainability, funding, support, maturity, license, editor features, release cycle, data structure, ecosystem, browser support, usage, and GitHub stars. The first editor we'll discuss is Draft.js, which is used by Facebook Messenger, comments, status posts, and the Facebook Notes app. It's funded and supported by Facebook, has a version of 0.11.7, and requires custom code for additional features. The license is MIT. It's a bare metal, in terms of features. The release cycle is semantic version. The data structure is JSON. It's used by 83,000 packages and has 20,000 stars. The data model is made up of blocks with text and entities. It supports various editor features including block styles, inline styles, undo/redo, paste, lists, nested lists, media, and links. Editor.js is a block-based editor written in vanilla JavaScript. It has a 2.19 release, Apache 2.0 license, and a semver release cycle. The data structure is JSON, and there are numerous plugins available. It has 1,500 packages using it and 15,000 stars. The editor features include block styles, inline styles, undo/redo, paste, lists, nested blocks, media, and links.

Available in Español: Draft.js, Editor.js, Slate.js: Eligiendo el mejor editor de texto para tu proyecto React

1. Introduction to DraftJS, EditJS, and SlideJS

Short description:

Welcome to my session on DraftJS, EditJS, and SlideJS. We will discuss their strengths and data model, focusing on React's component and prop model.

Hi, welcome to my session on DraftJS, EditJS, and SlideJS. Choosing the best text editor for your React project.

Just a quick overview, this is a lightning talk, so I'm going to introduce you to three discussions, discuss their strengths, and we'll have a look at their data model.

So as you probably guessed from the intro, the editors are DraftJS, EditJS, and SlideJS. We chose these three because they're primarily well suited to React's component and prop model, as opposed to traditional WYSIWYG editors like CKEditor and TinyMCE, which are more focused on giving your HTML as your output.

2. Evaluation Criteria and Draft.js Overview

Short description:

We will evaluate the editors based on their sustainability, funding, support, maturity, license, editor features, release cycle, data structure, ecosystem, browser support, usage, and GitHub stars. The editor features we'll look at include block styles, inline styles, undo/redo support, paste support, lists, nested blocks, media, tables, and links. The first editor we'll discuss is Draft.js, which is used by Facebook Messenger, comments, status posts, and the Facebook Notes app. It's funded and supported by Facebook, has a version of 0.11.7, and requires custom code for additional features.

The criteria we're going to evaluate these editors against is their sustainability. So who's funding them, who's supporting them. Maturity. The license. The editor features. The release cycle. Their data structure, so what the data looks like when it comes out. The ecosystem, are there plugins, are there other things you can do to extend the functionality. Browser support. Who it's used by or how many packages are using it, and the number of GitHub stars.

So the editor features that we're going to look at are whether you can do block styles, so H1, H2, block quote. Inline styles like bold and italic. Undo and redo support. Paste support. Whether it supports lists. Nested blocks. Media, such as images, YouTube etc. Tables. Links. So you need to have both the link text and the URI.

So the first we're going to look at is Draft.js. This is used by Facebook Messenger. It's used in their comments, functionality, status posts and the Facebook Notes app. So it's being used in production on a fairly large scale. It has a lot of features but that will require custom code. This isn't CK editor, you do have to roll all this yourself. But you get the things you do want and not the things you don't. So looking at those criteria. It's funded and supported by Facebook. It's a 0.11.7, which is odd, you think it would be a 1.0, given that it's being used in production.

3. Draft.js Features and Data Model

Short description:

The license is MIT. It's a bare metal, in terms of features. The release cycle is semantic version. The data structure is JSON. It's used by 83,000 packages and has 20,000 stars. The data model is made up of blocks with text and entities. It supports various editor features including block styles, inline styles, undo/redo, paste, lists, nested lists, media, and links.

The license is MIT. It's a bare metal, in terms of features. So most of the functionality you're going to have to build yourself, but there's good examples.

The release cycle is semantic version. The data structure is JSON and we'll show you what that looks like in a minute. In terms of the ecosystem, there's a full editor available if you install some extension projects. Browser support, it doesn't support IE 11 and there are some issues with mobile browsers such as iOS, Safari and Chrome Android. It's used by 83,000 packages and has 20,000 stars.

Looking at the data model, it's made up of a series of blocks and so we can see these blocks each have a key and each of those has some text that goes in it and a type. And then within these blocks there can be a range of entities. So this is for things like images or mentions or links. Each one of these has a type, they have immutability which is outside the scope of this talk and they can have data for your props. In terms of editor features it supports block styles, inline styles, undo, redo and paste. Supports lists, it supports nested lists only so no other blocks can be nested, just lists and that's only to a depth of five. It supports media, it doesn't support tables and it supports links.

4. Editor.js Overview

Short description:

Editor.js is a block-based editor written in vanilla JavaScript. It has a 2.19 release, Apache 2.0 license, and a semver release cycle. The data structure is JSON, and there are numerous plugins available. It has 1,500 packages using it and 15,000 stars. The editor features include block styles, inline styles, undo/redo, paste, lists, nested blocks, media, and links.

The next editor is Editor.js. Editor.js powers a few organisations, mostly in Eastern Europe. It's written in vanilla JavaScript but there are React bridges. The supporting company behind this is Codex, it seems to be an agency of their own. It has a 2.19 release. The license is Apache 2.0. It's a block-based editor in terms of features so everything is considered to be a block. Release cycle is semver. Data structure, again JSON. There are a lot of plugins for this so unlike Draft.js where you have to write a lot yourself. Mostly it consists of adding extra plugins here. It has 1.5, 1,500 packages using it and 15,000 stars. So the data structure here, as I said, everything is a block. So a block has a type and then it has data which is kind of the prompts inside that. This could be, for example, in terms of a list item. This would show you the items that were inside that list. So in terms of content editor features, you get block styles, inline styles, undo redo, paste, lists, nested blocks, media. Tables is available but it's via a beta plugin and links. So before sets there and you just have to work out whether you're happy with the beta.