Getting Started

The rich text editor we will build

We’ll need the following for this project:

Text editor, any will do, feel free to choose.

Node.js installed with npm/Yarn.

Basic JavaScript knowledge. If you’re learning the ropes — this list for learning JavaScript might be useful to you.

Let’s go!

Fire up your terminal and create a new React project with create-react-app.

npx create-react-app slate-react-rich-text-editor cd slate-react-rich-text-editor npm start

Booting up our React app

Slate exposes a set of modules that you’ll use to build your editor. The most important one is the Editor component. The Editor component is the fundamental layer everything will be built upon. Think of it as the root component for the whole editor.

Starting off, we will create a folder components . Inside the components directory, we’ll create two files called index.js and TextEditor.js .

If we open the browser, this is what we should see.

No problem! The Editor component expects an initial value — as you can see in the source code.

See the last propType — it’s set to isRequired

Let’s add our initial value to the editor. We’ll dive into the exact model of the data later, once we have a basic understanding of how Slate works.

We should end up with My first paragraph! rendered on our app.

A paragraph being rendered

At first, the text looks like a simple <p> paragraph. But if we inspect the element, there’s an ocean of complexity abstracted away from us.

Try clicking on the text. What do you see?

Editable text — notice the complex hierarchy of DOM elements. This is all abstracted away from us under the hood and we can focus on building our “product”.

The text is editable! In case you don’t have the React developer tools, here’s a link to the Chrome app store.

Remember that we added an onChange event listener to our Editor component.

The onChange event listener is listening for keyboard events. After catching a keystroke. We update the current state with the new keystroke. Dispatch the new state. Render a new state on the screen.

However, the editor is not very useful to us yet. We’re missing key features, like formatting, saving our text somewhere, and many more.