Docs
Quickstart

Quickstart

Getting started with BlockNote is quick and easy. Install the required packages and add the React component to your app.

Installing with NPM

To install BlockNote with NPM (opens in a new tab), run:

npm install @blocknote/core @blocknote/react @blocknote/mantine

Creating an Editor

With the useCreateBlockNote hook, we can create a new editor instance, then use theBlockNoteView component to render it. See below:

GitHub
StackBlitz
import {
  AIBlock,
  AIBlockToolbarProsemirrorPlugin,
  AIButton,
  AIInlineToolbarProsemirrorPlugin,
  BlockNoteAIContextProvider,
  BlockNoteAIUI,
  aiBlockTypeSelectItems,
  en as aiEN,
  getAISlashMenuItems,
  useBlockNoteAIContext,
} from "@blocknote/ai";
 
import "@blocknote/ai/style.css";
import {
  BlockNoteEditor,
  BlockNoteSchema,
  defaultBlockSpecs,
  en,
  filterSuggestionItems,
} from "@blocknote/core";
import "@blocknote/core/fonts/inter.css";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";
import {
  FormattingToolbar,
  FormattingToolbarController,
  SuggestionMenuController,
  blockTypeSelectItems,
  getDefaultReactSlashMenuItems,
  getFormattingToolbarItems,
  useCreateBlockNote,
} from "@blocknote/react";
 
const schema = BlockNoteSchema.create({
  blockSpecs: {
    ...defaultBlockSpecs,
    ai: AIBlock,
  },
});
export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote({
    schema,
    dictionary: {
      ...en,
      ai: aiEN,
    } as any,
    extensions: {
      // TODO: things will break when user provides different keys. Define name on plugins instead?
      aiBlockToolbar: new AIBlockToolbarProsemirrorPlugin(),
      aiInlineToolbar: new AIInlineToolbarProsemirrorPlugin(),
    },
  });
 
  // Renders the editor instance using a React component.
  return (
    <BlockNoteView editor={editor} formattingToolbar={false} slashMenu={false}>
      <BlockNoteAIContextProvider>
        <BlockNoteAIUI />
        <FormattingToolbarController
          formattingToolbar={() => (
            <FormattingToolbar>
              {...getFormattingToolbarItems([
                ...blockTypeSelectItems(editor.dictionary),
                ...aiBlockTypeSelectItems(aiEN),
              ])}
              <AIButton />
            </FormattingToolbar>
          )}
        />
        <SuggestionMenu editor={editor} />
      </BlockNoteAIContextProvider>
      {/* TODO: Side Menu customization */}
    </BlockNoteView>
  );
}
 
function SuggestionMenu(props: { editor: BlockNoteEditor<any, any, any> }) {
  const ctx = useBlockNoteAIContext();
  return (
    <SuggestionMenuController
      triggerCharacter="/"
      getItems={async (query) =>
        filterSuggestionItems(
          [
            ...getDefaultReactSlashMenuItems(props.editor),
            ...getAISlashMenuItems(props.editor as any, ctx), // TODO
          ],
          query
        )
      }
    />
  );
}

We also import @blocknote/mantine/style.css to add default styling for the editor and the Inter font that BlockNote exports (optional).

Next.js usage (or other server-side React frameworks)

Are you using Next.js (create-next-app)? Because BlockNote is a client-only component, make sure to disable server-side rendering of BlockNote. Read our guide on setting up Next.js + BlockNote

Using BlockNote without React

It's also possible to use BlockNote without React, using "vanilla" JavaScript or other frameworks. Read our guide on using BlockNote without React

Next steps

You now know how to integrate BlockNote into your React app! However, this is just scratching the surface of what you can do with BlockNote.

IntroductionEditor Basics