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

On touch devices, BlockNote's UI adapts on its own: specifically, the Formatting Toolbar moves above the on-screen keyboard. Two things are still worth doing in your app to ensure smooth positioning of the toolbar in relation to the on-screen keyboard:

First, we recommend adding 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 tells the browser to lay out the page in the space above the keyboard, instead of leaving part of it behind the keyboard. That lets BlockNote position the toolbar there reliably and without jitter.

Second, iOS doesn't support that tag, so scrolling can still feel choppy there. We recommend the scroll container layout to fix this.

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