Installing Slate

slate is a monorepo divided up into multiple npm packages, so to install it you do yarn add slate slate react you'll also need to be sure to install slate's peer dependencies yarn add react react dom note, if you'd rather use a pre bundled version of slate, you can yarn add slate and retrieve the bundled dist/slate js file! check out the using the bundled source docid 39acbujazino1askswekc guide for more information once you've installed slate, you'll need to import it // import react dependencies import react, { usestate } from 'react' // import the slate editor factory import { createeditor } from 'slate' // import the slate components and react plugin import { slate, editable, withreact } from 'slate react' before we use those imports, let's start with an empty \<app> component // define our app const app = () => { return null } the next step is to create a new editor object we want the editor to be stable across renders, so we use the usestate hook without a setter https //github com/ianstormtaylor/slate/pull/3925#issuecomment 781179930 const app = () => { // create a slate editor object that won't change across renders const \[editor] = usestate(() => withreact(createeditor())) return null } of course we haven't rendered anything, so you won't see any changes if you are using typescript, you will also need to extend the editor with reacteditor and add annotations as per the documentation on typescript docid 3xfi6klmuehfaalizteul the example below also includes the custom types required for the rest of this example // typescript users only add this code import { baseeditor, descendant } from 'slate' import { reacteditor } from 'slate react' type customelement = { type 'paragraph'; children customtext\[] } type customtext = { text string } declare module 'slate' { interface customtypes { editor baseeditor & reacteditor element customelement text customtext } } next up is to render a \<slate> context provider the provider component keeps track of your slate editor, its plugins, its value, its selection, and any changes that occur it must be rendered above any \<editable> components but it can also provide the editor state to other components like toolbars, menus, etc using the useslate hook const initialvalue = \[] const app = () => { const \[editor] = usestate(() => withreact(createeditor())) // render the slate context return \<slate editor={editor} value={initialvalue} /> } you can think of the \<slate> component as providing a context to every component underneath it slate provider's "value" prop is only used as initial state for editor children if your code relies on replacing editor children you should do so by replacing it directly instead of relying on the "value" prop to do this for you see slate pr 4540 https //github com/ianstormtaylor/slate/pull/4540 for a more in depth discussion this is a slightly different mental model than things like \<input> or \<textarea> , because richtext documents are more complex you'll often want to include toolbars, or live previews, or other complex components next to your editable content by having a shared context, those other components can execute commands, query the editor's state, etc okay, so the next step is to render the \<editable> component itself const initialvalue = \[] const app = () => { const \[editor] = usestate(() => withreact(createeditor())) return ( // add the editable component inside the context \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } the \<editable> component acts like contenteditable anywhere you render it will render an editable richtext document for the nearest editor context there's only one last step so far we've been using an empty \[] array as the initial value of the editor, so it has no content let's fix that by defining an initial value the value is just plain json here's one containing a single paragraph block with some text in it // add the initial value const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const \[editor] = usestate(() => withreact(createeditor()) return ( \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } there you have it! that's the most basic example of slate if you render that onto the page, you should see a paragraph with the text a line of text in a paragraph and when you type, you should see the text change!