Sign in
GuidesYjs, Tiptap, React

Setting an initial or default value in Tiptap

Yjs doesn’t allow you to set an initial value for a document, as documents are stored as a list of changes, rather than as the current state. If you were to try add a default value, this would instead be sent as an append command, meaning that it would be added to any existing data in the document, instead of working as a default value.

This guide is for Yjs, not Text Editor

If you’re using our Text Editor Tiptap product, there’s an option to set the initial value, and you should use this method. This guide is only Sync Datastore and Yjs.

Setting content in Tiptap

Tiptap allows you to set a default value by setting content in useEditor, however when connected to Yjs this will trigger the duplication problem.

function Editor({ doc, provider }: EditorProps) {  const editor = useEditor({    content: "<p>This will duplicate on load</p>",
    // Options    // ...  });
  return <EditorContent editor={editor} />;}

Default value with Yjs

To avoid this problem, you can instead wait for Liveblocks Yjs to connect, check if the editor’s content is empty, and then set a default value.

function Editor({ doc, provider }: EditorProps) {  const editor = useEditor({    // Options    // ...  });
  // Set default state  useEffect(() => {    function setDefault() {      if (!editor) {        return;      }
      if (editor.getText() === "") {        editor.commands.setContent(`          <h1>Default content</h1>          <p>            My <strong>paragraph</strong>          </p>        `);      }    }
    setDefault();    provider.on("sync", setDefault);    return () => provider.off("sync", setDefault);  }, [provider, editor]);
  return <EditorContent editor={editor} />;}

Related guides