Examples
Backend
Rendering static documents

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:

GitHub
StackBlitz
import "@blocknote/core/fonts/inter.css";
import "@blocknote/core/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";
    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 (
    <div className="bn-container">
      <div
        className=" bn-default-styles"
        dangerouslySetInnerHTML={{ __html: html }}
      />
    </div>
  );
}
Upload Files to AWS S3Removing UI Elements