Saving to a Database

now that you've learned the basics of how to add functionality to the slate editor, you might be wondering how you'd go about saving the content you've been editing, such that you can come back to your app later and have it load in this guide, we'll show you how to add logic to save your slate content to a database for storage and retrieval later let's start with a basic editor const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue}> \<editable /> \</slate> ) } that will render a basic slate editor on your page, and when you type things will change but if you refresh the page, everything will be reverted back to its original value—nothing saves! what we need to do is save the changes you make somewhere for this example, we'll just be using local storage https //developer mozilla org/en us/docs/web/api/window/localstorage , but it will give you an idea for where you'd need to add your own database hooks so, in our onchange handler, we need to save the value if anything besides the selection was changed const initialvalue = \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) return ( \<slate editor={editor} value={initialvalue} onchange={value => { const isastchange = editor operations some( op => 'set selection' !== op type ) if (isastchange) { // save the value to local storage const content = json stringify(value) localstorage setitem('content', content) } }} \> \<editable /> \</slate> ) } now whenever you edit the page, if you look in local storage, you should see the content value changing but if you refresh the page, everything is still reset that's because we need to make sure the initial value is pulled from that same local storage location, like so const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) // update the initial content to be pulled from local storage if it exists const initialvalue = usememo( json parse(localstorage getitem('content')) || \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ], \[] ) return ( \<slate editor={editor} value={initialvalue} onchange={value => { const isastchange = editor operations some( op => 'set selection' !== op type ) if (isastchange) { // save the value to local storage const content = json stringify(value) localstorage setitem('content', content) } }} \> \<editable /> \</slate> ) } now you should be able to save changes across refreshes! success—you've got json in your database but what if you want something other than json? well, you'd need to serialize your value differently for example, if you want to save your content as plain text instead of json, we can write some logic to serialize and deserialize plain text values // import the `node` helper interface from slate import { node } from 'slate' // define a serializing function that takes a value and returns a string const serialize = value => { return ( value // return the string content of each paragraph in the value's children map(n => node string(n)) // join them all with line breaks denoting paragraphs join('\n') ) } // define a deserializing function that takes a string and returns a value const deserialize = string => { // return a value array of children derived by splitting the string return string split('\n') map(line => { return { children \[{ text line }], } }) } const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) // use our deserializing function to read the data from local storage const initialvalue = usememo( deserialize(localstorage getitem('content')) || '', \[] ) return ( \<slate editor={editor} value={initialvalue} onchange={value => { const isastchange = editor operations some( op => 'set selection' !== op type ) if (isastchange) { // serialize the value and save the string value to local storage localstorage setitem('content', serialize(value)) } }} \> \<editable /> \</slate> ) } that works! now you're working with plain text you can emulate this strategy for any format you like you can serialize to html, to markdown, or even to your own custom json format that is tailored to your use case 🤖 note that even though you can serialize your content however you like, there are tradeoffs the serialization process has a cost itself, and certain formats may be harder to work with than others in general we recommend writing your own format only if your use case has a specific need for it otherwise, you're often better leaving the data in the format slate uses if you want to update the editor's content in response to events from outside of slate, you need to change the children property directly the simplest way is to replace the value of editor children editor children = newvalue and trigger a re rendering (e g by calling editor onchange() in the example above) alternatively, you can use slate's internal operations to transform the value, for example / resetnodes resets the value of the editor it should be noted that passing the `at` parameter may cause a "cannot resolve a dom point from slate point" error / resetnodes\<t extends node>( editor editor, options { nodes? node | node\[], at? location } = {} ) void { const children = \[ editor children] children foreach((node) => editor apply({ type 'remove node', path \[0], node })) if (options nodes) { const nodes = node isnode(options nodes) ? \[options nodes] options nodes nodes foreach((node, i) => editor apply({ type 'insert node', path \[i], node node })) } const point = options at && point ispoint(options at) ? options at editor end(editor, \[]) if (point) { transforms select(editor, point) } }