## File: README.md # Live demo See our homepage @ [https://www.blocknotejs.org](https://www.blocknotejs.org/) or browse the [examples](https://www.blocknotejs.org/examples). # Example code (React) [](https://badge.fury.io/js/%40blocknote%2Freact) ```typescript 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: ### Helpful placeholders: ### Drag and drop blocks: ### Nesting / indentation with tab and shift+tab: ### Slash (/) menu: ### Format menu: ### Real-time collaboration: # Feedback 🙋‍♂️🙋‍♀️ We'd love to hear your thoughts and see your experiments, so [come and say hi on Discord](https://discord.gg/Qc2QTTH5dF). # Contributing 🙌 See [CONTRIBUTING.md](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](LICENSE-MPL.txt), 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](https://fossa.com/blog/open-source-software-licenses-101-mozilla-public-license-2-0/). 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](https://www.blocknotejs.org/pricing) for more information. # Credits ❤️ BlockNote builds directly on two awesome projects; [Prosemirror](https://prosemirror.net/) by Marijn Haverbeke and [Tiptap](https://tiptap.dev/). Consider sponsoring those libraries when using BlockNote: [Prosemirror](https://marijnhaverbeke.nl/fund/), [Tiptap](https://github.com/sponsors/ueberdosis). BlockNote is built as part of [TypeCell](https://www.typecell.org). TypeCell is proudly sponsored by the renowned [NLNet foundation](https://nlnet.nl/foundation/) who are on a mission to support an open internet, and protect the privacy and security of internet users. Check them out! [](https://nlnet.nl) Hosting and deployments powered by Vercel: [](https://vercel.com/?utm_source=TypeCell&utm_campaign=oss) This project is tested with BrowserStack --- ## File: docs/README.md # Website Development This is the code for the [BlockNote documentation website](https://www.blocknotejs.org). If you're looking to work on BlockNote itself, check the [`packages`](/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: ```bash 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. ```bash cp .env.example .env.local ``` If you want to test logging in, or payments see more information below [in the environment variables section](#environment-variables). 3. Start the development server from within the `./docs` directory. ```bash pnpm run dev ``` This will start the development server on port 3000. ## Environment Variables ### Logging in To test logging in, you can set the following environment variables: ```bash 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 To test payments, you can set the following environment variables: ```bash 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: You'll need something like [ngrok](https://ngrok.com/) to expose your local server to the internet. ```bash 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 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: ```bash 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 and create a new SMTP submission token. You'll need to set the following environment variables: ```bash SMTP_HOST=smtp.protonmail.com SMTP_USER=my.email@protonmail.com 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](https://github.com/TypeCellOS/BlockNote). Pull requests will automatically be deployed to a preview environment.