Blocknote

A "Notion-style" block-based extensible text editor built on top of Prosemirror and Tiptap.
Alternatives To Blocknote
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Slate26,6943,49992312 hours ago686August 23, 2022577mitTypeScript
A completely customizable framework for building rich text editors. (Currently in beta.)
Tiptap18,5301366 hours ago198September 20, 2022244mitTypeScript
The headless editor framework for web artisans.
Affine13,861
6 hours ago167mpl-2.0TypeScript
There can be more than Notion and Miro. AFFiNE is a next-gen knowledge base that brings planning, sorting and creating all together. Privacy first, open-source, customizable and ready to use.
Oni11,47713 years ago6April 02, 2017518mitTypeScript
Oni: Modern Modal Editing - powered by Neovim
Awesome Lowcode11,264
2 days ago4cc0-1.0
国内低代码平台从业者交流
React Page9,134188 days ago304September 21, 202211mitTypeScript
Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.
Tinacms8,555561a day ago105September 21, 202284otherTypeScript
A headless CMS for Markdown
H5 Dooring7,298
a month ago29gpl-3.0JavaScript
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
Vditor6,03911173 days ago310August 04, 202282mitTypeScript
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
React Draft Wysiwyg6,000786337a month ago131July 17, 2022683mitJavaScript
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg
Alternatives To Blocknote
Select To Compare


Alternative Project Comparisons
Readme

TypeCell

Welcome to BlockNote! The open source Block-Based rich text editor. Easily add a modern text editing experience to your app.

Discord Matrix

Homepage - Introduction - Documentation

Live demo

Play with the editor @ https://blocknote-main.vercel.app/.

(Source in examples/editor)

Example code (React)

npm version

import { BlockNoteView, useBlockNote } from "@blocknote/react";
import "@blocknote/core/style.css";

function App() {
  const editor = useBlockNote({
    onEditorContentChange: (editor) => {
      // Log the document to console on every update
      console.log(editor.getJSON());
    },
  });

  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.

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).

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 or Matrix.

Contributing

See CONTRIBUTING.md for more info and guidance on how to run the project (TLDR: just use npm start).

Directory structure:

blocknote
 packages/core       - The core of the editor
 packages/react      - The main library for use in React apps
 examples/editor     - Example React app that embeds the editor
 examples/vanilla    - An advanced example if you don't want to use React or want to build your own UI components
 tests               - Playwright end to end tests

The codebase is automatically tested using Vitest and Playwright.

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

Popular Editor Projects
Popular Reactjs Projects
Popular Text Editors Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Javascript
Typescript
Reactjs
Editor
Wysiwyg
Rich Text Editor