Saving to a Database

import { useState } from "react";
import { defineStateField, valueCodecs } from "@platejs/plite";
import { Editable, Plite, usePliteEditor } from "@platejs/plite-react";
 
const STORAGE_KEY = "plite.document";
 
const documentTitle = defineStateField({
  key: "document.title",
  initial: () => "Untitled",
  persist: valueCodecs.string,
});
 
const fallbackValue = {
  children: [
    {
      type: "paragraph",
      children: [{ text: "A line of text in a paragraph." }],
    },
  ],
  meta: {
    [documentTitle.key]: documentTitle.serialize("Untitled"),
  },
};
 
const App = () => {
  const [initialValue] = useState(() => {
    const saved = localStorage.getItem(STORAGE_KEY);
 
    return saved ? JSON.parse(saved) : fallbackValue;
  });
  const editor = usePliteEditor({
    extensions: [documentTitle],
    initialValue,
  });
 
  return (
    <Plite
      editor={editor}
      onCommit={({ commit, editor }) => {
        if (
          !commit.changed.has("document") &&
          commit.dirtyStateKeys.length === 0
        ) {
          return;
        }
 
        localStorage.setItem(
          STORAGE_KEY,
          JSON.stringify(editor.read.value())
        );
      }}
    >
      <Editable />
    </Plite>
  );
};Copy

editor.read.value() returns the persisted document value:

That shape includes the primary document, every extra root, and persistent meta from state fields. Fields without a persist codec stay local to the runtime.

Single-Root Shortcut

The value in <Plite onValueChange> is the mounted root's block array. Save it directly for a tiny single-root editor with no persistent meta fields.

Use the full document value once the editor owns extra roots, content roots, or state fields.

Load Extra Roots

Pass initialValue.children plus initialValue.roots when the saved document owns extra roots.

Render each root with Editable root.

See Roots for content roots and root rendering.

Replace Saved Content

Create a new editor with initialValue: nextDocument when the user switches to a different saved document. That is the clean path for arbitrary persisted state fields.

Use editor.update.value.replace for an in-place full-document replacement.

The input is complete. Omitted named roots are removed, omitted persistent fields return to their declared initial values, and supplied metadata is decoded through each field's value codec. Pass selection: "start" or selection: "end" to place the cursor at a document edge. Use tx.roots or tx.setField only for a targeted partial change.

Store Comments Separately

Comment bodies, permissions, resolved state, and audit events belong to your app or collaboration service. The Plite document can store lightweight ids when comments need to travel with copied content, but the thread data should stay in the comment store.

Use Annotations to render comment anchors from that external store.

Persistence uses editor.read.value() for the whole document. Use value from onValueChange only for single-root shortcuts, and keep external app data outside the Plite document unless it is part of the document model.