Skip to content

BlockNote

BlockNote adds a document editor built around blocks such as headings, lists and images.

Visit BlockNote

What can people move around in a BlockNote document?

A block is one piece of the document, such as a heading, a checklist or an image. BlockNote supplies an interface for adding and moving those pieces. Its React setup offers ready-made interface options, and its Next.js guide calls for loading the editor in the browser.

What should you save to reopen a note?

Save the native BlockNote JSON, which records the document’s blocks. The documentation shows a browser-storage example. If people need their notes on another device, connect saving and loading to your app’s server and check that it opens the right person’s notes. Keep any uploaded files reachable through the app’s intended access rules.

What might change when the document leaves your app?

HTML or Markdown export can lose details. Keep the original and test an exported copy with the block types and nesting your customers use. The core uses the MPL 2.0 license. BlockNote’s XL packages use a separate license choice. For a closed-source app, check commercial XL terms if you need built-in PDF or Word export.

How would you compare a reopened note with its export?

Draw a fictional meeting note with a heading and a checklist under an indented item. Plan two checks without opening an editor or account.

  1. Reopen the editable copy
    Mark the order, nesting and checked items that should still be there when someone comes back.
  2. Read the portable copy
    Mark which details a reader needs in another app. If the indented item becomes flat, decide whether that makes the export unsuitable for your use.