YjsTiptapReactText editors

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.

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} />;}

Note that we’re assuming your Tiptap application is set up as recommended in our getting started guide.

Related guides