Create a Slate Rich Text Editor in React

So far we have seen many Editor Frameworks and their usage guides. Slatejs is a good alternative for Draft-js and it is in beta mode for a long time.

Let’s quickly setup a React project and install the slate dependencies.

npx create-react-app myapp
yarn add slate slate-react

Make sure all the dependencies and peer dependencies properly added.

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

const SlateEditor = () => {
  const editor = useMemo(() => withReact(createEditor()), []);
  const initialValue = [
    {
      type: "paragraph",
      children: [{ text: "A line of text in a paragraph." }]
    }
  ];
  const [value, setValue] = useState(initialValue);

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

export default SlateEditor;

Open the example in Sandbox.

• Create Quill RichText editor using react-quill
• How to get HTML from Remirror editor in Reactjs
• How to get state as JSON from Remirror editor in Reactjs
• Create a TinyMCE Rich Text Editor in React
• Create a Slate Rich Text Editor in React
• Create a Material-UI Rich Text Editor in React
• Create a RichText editor using Quilljs
• Create minimal editor with Tiptap in React
• Create a Social Editor using Remirror toolkit in React
• Create a RichText Editor using Remirror toolkit in React