ExamplesExtensionsIn-Memory Versioning

In-Memory Versioning

This example shows how to use the VersioningExtension without any collaboration layer (no Yjs required). Snapshots are stored in memory using ProseMirror JSON.

Try it out: Edit the document, then click the "Version History" button to open the sidebar. From there you can save snapshots, preview older versions, rename them, and restore them.

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";import {  VersioningExtension,  createInMemoryVersioningAdapter,} from "@blocknote/core/extensions";import {  BlockNoteViewEditor,  useCreateBlockNote,  useExtension,  useExtensionState,} from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { useState } from "react";import { RiHistoryLine } from "react-icons/ri";import { VersionHistorySidebar } from "./VersionHistorySidebar";import "./style.css";export default function App() {  // `createInMemoryVersioningAdapter` is passed as a factory function. The  // VersioningExtension will call it with the editor instance once it's ready.  const editor = useCreateBlockNote({    initialContent: [      {        type: "heading",        content: "In-Memory Versioning Example",        props: { level: 2 },      },      {        type: "paragraph",        content:          "This example demonstrates versioning without any collaboration layer. " +          "Snapshots are stored in memory using ProseMirror JSON — no Yjs required.",      },      {        type: "paragraph",        content:          "Try editing this document, then open the Version History sidebar to " +          "save snapshots. You can preview and restore older versions.",      },    ],    extensions: [VersioningExtension(createInMemoryVersioningAdapter)],  });  const { exitPreview } = useExtension(VersioningExtension, { editor });  const { previewedSnapshotId } = useExtensionState(VersioningExtension, {    editor,  });  const [sidebar, setSidebar] = useState<"versionHistory" | "none">("none");  return (    <div className="versioning-example">      <BlockNoteView        editor={editor}        editable={          sidebar !== "versionHistory" || previewedSnapshotId === undefined        }        renderEditor={false}      >        <div className="main-container">          <div className={"editor-layout-wrapper"}>            <div className="sidebar-selectors">              <div                className={`sidebar-selector ${sidebar === "versionHistory" ? "selected" : ""}`}                onClick={() => {                  setSidebar((s) =>                    s !== "versionHistory" ? "versionHistory" : "none",                  );                  exitPreview();                }}              >                <RiHistoryLine />                <span>Version History</span>              </div>            </div>            <div className={"editor-section"}>              <BlockNoteViewEditor />            </div>          </div>          {sidebar === "versionHistory" && <VersionHistorySidebar />}        </div>      </BlockNoteView>    </div>  );}