Repository files navigation

Welcome to BlockNote! The open source Block-BasedReact 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 theexamples.

import{useCreateBlockNote}from"@blocknote/react";import{BlockNoteView}from"@blocknote/mantine";import"@blocknote/core/fonts/inter.css";import"@blocknote/mantine/style.css";functionApp(){consteditor=useCreateBlockNote();return<BlockNoteVieweditor={editor}/>;}

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

If you prefer to create your own UI components (menus), or don't want to use React, you can use@blocknote/core (advanced,see docs).

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, socome and say hi on Discord orMatrix.

SeeCONTRIBUTING.md for more info and guidance on how to run the project (TLDR: just usenpm start).

Directory structure:

blocknote├── packages/core       - The core of the editor├── packages/react      - The main library for use in React apps├── packages/mantine    - Mantine (default) implementation of BlockNote UI├── packages/ariakit    - AriaKit implementation of BlockNote UI├── packages/shadcn     - ShadCN / Tailwind / Radix implementation of BlockNote UI├── examples            - Example apps├── playground          - App to browse the example apps (https://playground.blocknotejs.org)└── tests               - Playwright end to end tests

The codebase is automatically tested using Vitest and Playwright.

BlockNote is licensed under theMPL 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.

BlockNote builds directly on two awesome projects;Prosemirror by Marijn Haverbeke andTiptap. Consider sponsoring those libraries when using BlockNote:Prosemirror,Tiptap.

BlockNote is built as part ofTypeCell. TypeCell is proudly sponsored by the renownedNLNet foundation who are on a mission to support an open internet, and protect the privacy and security of internet users. Check them out!

Hosting and deployments powered by Vercel:

This project is tested with BrowserStack