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 app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => setvalue(value)}> \<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 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 const app = () => { const editor = usememo(() => withreact(createeditor()), \[]) const \[value, setvalue] = usestate(\[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ]) return ( \<slate editor={editor} value={value} onchange={value => { setvalue(value) // 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 \[value, setvalue] = usestate( json parse(localstorage getitem('content')) || \[ { type 'paragraph', children \[{ text 'a line of text in a paragraph ' }], }, ] ) return ( \<slate editor={editor} value={value} onchange={value => { setvalue(value) 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 \[value, setvalue] = usestate( deserialize(localstorage getitem('content')) || '' ) return ( \<slate editor={editor} value={value} onchange={value => { setvalue(value) // 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