PDF Export

It's possible to export BlockNote documents to PDF, completely client-side. The exporter is powered by the Typst typesetting engine (compiled to WebAssembly) and produces accessible, tagged documents; see PDF/UA conformance.

This feature is provided by the @blocknote/xl-pdf-exporter. xl- packages are fully open source, but released under a copyleft license. A commercial license for usage in closed source, proprietary products comes as part of the Business subscription.

First, install the @blocknote/xl-pdf-exporter package:

npm install @blocknote/xl-pdf-exporter

Then, create an instance of the PDFExporter class and export the document:

import {
  PDFExporter,
  typstDefaultSchemaMappings,
} from "@blocknote/xl-pdf-exporter";

// Create the exporter
const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings);

// Export the document; the result carries the PDF as bytes and as a Blob
const result = await exporter.toPDF(editor.document, {
  title: "My document",
  lang: "en",
});
if (!result.error) {
  const url = URL.createObjectURL(result.blob);
  // e.g. open or download `url`
}

This works out of the box, fully offline: exports match the editor's look, and everything needed (the default fonts and the compiler itself) ships inside the package. Nothing is fetched from a CDN.

See the full example with a live PDF preview below:

GitHub

StackBlitz

import { testDocumentBlocks } from "./testDocumentBlocks";import {  Block,  BlockNoteSchema,  combineByGroup,  withPageBreak,} from "@blocknote/core";import { filterSuggestionItems } from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import * as locales from "@blocknote/core/locales";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";import { diagramBlockMapping } from "@blocknote/diagram-block/typst-exporter";import {  createReactInlineMathSpec,  createReactMathBlockSpec,} from "@blocknote/math-block";import {  inlineMathMapping,  mathBlockMapping,} from "@blocknote/math-block/typst-exporter";import {  SuggestionMenuController,  getDefaultReactSlashMenuItems,  getPageBreakReactSlashMenuItems,  useCreateBlockNote,} from "@blocknote/react";import {  PDFExporter,  typstDefaultSchemaMappings,} from "@blocknote/xl-pdf-exporter";import {  getMultiColumnSlashMenuItems,  locales as multiColumnLocales,  multiColumnDropCursor,  withMultiColumn,} from "@blocknote/xl-multi-column";// Bundle the Typst compiler wasm explicitly (it would otherwise load from// the package's own files - also CDN-free - but an explicit URL keeps the// bundling visible in this example).// Fonts need no setup: the exporter's bundled defaults (Inter, Geist Mono,// math, emoji - matching the editor) load lazily from the package.import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url";import { useCallback, useEffect, useMemo, useRef, useState } from "react";import "./styles.css";/** * Exports the given document to a PDF/UA object URL, re-exporting whenever * `blocks` changes. * * The effect-with-cleanup idiom keeps only the newest result: when a newer * version (or unmount) invalidates the effect, the cleanup marks the running * export stale and its result is dropped. Overlapping exports are *safe* - * the exporter serializes its shared compile stage internally - but like any * async calls they may complete out of call order, and which result to * display is this component's concern, not the exporter's. */function usePdfUA(  makeExporter: () => PDFExporter<any, any, any>,  blocks: Block<any, any, any>[],) {  const [pdfUrl, setPdfUrl] = useState<string>();  const [status, setStatus] = useState<"loading" | "ready" | "error">(    "loading",  );  useEffect(() => {    let stale = false;    setStatus("loading");    void (async () => {      try {        const result = await makeExporter().toPDF(blocks, {          title: "BlockNote document",          lang: "en",        });        if (stale) {          return;        }        // A document that fails to compile (e.g. text no supplied font        // covers) is an expected outcome, reported in the result.        if (result.error) {          // eslint-disable-next-line no-console          console.error(            "PDF export failed:",            result.compileErrors.map((d) => d.message).join("; "),          );          setStatus("error");          return;        }        // A nonconforming document (e.g. one not starting with an H1) still        // exports - tagged but without the PDF/UA-1 claim; surface why.        if (!result.pdfUA.declared && result.pdfUA.reason === "nonconforming") {          // eslint-disable-next-line no-console          console.info(            "Exported without PDF/UA-1 declaration:",            result.pdfUA.violations.map((v) => v.message).join("; "),          );        }        setPdfUrl(URL.createObjectURL(result.blob));        setStatus("ready");      } catch (e) {        if (stale) {          return;        }        // eslint-disable-next-line no-console        console.error(e);        setStatus("error");      }    })();    return () => {      stale = true;    };  }, [makeExporter, blocks]);  // Each object URL is revoked when replaced by the next one (and the last  // one on unmount).  useEffect(() => {    return () => {      if (pdfUrl) {        URL.revokeObjectURL(pdfUrl);      }    };  }, [pdfUrl]);  return { pdfUrl, status };}export default function App() {  // Creates a new editor instance with support for page breaks.  const editor = useCreateBlockNote({    // Adds support for math & diagram blocks.    schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({      blockSpecs: {        mathBlock: createReactMathBlockSpec(),        diagram: createReactDiagramBlockSpec(),      },      inlineContentSpecs: {        math: createReactInlineMathSpec(),      },    }),    dropCursor: multiColumnDropCursor,    dictionary: {      ...locales.en,      multi_column: multiColumnLocales.en,    },    tables: {      splitCells: true,      cellBackgroundColor: true,      cellTextColor: true,      headers: true,    },    initialContent: [      ...testDocumentBlocks,      // The math & diagram blocks aren't part of the shared test document,      // since the exporter unit tests' schemas don't register them, so they're      // appended here instead.      {        type: "mathBlock",        content: "a^2 = \\sqrt{b^2 + c^2}",      },      {        type: "diagram",        content: `graph TD  A[Start] --> B{Works?}  B -->|Yes| C[Ship it]  B -->|No| A`,      },      {        type: "paragraph",        content: [          {            type: "text",            text: "Inline math: ",            styles: {},          },          {            type: "math",            content: "e^{i\\pi} + 1 = 0",          },        ],      },    ],  });  // Additional Slash Menu items for page breaks.  const getSlashMenuItems = useMemo(    () => async (query: string) =>      filterSuggestionItems(        combineByGroup(          getDefaultReactSlashMenuItems(editor),          getPageBreakReactSlashMenuItems(editor),          getMultiColumnSlashMenuItems(editor),        ),        query,      ),    [editor],  );  // A fresh exporter per export: its asset registry is append-only for the  // exporter's lifetime, so reusing one across re-exports would accumulate  // every image/diagram variant it has ever rendered.  const makeExporter = useCallback(    () =>      new PDFExporter(        editor.schema,        {          ...typstDefaultSchemaMappings,          blockMapping: {            ...typstDefaultSchemaMappings.blockMapping,            // Renders math blocks as native Typst equations, and diagrams as            // embedded images - both carrying alt text for PDF/UA.            mathBlock: mathBlockMapping,            diagram: diagramBlockMapping,          },          inlineContentMapping: {            ...typstDefaultSchemaMappings.inlineContentMapping,            math: inlineMathMapping,          },        },        {          // The bundled compiler wasm (see the import above) - engine setup          // belongs to the exporter, per-document facts go to toPDF.          wasm: compilerWasmUrl,        },      ),    [editor],  );  // The document snapshot driving the export - the export effect depends on  // the data it exports. Updated debounced: reading `editor.document`  // converts the whole document to blocks, so it shouldn't run (and the  // export shouldn't restart) on every keystroke.  const [blocks, setBlocks] = useState(() => editor.document);  const { pdfUrl, status } = usePdfUA(makeExporter, blocks);  const debounceTimer = useRef<ReturnType<typeof setTimeout>>(undefined);  useEffect(() => () => clearTimeout(debounceTimer.current), []);  const onChange = () => {    clearTimeout(debounceTimer.current);    debounceTimer.current = setTimeout(() => setBlocks(editor.document), 600);  };  const onDownloadClick = () => {    if (!pdfUrl) {      return;    }    const link = document.createElement("a");    link.href = pdfUrl;    link.download = "blocknote (pdf-ua).pdf";    document.body.appendChild(link);    link.click();    link.remove();  };  const label =    status === "loading"      ? "Generating…"      : status === "error"        ? "Export failed (see console)"        : "✓ Tagged PDF/UA-1";  return (    <div className="views">      <div className="view-wrapper">        <div className="view-label">Editor Input</div>        <div className="view">          <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}>            <SuggestionMenuController              triggerCharacter={"/"}              getItems={getSlashMenuItems}            />          </BlockNoteView>        </div>      </div>      <div className="view-wrapper">        <div className="view-label">          {label}          <button            type="button"            className="view-label-download"            onClick={onDownloadClick}          >            Download          </button>        </div>        <div className="view">          {pdfUrl ? (            <iframe              title="PDF/UA output"              height="100%"              width="100%"              src={pdfUrl}            />          ) : null}        </div>      </div>    </div>  );}

.views {  container-name: views;  container-type: inline-size;  display: flex;  flex-direction: row;  flex-wrap: wrap;  gap: 8px;  height: 100%;  padding: 8px;}.view-wrapper {  display: flex;  flex-direction: column;  height: calc(50% - 4px);  width: 100%;}@container views (width > 1024px) {  .view-wrapper {    height: 100%;    width: calc(50% - 4px);  }}.view-label {  color: #0090ff;  display: flex;  font-size: 12px;  font-weight: bold;  justify-content: space-between;  margin-inline: 16px;}/* A real <button> (keyboard-focusable), restyled to match the label text. */.view-label-download {  background: none;  border: none;  color: inherit;  font: inherit;  padding: 0;  cursor: pointer;  text-decoration: underline;}.view {  border: solid #0090ff 1px;  border-radius: 16px;  flex: 1;  height: 0;  padding: 8px;}.view .bn-container {  height: 100%;  margin: 0;  max-width: none;  padding: 0;}.view .bn-editor {  height: 100%;  overflow: auto;}.view iframe {  border: none;  border-radius: 8px;}

// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY.// Generated from shared/testDocumentBlocks.ts — run `pnpm run gen` to update.import type { PartialBlock } from "@blocknote/core";/** * The shared example/test document, as partial blocks. * * This file is intentionally self-contained — it has only a type-only import * from `@blocknote/core` (no runtime imports) — so the example generator can * copy it verbatim into each exporter playground example and the examples stay * runnable on their own (e.g. opened directly in StackBlitz). * * It is the single source of truth for both the playground examples' editor * `initialContent` and the exporters' `testDocument` unit-test fixture. */export const testDocumentBlocks: PartialBlock<any, any, any>[] = [  {    type: "paragraph",    content: [      {        type: "text",        text: "Welcome to this ",        styles: {          italic: true,        },      },      {        type: "text",        text: "demo 🙌!",        styles: {          italic: true,          bold: true,        },      },    ],    children: [      {        type: "paragraph",        content: "Hello World nested",        children: [          {            type: "paragraph",            content: "Hello World double nested",          },        ],      },    ],  },  {    type: "paragraph",    content: [      {        type: "text",        text: "This paragraph has a background color",        styles: { bold: true },      },    ],    props: {      backgroundColor: "red",    },  },  {    type: "paragraph",    content: "Paragraph",  },  // An empty paragraph: a blank line in the editor, which exporters must  // preserve as vertical space rather than dropping the block.  {    type: "paragraph",  },  {    type: "heading",    content: "Heading",  },  {    type: "heading",    content: "Heading right",    props: {      textAlignment: "right",    },  },  {    type: "heading",    content: "Heading 2",    props: { level: 2 },  },  {    type: "heading",    content: "Heading 3",    props: { level: 3 },  },  {    type: "heading",    content: "Heading 4",    props: { level: 4 },  },  {    type: "heading",    content: "Heading 5",    props: { level: 5 },  },  {    type: "heading",    content: "Heading 6",    props: { level: 6 },  },  {    type: "paragraph",    content: "Emojis: 😀 🎉 🚀 👍 👍🏽 🌍 🚶‍♀️",  },  {    type: "paragraph",    content: "Centered paragraph",    props: {      textAlignment: "center",    },  },  {    type: "paragraph",    content:      "justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",    props: {      textAlignment: "justify",    },  },  { type: "pageBreak" },  {    type: "bulletListItem",    content:      "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",    children: [      {        type: "bulletListItem",        content:          "Bullet List Item.  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",      },      {        type: "bulletListItem",        content:          "Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",        props: {          textAlignment: "right",        },      },      {        type: "numberedListItem",        content: "Numbered List Item 1",      },      {        type: "numberedListItem",        content: "Numbered List Item 2",        children: [          {            type: "numberedListItem",            content: "Numbered List Item Nested 1",          },          {            type: "numberedListItem",            content: "Numbered List Item Nested 2",          },          {            type: "numberedListItem",            content: "Numbered List Item Nested funky right",            props: {              textAlignment: "right",              backgroundColor: "red",              textColor: "blue",            },          },          {            type: "numberedListItem",            content: "Numbered List Item Nested funky center",            props: {              textAlignment: "center",              backgroundColor: "red",              textColor: "blue",            },          },        ],      },    ],  },  {    type: "numberedListItem",    content: "Numbered List Item",  },  {    type: "checkListItem",    content: "Check List Item",  },  {    type: "checkListItem",    content: "Checked List Item",    props: {      checked: true,    },  },  {    type: "numberedListItem",    content: "Numbered List Item starting at 5",    props: {      start: 5,    },  },  {    type: "numberedListItem",    content: "Numbered List Item 6",  },  {    type: "toggleListItem",    content: "Toggle List Item",    children: [      {        type: "paragraph",        content: "Content nested inside the toggle list item.",      },      {        type: "bulletListItem",        content: "A nested bullet inside the toggle",      },    ],  },  {    type: "heading",    content: "Toggle Heading",    props: {      level: 2,      isToggleable: true,    },    children: [      {        type: "paragraph",        content: "Content nested inside the toggle heading.",      },    ],  },  {    type: "table",    content: {      type: "tableContent",      columnWidths: [200, undefined, undefined],      rows: [        {          cells: ["Wide Cell", "Table Cell", "Table Cell"],        },        {          cells: ["Wide Cell", "Table Cell", "Table Cell"],        },        {          cells: ["Wide Cell", "Table Cell", "Table Cell"],        },      ],    },  },  {    type: "file",  },  {    type: "image",    props: {      url: "https://placehold.co/332x322.jpg",      caption: "From https://placehold.co/332x322.jpg",    },  },  {    type: "image",    props: {      previewWidth: 200,      url: "https://placehold.co/332x322.jpg",      textAlignment: "right",    },  },  {    type: "video",    props: {      url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",      caption:        "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",    },  },  {    type: "audio",    props: {      url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",      caption:        "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3",    },  },  {    type: "paragraph",  },  {    type: "audio",    props: {      caption: "Audio file caption",      name: "audio.mp3",    },  },  {    type: "paragraph",    content: [      {        type: "text",        text: "Inline Content:",        styles: { bold: true },      },    ],  },  {    type: "paragraph",    content: [      {        type: "text",        text: "Styled Text",        styles: {          bold: true,          italic: true,          textColor: "red",          backgroundColor: "blue",        },      },      {        type: "text",        text: " ",        styles: {},      },      {        type: "text",        text: "underlined",        styles: { underline: true },      },      {        type: "text",        text: " ",        styles: {},      },      {        type: "text",        text: "strikethrough",        styles: { strike: true },      },      {        type: "text",        text: " ",        styles: {},      },      {        type: "link",        content: "Link",        href: "https://www.blocknotejs.org",      },    ],  },  {    type: "table",    content: {      type: "tableContent",      headerRows: 1,      rows: [        {          cells: ["Table Header 1", "Table Header 2", "Table Header 3"],        },        {          cells: [            "Table Cell 4",            [              {                type: "text",                text: "Table Cell Bold Colored 5",                styles: {                  bold: true,                  textColor: "red",                  backgroundColor: "blue",                },              },            ],            "Table Cell 6",          ],        },        {          cells: ["Table Cell 7", "Table Cell 8", "Table Cell 9"],        },      ],    },  },  // An "advanced" table: two header rows and merged cells (colspan /  // rowspan) - the features behind the editor's `splitCells` /  // `headers` table options, which exporters must place correctly.  {    type: "table",    content: {      type: "tableContent",      // Explicit widths for all three tracks: the merged first-row cell      // means the row alone doesn't reveal the column count.      columnWidths: [undefined, undefined, undefined],      headerRows: 2,      rows: [        {          cells: [            {              type: "tableCell",              content: "Merged Header",              props: { colspan: 2 },            },            { type: "tableCell", content: "Header C" },          ],        },        {          cells: ["Header A", "Header B", "Header C2"],        },        {          cells: [            {              type: "tableCell",              content: "Merged Rows",              props: { rowspan: 2 },            },            { type: "tableCell", content: "Cell B1" },            { type: "tableCell", content: "Cell C1" },          ],        },        {          cells: ["Cell B2", "Cell C2"],        },      ],    },  },  // A hard line break (shift+enter) inside one paragraph - a single block  // whose text spans two lines.  {    type: "paragraph",    content: "A hard line break\nwithin a single paragraph",  },  {    type: "codeBlock",    props: {      language: "javascript",    },    content: `const helloWorld = (message) => {  console.log("Hello World", message);};`,  },  {    type: "paragraph",    content: [      {        type: "text",        text: "Some inline code: ",        styles: { bold: true },      },      {        type: "text",        text: "var foo = 'bar';",        styles: { code: true },      },    ],  },  {    type: "columnList",    children: [      {        type: "column",        props: { width: 0.8 },        children: [          { type: "paragraph", content: "This paragraph is in a column!" },        ],      },      {        type: "column",        props: { width: 1.4 },        children: [{ type: "heading", content: "So is this heading!" }],      },      {        type: "column",        props: { width: 0.8 },        children: [          {            type: "paragraph",            content: "You can have multiple blocks in a column too",          },          { type: "bulletListItem", content: "Block 1" },          { type: "bulletListItem", content: "Block 2" },          { type: "bulletListItem", content: "Block 3" },        ],      },    ],  },  { type: "divider" },  {    type: "quote",    content: "All those moments will be lost in time, like tears in rain.",  },];

Customizing the PDF

toPDF takes per-export options: the document metadata and page setup.

const result = await exporter.toPDF(editor.document, {
  // Document title, shown in the viewer's title bar
  title: "My document",
  // Document author, written to the PDF metadata
  author: "John Doe",
  // BCP-47 language tag of the document's natural language
  lang: "en",
  // Typst paper name, e.g. "a4" (default) or "us-letter"
  paper: "a4",
  // Page margin as a Typst length
  margin: "48pt",
  // Raw Typst markup for the running page header / footer, e.g. a
  // page counter: "#context counter(page).display()"
  header: "My document",
  footer: "#context counter(page).display()",
});

The remaining export options are tryDeclarePdfUA, assets (extra files for caller-supplied header/footer markup), and creationTimestamp (a fixed Unix timestamp for byte-reproducible output).

A document that fails to compile (e.g. text in a script the loaded fonts don't cover) is reported in the result as { error: "compile-failed" } with the compiler's diagnostics, rather than thrown.

PDF/UA conformance

The produced PDF is always tagged: it carries a logical structure tree (headings, paragraphs, lists, tables, figures with alt text, links) that screen readers can navigate. On top of that, the exporter declares PDF/UA-1 conformance when, and only when, the document earns it: Typst validates conformance during the compile, and a nonconforming document is exported as tagged-but-unclaimed instead, with the violations reported in the result:

const result = await exporter.toPDF(editor.document, {
  title: "My document",
  lang: "en",
});
if (
  !result.error &&
  !result.pdfUA.declared &&
  result.pdfUA.reason === "nonconforming"
) {
  // e.g. "PDF/UA-1 error: the first heading must be of level 1"
  console.info(result.pdfUA.violations.map((v) => v.message));
}

What conformance requires of the document:

Title and language: pass title and lang in the export options. lang is required to attempt the claim at all: a wrong language declaration is an accessibility defect no validator can catch, so exporting without it throws.
Headings: the first heading must be level 1, and levels must be consecutive (no jumping from H1 to H3).

Images always get the alt text PDF/UA requires, derived from the caption with the file name as fallback. Captions make far better alt text, so encourage them.

Pass tryDeclarePdfUA: false in the export options to skip the validation and claim entirely, e.g. for a live preview, where the validation compile would be wasted work. For live previews, also create a fresh exporter per export, since an instance accumulates the image assets it resolves.

Custom mappings / custom schemas

The PDFExporter constructor takes a schema and mappings parameter. A mapping converts a BlockNote schema element into a Typst markup string, and the mappings are shared with the standalone Typst export. See custom mappings there; everything on writing them applies to this exporter unchanged.

Math & diagram blocks

The math and diagram blocks ship their own Typst mappings: math exports as native Typst equations (real text, not images), diagrams as embedded vector graphics. See exporting math and exporting diagrams for the setup.

Fonts

By default, exports use a bundled font set matching the editor: Inter (body), Geist Mono (code), New Computer Modern Math (math), and Noto Color Emoji. To use your own fonts instead, pass the font bytes and the matching family names to the constructor:

const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings, {
  fontFamily: "My Font",
  monoFontFamily: "My Mono Font",
  // Uint8Array[], or a promise of them
  fonts: [myFontBytes, myMonoFontBytes],
  // An emoji-capable font; replaces the default independently of `fonts`
  emojiFont: myEmojiFontBytes,
});

Typst selects fonts by the family name embedded in the font file itself, so the fontFamily options must match what your files declare. A mismatch shows up as an unknown font family entry in the result's compileWarnings.

To extend the defaults rather than replace them (e.g. adding a CJK font as a per-glyph fallback), spread the exported default loaders:

import {
  DEFAULT_FONT_FAMILY,
  loadDefaultBodyFonts,
  PDFExporter,
  typstDefaultSchemaMappings,
} from "@blocknote/xl-pdf-exporter";

const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings, {
  fontFamily: [DEFAULT_FONT_FAMILY, "Noto Sans SC"],
  fonts: loadDefaultBodyFonts().then((fonts) => [...fonts, notoSansSCBytes]),
});

Self-hosting the compiler

The Typst compiler is a ~25MB wasm file from @blocknote/xl-typst-compiler, by default emitted as an asset by your bundler. To control where it is served from (e.g. with caching headers), pass its URL or bytes:

import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url";

const exporter = new PDFExporter(editor.schema, typstDefaultSchemaMappings, {
  wasm: compilerWasmUrl,
});

Exporter options

The PDFExporter constructor takes an optional third options parameter:

const defaultOptions = {
  // a function to resolve external resources (e.g. images) in order to avoid
  // CORS issues; by default, this calls a BlockNote hosted server-side proxy
  resolveFileUrl: corsProxyResolveFileUrl,
  // the strings rendered into the exported document (file link texts, error
  // placeholders); pass a locale from @blocknote/core/locales (or your
  // editor's dictionary) to export in another language
  dictionary: locales.en,
  // the colors used for highlighting, background colors and font colors
  colors: COLORS_DEFAULT, // defaults from @blocknote/core
  // font families (DEFAULT_FONT_FAMILY / DEFAULT_MONO_FONT_FAMILY) and the
  // font bytes they resolve against - see "Fonts" above
  fontFamily: "Inter 18pt",
  monoFontFamily: "Geist Mono",
  fonts: loadDefaultBodyFonts(),
  emojiFont: loadDefaultEmojiFont(),
  // base font size in points
  fontSize: 12,
  // where the compiler wasm loads from - see "Self-hosting the compiler"
  wasm: undefined, // the packaged wasm
};

Exporting Typst markup

The underlying Typst source export is available standalone (e.g. to compile with your own Typst toolchain, including server-side); see Typst export.

Deprecated: the react-pdf exporter

Previous versions of @blocknote/xl-pdf-exporter exported PDFs with react-pdf, producing untagged (not accessible) documents. That exporter is deprecated and will be removed after a few releases; until then it remains available unchanged from the @blocknote/xl-pdf-exporter/react-pdf subpath:

import {
  PDFExporter,
  pdfDefaultSchemaMappings,
} from "@blocknote/xl-pdf-exporter/react-pdf";

Note that its mappings are react-pdf mappings; when migrating to the new exporter, custom blocks need a Typst mapping instead.

import { testDocumentBlocks } from "./testDocumentBlocks"; import { Block, BlockNoteSchema, combineByGroup, withPageBreak, } from "@blocknote/core"; import { filterSuggestionItems } from "@blocknote/core/extensions"; import "@blocknote/core/fonts/inter.css"; import * as locales from "@blocknote/core/locales"; import { BlockNoteView } from "@blocknote/mantine"; import "@blocknote/mantine/style.css"; import { createReactDiagramBlockSpec } from "@blocknote/diagram-block"; import { diagramBlockMapping } from "@blocknote/diagram-block/typst-exporter"; import { createReactInlineMathSpec, createReactMathBlockSpec, } from "@blocknote/math-block"; import { inlineMathMapping, mathBlockMapping, } from "@blocknote/math-block/typst-exporter"; import { SuggestionMenuController, getDefaultReactSlashMenuItems, getPageBreakReactSlashMenuItems, useCreateBlockNote, } from "@blocknote/react"; import { PDFExporter, typstDefaultSchemaMappings, } from "@blocknote/xl-pdf-exporter"; import { getMultiColumnSlashMenuItems, locales as multiColumnLocales, multiColumnDropCursor, withMultiColumn, } from "@blocknote/xl-multi-column"; // Bundle the Typst compiler wasm explicitly (it would otherwise load from // the package's own files - also CDN-free - but an explicit URL keeps the // bundling visible in this example). // Fonts need no setup: the exporter's bundled defaults (Inter, Geist Mono, // math, emoji - matching the editor) load lazily from the package. import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url"; import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import "./styles.css"; /** * Exports the given document to a PDF/UA object URL, re-exporting whenever * `blocks` changes. * * The effect-with-cleanup idiom keeps only the newest result: when a newer * version (or unmount) invalidates the effect, the cleanup marks the running * export stale and its result is dropped. Overlapping exports are *safe* - * the exporter serializes its shared compile stage internally - but like any * async calls they may complete out of call order, and which result to * display is this component's concern, not the exporter's. */ function usePdfUA( makeExporter: () => PDFExporter<any, any, any>, blocks: Block<any, any, any>[], ) { const [pdfUrl, setPdfUrl] = useState<string>(); const [status, setStatus] = useState<"loading" | "ready" | "error">( "loading", ); useEffect(() => { let stale = false; setStatus("loading"); void (async () => { try { const result = await makeExporter().toPDF(blocks, { title: "BlockNote document", lang: "en", }); if (stale) { return; } // A document that fails to compile (e.g. text no supplied font // covers) is an expected outcome, reported in the result. if (result.error) { // eslint-disable-next-line no-console console.error( "PDF export failed:", result.compileErrors.map((d) => d.message).join("; "), ); setStatus("error"); return; } // A nonconforming document (e.g. one not starting with an H1) still // exports - tagged but without the PDF/UA-1 claim; surface why. if (!result.pdfUA.declared && result.pdfUA.reason === "nonconforming") { // eslint-disable-next-line no-console console.info( "Exported without PDF/UA-1 declaration:", result.pdfUA.violations.map((v) => v.message).join("; "), ); } setPdfUrl(URL.createObjectURL(result.blob)); setStatus("ready"); } catch (e) { if (stale) { return; } // eslint-disable-next-line no-console console.error(e); setStatus("error"); } })(); return () => { stale = true; }; }, [makeExporter, blocks]); // Each object URL is revoked when replaced by the next one (and the last // one on unmount). useEffect(() => { return () => { if (pdfUrl) { URL.revokeObjectURL(pdfUrl); } }; }, [pdfUrl]); return { pdfUrl, status }; } export default function App() { // Creates a new editor instance with support for page breaks. const editor = useCreateBlockNote({ // Adds support for math & diagram blocks. schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({ blockSpecs: { mathBlock: createReactMathBlockSpec(), diagram: createReactDiagramBlockSpec(), }, inlineContentSpecs: { math: createReactInlineMathSpec(), }, }), dropCursor: multiColumnDropCursor, dictionary: { ...locales.en, multi_column: multiColumnLocales.en, }, tables: { splitCells: true, cellBackgroundColor: true, cellTextColor: true, headers: true, }, initialContent: [ ...testDocumentBlocks, // The math & diagram blocks aren't part of the shared test document, // since the exporter unit tests' schemas don't register them, so they're // appended here instead. { type: "mathBlock", content: "a^2 = \\sqrt{b^2 + c^2}", }, { type: "diagram", content: `graph TD A[Start] --> B{Works?} B -->|Yes| C[Ship it] B -->|No| A`, }, { type: "paragraph", content: [ { type: "text", text: "Inline math: ", styles: {}, }, { type: "math", content: "e^{i\\pi} + 1 = 0", }, ], }, ], }); // Additional Slash Menu items for page breaks. const getSlashMenuItems = useMemo( () => async (query: string) => filterSuggestionItems( combineByGroup( getDefaultReactSlashMenuItems(editor), getPageBreakReactSlashMenuItems(editor), getMultiColumnSlashMenuItems(editor), ), query, ), [editor], ); // A fresh exporter per export: its asset registry is append-only for the // exporter's lifetime, so reusing one across re-exports would accumulate // every image/diagram variant it has ever rendered. const makeExporter = useCallback( () => new PDFExporter( editor.schema, { ...typstDefaultSchemaMappings, blockMapping: { ...typstDefaultSchemaMappings.blockMapping, // Renders math blocks as native Typst equations, and diagrams as // embedded images - both carrying alt text for PDF/UA. mathBlock: mathBlockMapping, diagram: diagramBlockMapping, }, inlineContentMapping: { ...typstDefaultSchemaMappings.inlineContentMapping, math: inlineMathMapping, }, }, { // The bundled compiler wasm (see the import above) - engine setup // belongs to the exporter, per-document facts go to toPDF. wasm: compilerWasmUrl, }, ), [editor], ); // The document snapshot driving the export - the export effect depends on // the data it exports. Updated debounced: reading `editor.document` // converts the whole document to blocks, so it shouldn't run (and the // export shouldn't restart) on every keystroke. const [blocks, setBlocks] = useState(() => editor.document); const { pdfUrl, status } = usePdfUA(makeExporter, blocks); const debounceTimer = useRef<ReturnType<typeof setTimeout>>(undefined); useEffect(() => () => clearTimeout(debounceTimer.current), []); const onChange = () => { clearTimeout(debounceTimer.current); debounceTimer.current = setTimeout(() => setBlocks(editor.document), 600); }; const onDownloadClick = () => { if (!pdfUrl) { return; } const link = document.createElement("a"); link.href = pdfUrl; link.download = "blocknote (pdf-ua).pdf"; document.body.appendChild(link); link.click(); link.remove(); }; const label = status === "loading" ? "Generating…" : status === "error" ? "Export failed (see console)" : "✓ Tagged PDF/UA-1"; return ( <div className="views"> <div className="view-wrapper"> <div className="view-label">Editor Input</div> <div className="view"> <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}> <SuggestionMenuController triggerCharacter={"/"} getItems={getSlashMenuItems} /> </BlockNoteView> </div> </div> <div className="view-wrapper"> <div className="view-label"> {label} <button type="button" className="view-label-download" onClick={onDownloadClick} > Download </button> </div> <div className="view"> {pdfUrl ? ( <iframe title="PDF/UA output" height="100%" width="100%" src={pdfUrl} /> ) : null} </div> </div> </div> ); }

import { testDocumentBlocks } from "./testDocumentBlocks";import { Block, BlockNoteSchema, combineByGroup, withPageBreak,} from "@blocknote/core";import { filterSuggestionItems } from "@blocknote/core/extensions";import "@blocknote/core/fonts/inter.css";import * as locales from "@blocknote/core/locales";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";import { createReactDiagramBlockSpec } from "@blocknote/diagram-block";import { diagramBlockMapping } from "@blocknote/diagram-block/typst-exporter";import { createReactInlineMathSpec, createReactMathBlockSpec,} from "@blocknote/math-block";import { inlineMathMapping, mathBlockMapping,} from "@blocknote/math-block/typst-exporter";import { SuggestionMenuController, getDefaultReactSlashMenuItems, getPageBreakReactSlashMenuItems, useCreateBlockNote,} from "@blocknote/react";import { PDFExporter, typstDefaultSchemaMappings,} from "@blocknote/xl-pdf-exporter";import { getMultiColumnSlashMenuItems, locales as multiColumnLocales, multiColumnDropCursor, withMultiColumn,} from "@blocknote/xl-multi-column";// Bundle the Typst compiler wasm explicitly (it would otherwise load from// the package's own files - also CDN-free - but an explicit URL keeps the// bundling visible in this example).// Fonts need no setup: the exporter's bundled defaults (Inter, Geist Mono,// math, emoji - matching the editor) load lazily from the package.import compilerWasmUrl from "@blocknote/xl-typst-compiler/wasm?url";import { useCallback, useEffect, useMemo, useRef, useState } from "react";import "./styles.css";/** * Exports the given document to a PDF/UA object URL, re-exporting whenever * `blocks` changes. * * The effect-with-cleanup idiom keeps only the newest result: when a newer * version (or unmount) invalidates the effect, the cleanup marks the running * export stale and its result is dropped. Overlapping exports are *safe* - * the exporter serializes its shared compile stage internally - but like any * async calls they may complete out of call order, and which result to * display is this component's concern, not the exporter's. */function usePdfUA( makeExporter: () => PDFExporter<any, any, any>, blocks: Block<any, any, any>[],) { const [pdfUrl, setPdfUrl] = useState<string>(); const [status, setStatus] = useState<"loading" | "ready" | "error">( "loading", ); useEffect(() => { let stale = false; setStatus("loading"); void (async () => { try { const result = await makeExporter().toPDF(blocks, { title: "BlockNote document", lang: "en", }); if (stale) { return; } // A document that fails to compile (e.g. text no supplied font // covers) is an expected outcome, reported in the result. if (result.error) { // eslint-disable-next-line no-console console.error( "PDF export failed:", result.compileErrors.map((d) => d.message).join("; "), ); setStatus("error"); return; } // A nonconforming document (e.g. one not starting with an H1) still // exports - tagged but without the PDF/UA-1 claim; surface why. if (!result.pdfUA.declared && result.pdfUA.reason === "nonconforming") { // eslint-disable-next-line no-console console.info( "Exported without PDF/UA-1 declaration:", result.pdfUA.violations.map((v) => v.message).join("; "), ); } setPdfUrl(URL.createObjectURL(result.blob)); setStatus("ready"); } catch (e) { if (stale) { return; } // eslint-disable-next-line no-console console.error(e); setStatus("error"); } })(); return () => { stale = true; }; }, [makeExporter, blocks]); // Each object URL is revoked when replaced by the next one (and the last // one on unmount). useEffect(() => { return () => { if (pdfUrl) { URL.revokeObjectURL(pdfUrl); } }; }, [pdfUrl]); return { pdfUrl, status };}export default function App() { // Creates a new editor instance with support for page breaks. const editor = useCreateBlockNote({ // Adds support for math & diagram blocks. schema: withMultiColumn(withPageBreak(BlockNoteSchema.create())).extend({ blockSpecs: { mathBlock: createReactMathBlockSpec(), diagram: createReactDiagramBlockSpec(), }, inlineContentSpecs: { math: createReactInlineMathSpec(), }, }), dropCursor: multiColumnDropCursor, dictionary: { ...locales.en, multi_column: multiColumnLocales.en, }, tables: { splitCells: true, cellBackgroundColor: true, cellTextColor: true, headers: true, }, initialContent: [ ...testDocumentBlocks, // The math & diagram blocks aren't part of the shared test document, // since the exporter unit tests' schemas don't register them, so they're // appended here instead. { type: "mathBlock", content: "a^2 = \\sqrt{b^2 + c^2}", }, { type: "diagram", content: `graph TD A[Start] --> B{Works?} B -->|Yes| C[Ship it] B -->|No| A`, }, { type: "paragraph", content: [ { type: "text", text: "Inline math: ", styles: {}, }, { type: "math", content: "e^{i\\pi} + 1 = 0", }, ], }, ], }); // Additional Slash Menu items for page breaks. const getSlashMenuItems = useMemo( () => async (query: string) => filterSuggestionItems( combineByGroup( getDefaultReactSlashMenuItems(editor), getPageBreakReactSlashMenuItems(editor), getMultiColumnSlashMenuItems(editor), ), query, ), [editor], ); // A fresh exporter per export: its asset registry is append-only for the // exporter's lifetime, so reusing one across re-exports would accumulate // every image/diagram variant it has ever rendered. const makeExporter = useCallback( () => new PDFExporter( editor.schema, { ...typstDefaultSchemaMappings, blockMapping: { ...typstDefaultSchemaMappings.blockMapping, // Renders math blocks as native Typst equations, and diagrams as // embedded images - both carrying alt text for PDF/UA. mathBlock: mathBlockMapping, diagram: diagramBlockMapping, }, inlineContentMapping: { ...typstDefaultSchemaMappings.inlineContentMapping, math: inlineMathMapping, }, }, { // The bundled compiler wasm (see the import above) - engine setup // belongs to the exporter, per-document facts go to toPDF. wasm: compilerWasmUrl, }, ), [editor], ); // The document snapshot driving the export - the export effect depends on // the data it exports. Updated debounced: reading `editor.document` // converts the whole document to blocks, so it shouldn't run (and the // export shouldn't restart) on every keystroke. const [blocks, setBlocks] = useState(() => editor.document); const { pdfUrl, status } = usePdfUA(makeExporter, blocks); const debounceTimer = useRef<ReturnType<typeof setTimeout>>(undefined); useEffect(() => () => clearTimeout(debounceTimer.current), []); const onChange = () => { clearTimeout(debounceTimer.current); debounceTimer.current = setTimeout(() => setBlocks(editor.document), 600); }; const onDownloadClick = () => { if (!pdfUrl) { return; } const link = document.createElement("a"); link.href = pdfUrl; link.download = "blocknote (pdf-ua).pdf"; document.body.appendChild(link); link.click(); link.remove(); }; const label = status === "loading" ? "Generating…" : status === "error" ? "Export failed (see console)" : "✓ Tagged PDF/UA-1"; return ( <div className="views"> <div className="view-wrapper"> <div className="view-label">Editor Input</div> <div className="view"> <BlockNoteView editor={editor} slashMenu={false} onChange={onChange}> <SuggestionMenuController triggerCharacter={"/"} getItems={getSlashMenuItems} /> </BlockNoteView> </div> </div> <div className="view-wrapper"> <div className="view-label"> {label} <button type="button" className="view-label-download" onClick={onDownloadClick} > Download </button> </div> <div className="view"> {pdfUrl ? ( <iframe title="PDF/UA output" height="100%" width="100%" src={pdfUrl} /> ) : null} </div> </div> </div> );}

.views { container-name: views; container-type: inline-size; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; height: 100%; padding: 8px; } .view-wrapper { display: flex; flex-direction: column; height: calc(50% - 4px); width: 100%; } @container views (width > 1024px) { .view-wrapper { height: 100%; width: calc(50% - 4px); } } .view-label { color: #0090ff; display: flex; font-size: 12px; font-weight: bold; justify-content: space-between; margin-inline: 16px; } /* A real <button> (keyboard-focusable), restyled to match the label text. */ .view-label-download { background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline; } .view { border: solid #0090ff 1px; border-radius: 16px; flex: 1; height: 0; padding: 8px; } .view .bn-container { height: 100%; margin: 0; max-width: none; padding: 0; } .view .bn-editor { height: 100%; overflow: auto; } .view iframe { border: none; border-radius: 8px; }

.views { container-name: views; container-type: inline-size; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; height: 100%; padding: 8px;}.view-wrapper { display: flex; flex-direction: column; height: calc(50% - 4px); width: 100%;}@container views (width > 1024px) { .view-wrapper { height: 100%; width: calc(50% - 4px); }}.view-label { color: #0090ff; display: flex; font-size: 12px; font-weight: bold; justify-content: space-between; margin-inline: 16px;}/* A real <button> (keyboard-focusable), restyled to match the label text. */.view-label-download { background: none; border: none; color: inherit; font: inherit; padding: 0; cursor: pointer; text-decoration: underline;}.view { border: solid #0090ff 1px; border-radius: 16px; flex: 1; height: 0; padding: 8px;}.view .bn-container { height: 100%; margin: 0; max-width: none; padding: 0;}.view .bn-editor { height: 100%; overflow: auto;}.view iframe { border: none; border-radius: 8px;}

// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY. // Generated from shared/testDocumentBlocks.ts — run `pnpm run gen` to update. import type { PartialBlock } from "@blocknote/core"; /** * The shared example/test document, as partial blocks. * * This file is intentionally self-contained — it has only a type-only import * from `@blocknote/core` (no runtime imports) — so the example generator can * copy it verbatim into each exporter playground example and the examples stay * runnable on their own (e.g. opened directly in StackBlitz). * * It is the single source of truth for both the playground examples' editor * `initialContent` and the exporters' `testDocument` unit-test fixture. */ export const testDocumentBlocks: PartialBlock<any, any, any>[] = [ { type: "paragraph", content: [ { type: "text", text: "Welcome to this ", styles: { italic: true, }, }, { type: "text", text: "demo 🙌!", styles: { italic: true, bold: true, }, }, ], children: [ { type: "paragraph", content: "Hello World nested", children: [ { type: "paragraph", content: "Hello World double nested", }, ], }, ], }, { type: "paragraph", content: [ { type: "text", text: "This paragraph has a background color", styles: { bold: true }, }, ], props: { backgroundColor: "red", }, }, { type: "paragraph", content: "Paragraph", }, // An empty paragraph: a blank line in the editor, which exporters must // preserve as vertical space rather than dropping the block. { type: "paragraph", }, { type: "heading", content: "Heading", }, { type: "heading", content: "Heading right", props: { textAlignment: "right", }, }, { type: "heading", content: "Heading 2", props: { level: 2 }, }, { type: "heading", content: "Heading 3", props: { level: 3 }, }, { type: "heading", content: "Heading 4", props: { level: 4 }, }, { type: "heading", content: "Heading 5", props: { level: 5 }, }, { type: "heading", content: "Heading 6", props: { level: 6 }, }, { type: "paragraph", content: "Emojis: 😀 🎉 🚀 👍 👍🏽 🌍 🚶‍♀️", }, { type: "paragraph", content: "Centered paragraph", props: { textAlignment: "center", }, }, { type: "paragraph", content: "justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "justify", }, }, { type: "pageBreak" }, { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", children: [ { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, { type: "bulletListItem", content: "Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "right", }, }, { type: "numberedListItem", content: "Numbered List Item 1", }, { type: "numberedListItem", content: "Numbered List Item 2", children: [ { type: "numberedListItem", content: "Numbered List Item Nested 1", }, { type: "numberedListItem", content: "Numbered List Item Nested 2", }, { type: "numberedListItem", content: "Numbered List Item Nested funky right", props: { textAlignment: "right", backgroundColor: "red", textColor: "blue", }, }, { type: "numberedListItem", content: "Numbered List Item Nested funky center", props: { textAlignment: "center", backgroundColor: "red", textColor: "blue", }, }, ], }, ], }, { type: "numberedListItem", content: "Numbered List Item", }, { type: "checkListItem", content: "Check List Item", }, { type: "checkListItem", content: "Checked List Item", props: { checked: true, }, }, { type: "numberedListItem", content: "Numbered List Item starting at 5", props: { start: 5, }, }, { type: "numberedListItem", content: "Numbered List Item 6", }, { type: "toggleListItem", content: "Toggle List Item", children: [ { type: "paragraph", content: "Content nested inside the toggle list item.", }, { type: "bulletListItem", content: "A nested bullet inside the toggle", }, ], }, { type: "heading", content: "Toggle Heading", props: { level: 2, isToggleable: true, }, children: [ { type: "paragraph", content: "Content nested inside the toggle heading.", }, ], }, { type: "table", content: { type: "tableContent", columnWidths: [200, undefined, undefined], rows: [ { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, ], }, }, { type: "file", }, { type: "image", props: { url: "https://placehold.co/332x322.jpg", caption: "From https://placehold.co/332x322.jpg", }, }, { type: "image", props: { previewWidth: 200, url: "https://placehold.co/332x322.jpg", textAlignment: "right", }, }, { type: "video", props: { url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", caption: "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", }, }, { type: "audio", props: { url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", caption: "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", }, }, { type: "paragraph", }, { type: "audio", props: { caption: "Audio file caption", name: "audio.mp3", }, }, { type: "paragraph", content: [ { type: "text", text: "Inline Content:", styles: { bold: true }, }, ], }, { type: "paragraph", content: [ { type: "text", text: "Styled Text", styles: { bold: true, italic: true, textColor: "red", backgroundColor: "blue", }, }, { type: "text", text: " ", styles: {}, }, { type: "text", text: "underlined", styles: { underline: true }, }, { type: "text", text: " ", styles: {}, }, { type: "text", text: "strikethrough", styles: { strike: true }, }, { type: "text", text: " ", styles: {}, }, { type: "link", content: "Link", href: "https://www.blocknotejs.org", }, ], }, { type: "table", content: { type: "tableContent", headerRows: 1, rows: [ { cells: ["Table Header 1", "Table Header 2", "Table Header 3"], }, { cells: [ "Table Cell 4", [ { type: "text", text: "Table Cell Bold Colored 5", styles: { bold: true, textColor: "red", backgroundColor: "blue", }, }, ], "Table Cell 6", ], }, { cells: ["Table Cell 7", "Table Cell 8", "Table Cell 9"], }, ], }, }, // An "advanced" table: two header rows and merged cells (colspan / // rowspan) - the features behind the editor's `splitCells` / // `headers` table options, which exporters must place correctly. { type: "table", content: { type: "tableContent", // Explicit widths for all three tracks: the merged first-row cell // means the row alone doesn't reveal the column count. columnWidths: [undefined, undefined, undefined], headerRows: 2, rows: [ { cells: [ { type: "tableCell", content: "Merged Header", props: { colspan: 2 }, }, { type: "tableCell", content: "Header C" }, ], }, { cells: ["Header A", "Header B", "Header C2"], }, { cells: [ { type: "tableCell", content: "Merged Rows", props: { rowspan: 2 }, }, { type: "tableCell", content: "Cell B1" }, { type: "tableCell", content: "Cell C1" }, ], }, { cells: ["Cell B2", "Cell C2"], }, ], }, }, // A hard line break (shift+enter) inside one paragraph - a single block // whose text spans two lines. { type: "paragraph", content: "A hard line break\nwithin a single paragraph", }, { type: "codeBlock", props: { language: "javascript", }, content: `const helloWorld = (message) => { console.log("Hello World", message); };`, }, { type: "paragraph", content: [ { type: "text", text: "Some inline code: ", styles: { bold: true }, }, { type: "text", text: "var foo = 'bar';", styles: { code: true }, }, ], }, { type: "columnList", children: [ { type: "column", props: { width: 0.8 }, children: [ { type: "paragraph", content: "This paragraph is in a column!" }, ], }, { type: "column", props: { width: 1.4 }, children: [{ type: "heading", content: "So is this heading!" }], }, { type: "column", props: { width: 0.8 }, children: [ { type: "paragraph", content: "You can have multiple blocks in a column too", }, { type: "bulletListItem", content: "Block 1" }, { type: "bulletListItem", content: "Block 2" }, { type: "bulletListItem", content: "Block 3" }, ], }, ], }, { type: "divider" }, { type: "quote", content: "All those moments will be lost in time, like tears in rain.", }, ];

// AUTO-GENERATED FILE, DO NOT EDIT DIRECTLY.// Generated from shared/testDocumentBlocks.ts — run `pnpm run gen` to update.import type { PartialBlock } from "@blocknote/core";/** * The shared example/test document, as partial blocks. * * This file is intentionally self-contained — it has only a type-only import * from `@blocknote/core` (no runtime imports) — so the example generator can * copy it verbatim into each exporter playground example and the examples stay * runnable on their own (e.g. opened directly in StackBlitz). * * It is the single source of truth for both the playground examples' editor * `initialContent` and the exporters' `testDocument` unit-test fixture. */export const testDocumentBlocks: PartialBlock<any, any, any>[] = [ { type: "paragraph", content: [ { type: "text", text: "Welcome to this ", styles: { italic: true, }, }, { type: "text", text: "demo 🙌!", styles: { italic: true, bold: true, }, }, ], children: [ { type: "paragraph", content: "Hello World nested", children: [ { type: "paragraph", content: "Hello World double nested", }, ], }, ], }, { type: "paragraph", content: [ { type: "text", text: "This paragraph has a background color", styles: { bold: true }, }, ], props: { backgroundColor: "red", }, }, { type: "paragraph", content: "Paragraph", }, // An empty paragraph: a blank line in the editor, which exporters must // preserve as vertical space rather than dropping the block. { type: "paragraph", }, { type: "heading", content: "Heading", }, { type: "heading", content: "Heading right", props: { textAlignment: "right", }, }, { type: "heading", content: "Heading 2", props: { level: 2 }, }, { type: "heading", content: "Heading 3", props: { level: 3 }, }, { type: "heading", content: "Heading 4", props: { level: 4 }, }, { type: "heading", content: "Heading 5", props: { level: 5 }, }, { type: "heading", content: "Heading 6", props: { level: 6 }, }, { type: "paragraph", content: "Emojis: 😀 🎉 🚀 👍 👍🏽 🌍 🚶‍♀️", }, { type: "paragraph", content: "Centered paragraph", props: { textAlignment: "center", }, }, { type: "paragraph", content: "justified paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "justify", }, }, { type: "pageBreak" }, { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", children: [ { type: "bulletListItem", content: "Bullet List Item. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", }, { type: "bulletListItem", content: "Bullet List Item right. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.", props: { textAlignment: "right", }, }, { type: "numberedListItem", content: "Numbered List Item 1", }, { type: "numberedListItem", content: "Numbered List Item 2", children: [ { type: "numberedListItem", content: "Numbered List Item Nested 1", }, { type: "numberedListItem", content: "Numbered List Item Nested 2", }, { type: "numberedListItem", content: "Numbered List Item Nested funky right", props: { textAlignment: "right", backgroundColor: "red", textColor: "blue", }, }, { type: "numberedListItem", content: "Numbered List Item Nested funky center", props: { textAlignment: "center", backgroundColor: "red", textColor: "blue", }, }, ], }, ], }, { type: "numberedListItem", content: "Numbered List Item", }, { type: "checkListItem", content: "Check List Item", }, { type: "checkListItem", content: "Checked List Item", props: { checked: true, }, }, { type: "numberedListItem", content: "Numbered List Item starting at 5", props: { start: 5, }, }, { type: "numberedListItem", content: "Numbered List Item 6", }, { type: "toggleListItem", content: "Toggle List Item", children: [ { type: "paragraph", content: "Content nested inside the toggle list item.", }, { type: "bulletListItem", content: "A nested bullet inside the toggle", }, ], }, { type: "heading", content: "Toggle Heading", props: { level: 2, isToggleable: true, }, children: [ { type: "paragraph", content: "Content nested inside the toggle heading.", }, ], }, { type: "table", content: { type: "tableContent", columnWidths: [200, undefined, undefined], rows: [ { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, { cells: ["Wide Cell", "Table Cell", "Table Cell"], }, ], }, }, { type: "file", }, { type: "image", props: { url: "https://placehold.co/332x322.jpg", caption: "From https://placehold.co/332x322.jpg", }, }, { type: "image", props: { previewWidth: 200, url: "https://placehold.co/332x322.jpg", textAlignment: "right", }, }, { type: "video", props: { url: "https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", caption: "From https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm", }, }, { type: "audio", props: { url: "https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", caption: "From https://interactive-examples.mdn.mozilla.net/media/cc0-audio/t-rex-roar.mp3", }, }, { type: "paragraph", }, { type: "audio", props: { caption: "Audio file caption", name: "audio.mp3", }, }, { type: "paragraph", content: [ { type: "text", text: "Inline Content:", styles: { bold: true }, }, ], }, { type: "paragraph", content: [ { type: "text", text: "Styled Text", styles: { bold: true, italic: true, textColor: "red", backgroundColor: "blue", }, }, { type: "text", text: " ", styles: {}, }, { type: "text", text: "underlined", styles: { underline: true }, }, { type: "text", text: " ", styles: {}, }, { type: "text", text: "strikethrough", styles: { strike: true }, }, { type: "text", text: " ", styles: {}, }, { type: "link", content: "Link", href: "https://www.blocknotejs.org", }, ], }, { type: "table", content: { type: "tableContent", headerRows: 1, rows: [ { cells: ["Table Header 1", "Table Header 2", "Table Header 3"], }, { cells: [ "Table Cell 4", [ { type: "text", text: "Table Cell Bold Colored 5", styles: { bold: true, textColor: "red", backgroundColor: "blue", }, }, ], "Table Cell 6", ], }, { cells: ["Table Cell 7", "Table Cell 8", "Table Cell 9"], }, ], }, }, // An "advanced" table: two header rows and merged cells (colspan / // rowspan) - the features behind the editor's `splitCells` / // `headers` table options, which exporters must place correctly. { type: "table", content: { type: "tableContent", // Explicit widths for all three tracks: the merged first-row cell // means the row alone doesn't reveal the column count. columnWidths: [undefined, undefined, undefined], headerRows: 2, rows: [ { cells: [ { type: "tableCell", content: "Merged Header", props: { colspan: 2 }, }, { type: "tableCell", content: "Header C" }, ], }, { cells: ["Header A", "Header B", "Header C2"], }, { cells: [ { type: "tableCell", content: "Merged Rows", props: { rowspan: 2 }, }, { type: "tableCell", content: "Cell B1" }, { type: "tableCell", content: "Cell C1" }, ], }, { cells: ["Cell B2", "Cell C2"], }, ], }, }, // A hard line break (shift+enter) inside one paragraph - a single block // whose text spans two lines. { type: "paragraph", content: "A hard line break\nwithin a single paragraph", }, { type: "codeBlock", props: { language: "javascript", }, content: `const helloWorld = (message) => { console.log("Hello World", message);};`, }, { type: "paragraph", content: [ { type: "text", text: "Some inline code: ", styles: { bold: true }, }, { type: "text", text: "var foo = 'bar';", styles: { code: true }, }, ], }, { type: "columnList", children: [ { type: "column", props: { width: 0.8 }, children: [ { type: "paragraph", content: "This paragraph is in a column!" }, ], }, { type: "column", props: { width: 1.4 }, children: [{ type: "heading", content: "So is this heading!" }], }, { type: "column", props: { width: 0.8 }, children: [ { type: "paragraph", content: "You can have multiple blocks in a column too", }, { type: "bulletListItem", content: "Block 1" }, { type: "bulletListItem", content: "Block 2" }, { type: "bulletListItem", content: "Block 3" }, ], }, ], }, { type: "divider" }, { type: "quote", content: "All those moments will be lost in time, like tears in rain.", },];

PDF Export

Customizing the PDF

PDF/UA conformance

Custom mappings / custom schemas

Math & diagram blocks

Fonts

Self-hosting the compiler

Exporter options

Exporting Typst markup

Deprecated: the react-pdf exporter

On this page

Learn

Collaborate

Community

Legal & Theme