import { Example } from "@/components/example"; import { Callout } from "nextra/components";

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

To install BlockNote with NPM, run:

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

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

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

<Callout type="warning" emoji={""}> 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](/docs/nextjs)

<Callout type="warning" emoji={""}> 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](/docs/vanilla-js){" "}

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