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 @mantine/core @mantine/hooks @mantine/utils
npm install @blocknote/core @blocknote/react @blocknote/mantine

pnpm add @mantine/core @mantine/hooks @mantine/utils
pnpm add @blocknote/core @blocknote/react @blocknote/mantine

bun add @mantine/core @mantine/hooks @mantine/utils
bun add @blocknote/core @blocknote/react @blocknote/mantine

This will install the Mantine UI version of BlockNote, which works great out of the box and is recommended for new projects.

BlockNote also provides multiple alternative UI library options. Choose the one that best fits your needs:

ShadCN (@blocknote/shadcn): Recommended for projects that already use ShadCN components or Tailwind CSS.
Ariakit (@blocknote/ariakit): Recommended for projects which require unstyled components for the editor.

Create an editor

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

GitHub

StackBlitz

import "@blocknote/core/fonts/inter.css";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/mantine/style.css";

export default function App() {
  // Creates a new editor instance.
  const editor = useCreateBlockNote();

  // Renders the editor instance using a React component.
  return <BlockNoteView editor={editor} />;
}

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

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

In the demo above, the @blocknote/mantine/style.css stylesheet is imported to style the UI components. If your application already uses Mantine UI though, you should use the @blocknote/mantine/blocknoteStyles.css stylesheet instead. It only contains the styles added by BlockNote on top of the Mantine core styles, whereas @blocknote/mantine/style.css includes both.

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

Getting Started

Install

Create an editor

Usage in Mantine apps

Next steps

On this page

Learn

Collaborate

Community

Legal

Theme