BlockNote Documentation

File: README.md Copy Chapter

Live demo

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

Example code (React)

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 ;
}

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

Features

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

Animations: Copy Section

Helpful placeholders: Copy Section

Drag and drop blocks: Copy Section

Nesting / indentation with tab and shift+tab: Copy Section

Slash (/) menu: Copy Section

Format menu: Copy Section

Real-time collaboration: Copy Section

Feedback 🙋‍♂️🙋‍♀️

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

Contributing 🙌

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.

License 📃

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.

Credits ❤️

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

BlockNote is built as part of TypeCell. TypeCell is proudly sponsored by the renowned NLNet 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

File: docs/README.md Copy Chapter

Website Development

This is the code for the BlockNote documentation website. If you're looking to work on BlockNote itself, check the packages folder.

To get started with development of the website, you can follow these steps:

1. Initialize the DB

If you haven't already, you can initialize the database with the following command:

cd docs && pnpm run init-db

This will initialize an SQLite database at ./docs/sqlite.db.

2. Setup environment variables

Copy the .env.example file to .env.local and set the environment variables.

cp .env.example .env.local

If you want to test logging in, or payments see more information below in the environment variables section.

3. Start the development server from within the ./docs directory.

pnpm run dev

This will start the development server on port 3000.

Environment Variables Copy Chapter

Logging in Copy Section

To test logging in, you can set the following environment variables:

AUTH_SECRET=test
# Github OAuth optionally
AUTH_GITHUB_ID=test
AUTH_GITHUB_SECRET=test

Note: the GITHUB_ID and GITHUB_SECRET are optional, but if you want to test logging in with Github you'll need to set them. For local development, you'll need to set the callback URL to http://localhost:3000/api/auth/callback/github

Payments Copy Section

To test payments, you can set the following environment variables:

POLAR_ACCESS_TOKEN=test
POLAR_WEBHOOK_SECRET=test

For testing payments, you'll need access to the polar sandbox which needs to be configured to point a webhook to your local server. This can be configured at: https://sandbox.polar.sh/dashboard/blocknote/settings/webhooks

You'll need something like ngrok to expose your local server to the internet.

ngrok http http://localhost:3000

You'll need the webhook to point to ngrok like so:

https://0000-00-00-000-00.ngrok-free.app/api/auth/polar/webhooks

With this webhook pointing to your local server, you should be able to test payments.

Email sending Copy Section

Note, this is not required, if email sending is not configured, the app will log the email it would send to the console. Often this is more convenient for development.

To test email sending, you can set the following environment variables:

SMTP_HOST=
SMTP_USER=
SMTP_PASS=
SMTP_PORT=
SMTP_SECURE=false

When configured, you'll be able to send emails to the email address you've configured.

To setup with protonmail, you'll need to go to https://account.proton.me/u/0/mail/imap-smtp and create a new SMTP submission token.

You'll need to set the following environment variables:

SMTP_HOST=smtp.protonmail.com
[email protected]
SMTP_PASS=my-smtp-token
SMTP_PORT=587
SMTP_SECURE=false

Contributing

To submit your changes, open a pull request to the BlockNote GitHub repo. Pull requests will automatically be deployed to a preview environment.