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
Slate27,1203,4999235 days ago686August 23, 2022595mitTypeScript
A completely customizable framework for building rich text editors. (Currently in beta.)
Tiptap19,1911363 days ago198September 20, 2022236mitTypeScript
The headless editor framework for web artisans.
Awesome Lowcode11,717
5 hours ago5cc0-1.0
国内低代码平台从业者交流
Oni11,47713 years ago6April 02, 2017518mitTypeScript
Oni: Modern Modal Editing - powered by Neovim
React Page9,1861818 days ago304September 21, 20228mitTypeScript
Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids.
Tinacms8,8435613 days ago105September 21, 202284otherTypeScript
The Markdown CMS
H5 Dooring7,298
3 months ago29gpl-3.0JavaScript
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台.
Vditor6,33911178 hours ago310August 04, 202279mitTypeScript
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes.
React Data Grid6,0594412064 hours ago1,017September 16, 2022157otherTypeScript
Feature-rich and customizable data grid React component
React Draft Wysiwyg6,0317863372 months ago131July 17, 2022695mitJavaScript
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