Examples
Basic
Removing Default Blocks from Schema

Removing Default Blocks from Schema

This example shows how to change the default schema and disable the Audio and Image blocks. To do this, we pass in a custom schema based on the built-in, default schema, with two specific blocks removed.

Relevant Docs:

import { BlockNoteSchema, defaultBlockSpecs } from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import { useCreateBlockNote } from "@blocknote/react";
 
export default function App() {
  // Disable the Audio and Image blocks from the built-in schema
  // This is done by picking out the blocks you want to disable
  const { audio, image, ...remainingBlockSpecs } = defaultBlockSpecs;
 
  const schema = BlockNoteSchema.create({
    blockSpecs: {
      // remainingBlockSpecs contains all the other blocks
      ...remainingBlockSpecs,
    },
  });
 
  // Creates a new editor instance with the schema
  const editor = useCreateBlockNote({
    schema,
  });
 
  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}