Rendering static documents
This example shows how you can use HTML exported using the blocksToFullHTML and render it as a static document (a view-only document, without the editor). You can use this for example if you use BlockNote to edit blog posts in a CMS, but want to display non-editable static, published pages to end-users.
Relevant Docs:
import "@blocknote/core/fonts/inter.css";import "@blocknote/mantine/style.css";/** On Server Side, you can use the ServerBlockNoteEditor to render BlockNote documents to HTML. e.g.: import { ServerBlockNoteEditor } from "@blocknote/server-util"; const editor = ServerBlockNoteEditor.create(); const html = await editor.blocksToFullHTML(document);You can then use render this HTML as a static page or send it to the client. Make sure to include the editor stylesheets: import "@blocknote/core/fonts/inter.css"; // Depending on the UI library you're using, you may want to use `react`, // `mantine`, etc instead of `core`. import "@blocknote/core/style.css";This example has the HTML hard-coded, but shows at least how the document will be rendered when the appropriate style sheets are loaded. */export default function App() { // This HTML is generated by the ServerBlockNoteEditor.blocksToFullHTML method const html = `<div class="bn-block-group" data-node-type="blockGroup"> <div class="bn-block-outer" data-node-type="blockOuter" data-id="1" data-text-color="yellow" data-background-color="blue"> <div class="bn-block" data-node-type="blockContainer" data-id="1" data-text-color="yellow" data-background-color="blue"> <div class="bn-block-content" data-content-type="heading" data-text-alignment="right" data-level="2"> <h2 class="bn-inline-content"> <strong><u>Heading </u></strong><em><s>2</s></em> </h2> </div> <div class="bn-block-group" data-node-type="blockGroup"> <div class="bn-block-outer" data-node-type="blockOuter" data-id="2" data-background-color="red"> <div class="bn-block" data-node-type="blockContainer" data-id="2" data-background-color="red"> <div class="bn-block-content" data-content-type="paragraph"> <p class="bn-inline-content">Paragraph</p> </div> </div> </div> <div class="bn-block-outer" data-node-type="blockOuter" data-id="3"> <div class="bn-block" data-node-type="blockContainer" data-id="3"> <div class="bn-block-content" data-content-type="bulletListItem"> <p class="bn-inline-content">list item</p> </div> </div> </div> </div> </div> </div></div>`; // Renders the editor instance using a React component. return ( // To make the HTML look identical to the editor, we need to add these two // wrapping divs to the exported blocks. You need will need to add // additional class names/attributes depend on the UI library you're using, // whether you want to show light or dark more, etc. It's easiest to just // check the rendered editor HTML to see what you need to add. <div className="bn-container bn-mantine"> <div className="ProseMirror bn-editor bn-default-styles" dangerouslySetInnerHTML={{ __html: html }} /> </div> );}