Getting Started

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

Install

To install BlockNote with NPM, run:

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

BlockNote provides multiple UI library options. Choose the one that best fits your project:

• Mantine (@blocknote/mantine) - Recommended for new projects
• Shadcn (@blocknote/shadcn)
• Ariakit (@blocknote/ariakit)

Create an editor

The fastest way to get started with the BlockNote is by using the useCreateBlockNote hook and BlockNoteView component:

import React from "react";
import { useCreateBlockNote } from "@blocknote/react";
// Or, you can use ariakit, shadcn, etc.
import { BlockNoteView } from "@blocknote/mantine";
// Default styles for the mantine editor
import "@blocknote/mantine/style.css";
// Include the included Inter font
import "@blocknote/core/fonts/inter.css";

export default function MyEditor() {
  // Create a new editor instance
  const editor = useCreateBlockNote();

  // Render the editor
  return <BlockNoteView editor={editor} />;
}

For more information about the useCreateBlockNote hook and the BlockNoteView component, see React Overview.

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.

• Learn about blocks and the editor basics and how to interact with the editor using the editor API
• See UI Components to customize built-in menus and toolbars and Styling & Theming to customize the look and feel of the editor
• Further extend the editor with your own Blocks using Custom Schemas or add Real-Time Collaboration