Built-in Blocks

BlockNote supports a number of built-in blocks, inline content types, and styles that are included in the editor by default. This is called the Default Schema. To create your own content types, see Custom Schemas.

The demo below showcases each of BlockNote's built-in block and inline content types:

Default Block Properties

There are some default block props that BlockNote uses for the built-in blocks:

type DefaultProps = {
  /**
   * The background color of the block, which also applies to nested blocks.
   * @default "default"
   */
  backgroundColor: string;
  /**
   * The text color of the block, which also applies to nested blocks.
   * @default "default"
   */
  textColor: string;
  /**
   * The text alignment of the block.
   * @default "left"
   */
  textAlignment: "left" | "center" | "right" | "justify";
};

Configuring Default Blocks

Some default blocks can be configured with options. For example, headings can be configured to have different available levels:

// Creates a new instance of the default heading block.
const heading = createHeadingBlockSpec({
  // Sets the block to support only heading levels 1-3.
  levels: [1, 2, 3],
});

Each default block type can be instantiated using their respective create...BlockSpec function. If the block can be configured, i.e. if it has options, you can pass them in an object to the function. To see which options each block type supports, read on to the next pages.

To add your configured block to the editor, you must pass in a custom schema with it. The simplest way to do this is by extending the default schema:

const editor = useCreateBlockNote({
  // Creates a default schema and extends it with the configured heading block.
  schema: BlockNoteSchema.create().extend({
    blockSpecs: {
      heading: createHeadingBlockSpec({
        // Sets the allowed heading levels.
        levels: [1, 2, 3],
      }),
    },
  }),
});

You can see this in action in a working demo here.

Explore