Quickstart
Getting started with BlockNote is quick and easy. Install the required packages and add the React component to your app.
Installing with NPM
To install BlockNote with NPM (opens in a new tab), run:
npm install @blocknote/core @blocknote/reactCreating an Editor
With the useCreateBlockNote hook, we can create a new editor instance, then use theBlockNoteView component to render it. See below:
import { useCreateBlockNote } from "@blocknote/react";
import "@blocknote/core/fonts/inter.css";
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} />;
}
We also import @blocknote/react/style.css to add default styling for the editor and the Inter font that BlockNote exports (optional).
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
It's also possible to use BlockNote without React, using "vanilla" JavaScript or other frameworks. Read our guide on using BlockNote without React
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