Project Name | Stars | Downloads | Repos Using This | Packages Using This | Most Recent Commit | Total Releases | Latest Release | Open Issues | License | Language |
---|---|---|---|---|---|---|---|---|---|---|
Slate | 27,120 | 3,499 | 923 | 5 days ago | 686 | August 23, 2022 | 595 | mit | TypeScript | |
A completely customizable framework for building rich text editors. (Currently in beta.) | ||||||||||
Tiptap | 19,191 | 136 | 3 days ago | 198 | September 20, 2022 | 236 | mit | TypeScript | ||
The headless editor framework for web artisans. | ||||||||||
Awesome Lowcode | 11,717 | 5 hours ago | 5 | cc0-1.0 | ||||||
国内低代码平台从业者交流 | ||||||||||
Oni | 11,477 | 1 | 3 years ago | 6 | April 02, 2017 | 518 | mit | TypeScript | ||
Oni: Modern Modal Editing - powered by Neovim | ||||||||||
React Page | 9,186 | 18 | 18 days ago | 304 | September 21, 2022 | 8 | mit | TypeScript | ||
Next-gen, highly customizable content editor for the browser - based on React and written in TypeScript. WYSIWYG on steroids. | ||||||||||
Tinacms | 8,843 | 5 | 61 | 3 days ago | 105 | September 21, 2022 | 84 | other | TypeScript | |
The Markdown CMS | ||||||||||
H5 Dooring | 7,298 | 3 months ago | 29 | gpl-3.0 | JavaScript | |||||
H5 Page Maker, H5 Editor, LowCode. Make H5 as easy as building blocks. | 让H5制作像搭积木一样简单, 轻松搭建H5页面, H5网站, PC端网站,LowCode平台. | ||||||||||
Vditor | 6,339 | 11 | 17 | 8 hours ago | 310 | August 04, 2022 | 79 | mit | TypeScript | |
♏ 一款浏览器端的 Markdown 编辑器,支持所见即所得(富文本)、即时渲染(类似 Typora)和分屏预览模式。An In-browser Markdown editor, support WYSIWYG (Rich Text), Instant Rendering (Typora-like) and Split View modes. | ||||||||||
React Data Grid | 6,059 | 441 | 206 | 4 hours ago | 1,017 | September 16, 2022 | 157 | other | TypeScript | |
Feature-rich and customizable data grid React component | ||||||||||
React Draft Wysiwyg | 6,031 | 786 | 337 | 2 months ago | 131 | July 17, 2022 | 695 | mit | JavaScript | |
A Wysiwyg editor build on top of ReactJS and DraftJS. https://jpuri.github.io/react-draft-wysiwyg |
Welcome to BlockNote! The open source Block-Based rich text editor. Easily add a modern text editing experience to your app.
Homepage - Introduction - Documentation
Play with the editor @ https://blocknote-main.vercel.app/.
(Source in examples/editor)
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).
BlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app:
We'd love to hear your thoughts and see your experiments, so come and say hi on Discord or Matrix.
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.
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!
Hosting and deployments powered by Vercel: