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/mantineCreating an Editor
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).
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
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
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