What is this?
BlockNote is an open source block-based rich text editor for React with a Notion-style editing experience, built on top of ProseMirror and Tiptap. You embed it in your own app.
BlockNote is an open source block-based rich text editor for React with a Notion-style editing experience, built on top of ProseMirror and Tiptap. You embed it in your own app.Is this a standalone app like Notion, or something I add to my code?It's a library, not a hosted app: you install @blocknote/react from npm and embed the editor component in your React application. The UI comes fully styled, so it looks polished without extra work.
It's a library, not a hosted app: you install @blocknote/react from npm and embed the editor component in your React application. The UI comes fully styled, so it looks polished without extra work.How do I try it and then get it into my project?Start with the live demo on the homepage or browse the examples. When ready, add the @blocknote/react npm package and render the editor component in your React app.
Start with the live demo on the homepage or browse the examples. When ready, add the @blocknote/react npm package and render the editor component in your React app.Do I need to learn the editor engines it's built on?BlockNote is built directly on ProseMirror and Tiptap, and real-time collaboration is powered by Yjs — but they ship as part of the package, so you don't wire them up yourself.
BlockNote is built directly on ProseMirror and Tiptap, and real-time collaboration is powered by Yjs — but they ship as part of the package, so you don't wire them up yourself.Can I use it in a commercial, closed-source product?Yes for most of it: the majority of BlockNote is MPL-2.0, which allows commercial and closed-source use, with the expectation that changes to BlockNote's own source files get published. The XL packages are GPL-3.0 — if you can't comply with that, they require a commercial license.
Yes for most of it: the majority of BlockNote is MPL-2.0, which allows commercial and closed-source use, with the expectation that changes to BlockNote's own source files get published. The XL packages are GPL-3.0 — if you can't comply with that, they require a commercial license.What does the editor do out of the box?A slash (/) menu for inserting blocks, a format menu, drag and drop of blocks, nesting and indentation with Tab and Shift+Tab, helpful placeholders, and animations are all built in.
A slash (/) menu for inserting blocks, a format menu, drag and drop of blocks, nesting and indentation with Tab and Shift+Tab, helpful placeholders, and animations are all built in.Does it support real-time collaboration?Yes — real-time collaboration is a built-in feature, with Yjs as the multiplayer layer underneath.
Yes — real-time collaboration is a built-in feature, with Yjs as the multiplayer layer underneath.Which topics is it in?notion, rich-text-editor, wysiwyg, drag-and-drop, text-editor, collaboration, editor, component-library, real-time, ui-components, ui, gplv3
notion, rich-text-editor, wysiwyg, drag-and-drop, text-editor, collaboration, editor, component-library, real-time, ui-components, ui, gplv3