Welcome to BlockNote! The open source Block-Based React rich text editor. Easily add a modern text editing experience to your app.

Homepage - Documentation - Quickstart - Examples

See our homepage @ https://www.blocknotejs.org or browse the examples.

import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";
import "@blocknote/core/fonts/inter.css";
import "@blocknote/mantine/style.css";

function App() {
  const editor = useCreateBlockNote();

  return <BlockNoteView editor={editor} />;
}

@blocknote/react comes with a fully styled UI that makes it an instant, polished editor ready to use in your app.

BlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app:

We'd love to hear your thoughts and see your experiments, so come and say hi on Discord.

See CONTRIBUTING.md for more info and guidance on how to run the project (TLDR: just use pnpm start).

The codebase is automatically tested using Vitest and Playwright.

BlockNote is 100% Open Source Software. The majority of BlockNote is licensed under the MPL-2.0 license, which allows you to use BlockNote in commercial (and closed-source) applications. If you make changes to the BlockNote source files, you're expected to publish these changes so the wider community can benefit as well. Learn more.

The XL packages (source code in the packages/xl-* directories and published in NPM as @blocknote/xl-*) are licensed under the GPL-3.0. If you cannot comply with this license and want to use the XL libraries, you'll need a commercial license. Refer to our website for more information.

BlockNote builds directly on two awesome projects;