BlockNote README

The project's README from github.com/TypeCellOS/BlockNote. As one markdown file: README.md.

TypeCell

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

Live demo

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

Example code (React)

npm version

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.

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.

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!

NLNet

Hosting and deployments powered by Vercel:

NLNet

This project is tested with BrowserStack

BlockNote (TypeCellOS/BlockNote)

Searching Database…

10.3K ·GitHub
BlockNote
这是什么?BlockNote 是一个开源的、基于块编辑模式的 React 富文本编辑器,编辑体验类似 Notion,底层基于 ProseMirror 和 Tiptap。你可以把它嵌入自己的应用里。
它是一个像 Notion 那样的独立应用,还是需要加到我代码里的东西?它是一个库,不是托管式应用:你通过 npm 安装 @blocknote/react,然后把编辑器组件嵌入你的 React 应用。界面自带完整的样式,不用额外加工看起来就很精致。
我怎么先试用一下,再把它加进我的项目?可以先在首页玩玩在线演示,或者浏览各种示例。准备好之后,添加 @blocknote/react 这个 npm 包,并在你的 React 应用里渲染编辑器组件。
我需要去学它底层用到的那些编辑器引擎吗?BlockNote 直接构建在 ProseMirror 和 Tiptap 之上,实时协作由 Yjs 提供——但它们都作为包的一部分一起发布,你不用自己去接线搭建。
我能在商业闭源产品里使用它吗?大部分可以:BlockNote 的主体采用 MPL-2.0 协议,允许商业和闭源使用,前提是对 BlockNote 自身源码文件的修改要公开发布。XL 系列包采用 GPL-3.0 协议——如果你无法遵守该协议,就需要购买商业授权。
这个编辑器开箱即用能做什么?内置了斜杠(/)菜单用于插入块、格式菜单、块的拖拽、用 Tab 和 Shift+Tab 进行嵌套和缩进、实用的占位提示,还有动画效果。
它支持实时协作吗?支持——实时协作是内置功能,底层由 Yjs 作为多人协作层来支撑。
What are similar projects?tiptap, ckeditor5, lexical, novel, slate, milkdown, puck, pell
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
Creator
TypeCellOS
Size
1.5 GB
Stars
10.3K
Updated
CommitOct 19Releasev0.56.0Oct 14
Age
4y
Commits · 90 Days