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

This guide uses the Mantine version of BlockNote's UI, which works great out-of-the-box. However, 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.

Mobile compatibility

If your app is used on touch devices, it's good practice to add interactive-widget=resizes-content to your page's viewport meta tag:

<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
/>

This isn't specific to BlockNote - it mitigates undesired behaviour that some browsers have when the virtual keyboard is open. For more on BlockNote's mobile UX, see the mobile Formatting Toolbar.

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