Editor Awesome

Web Editor

tip

• 推荐👍 Lexical, Tiptap, QuillJS
• React 优先建议选择 Lexical，否则考虑 tiptap/prosemirror

• prosemirror
  • 实现 Editor 的基础库
• tiptap
• React
  • facebook/lexical
    • by Facebook, 替代 draftjs
    • https://news.ycombinator.com/item?id=31019778
    • ozanyurtsever/verbum
  • udecode/plate
    • MIT, TS, React
    • 基于 Slate
  • slatejs
  • draft.js
    • 使用 immutable-js 管理状态
    • sstur/react-rte
    • jpuri/react-draft-wysiwyg
  • editablejs/editable
    • Apache-2.0, TS, React
  • lovasoa/react-contenteditable
    • Apache-2.0, React ContentEditable
    • 非常简单的 ContentEditable 封装
• slab/quill
  • BSD-3, TS
  • Quill is a modern WYSIWYG editor built for compatibility and extensibility.
  • zenoamaro/react-quill
    • npm:react-quill
  • gtgalone/react-quilljs
    • npm:react-quilljs
    • 建议拷贝出来用，就一个 hook
• tinymce/tinymce
  • GPLv2
  • The world's most popular JavaScript library for rich text editing
  • What happened to TinyMCE's license? #9453
    • TinyMCE v7 变更为 GPLv2
    • MIT -> GPLv2
    • hugemce/hugemce
  • CKEditor -> TinyMCE
    • 以前的迁移方向，现在 TinyMCE 也是 GPLv2 了
    • CKEditor license 问题
• ckeditor/ckeditor5
  • GPLv2, JS
  • https://ckeditor.com/
• https://github.com/JefMari/awesome-wysiwyg
• sofish/pen
  • enjoy live editing (+markdown)
• benjamn/kix-standalone
  • google doc editor - 2010 - archived
• red-axe/am-editor
  • 富文本实时协同编辑器框架
• Video
  • redotvideo/revideo
  • motion-canvas/motion-canvas

Collaborative

• 主要功能
  • Text Editor / CRDT
  • Comment
  • Presence
  • Room

---

• yjs
• automerge
• partykit/partykit
  • MIT, TS
  • simplifies developing multiplayer applications
  • hosting platform for globally distributed, stateful, on-demand, programmable web servers
• liveblocks/liveblocks
  • Apache-2.0, TS
  • 只是客户端，不能 SelfHost #682

Image Editor

• steffest/DPaint-js

Media

• layerhub-io/react-design-editor
  • MIT, TS, React
  • Image, Presentation and Video editor. React design editor using fabric.js. Canva clone
• bharathreddyza/react-design-editor

Code Editor

• monaco
• codemirror
  • adoption
  • We are rewriting CodeMirror
• satya164/react-simple-code-editor
  • works by overlaying a syntax highlighted <pre> block over a <textarea>
  • 限制
    • 必须字体相同
    • undo 栈与浏览器不一致 - 大部分编辑器都有这样的问题
    • 没有针对性能优化 - 大文档会慢
• Comparison of JavaScript-based source code editors

Flow Editor

• https://stately.ai/registry/new
  • XState

Markdown

• outline/rich-markdown-editor
  • Outline Prosemirror 编辑器
  • 支持 / 命令
  • 类 block 编辑器
• Tencent/cherry-markdown
• bytedance/bytemd
  • Svelte
  • 提供 React, Vue
• Saul-Mirone/milkdown
  • prosemirror+remark

Hex

• https://hexed.it/
• WerWolv/ImHex
  • GPLv2, C++

Block

• TypeCellOS/BlockNote
  • MPLv2, TS, React
  • 基于 tiptap，prosemirror
  • UI mantine, shadcn
• codex-team/editor.js
  • Apache-2.0, Typescript
  • Native、不依赖框架 - gzip 50kB
  • editor-js/awesome-editorjs
• Darginec05/Yoopta-Editor
  • 基于 slate
• appleple/smartblock
  • React+ProseMirror
  • 不活跃
• WordPress/gutenberg
  • GPLv2, MPLv2
  • Automattic/isolated-block-editor
    • 去除 WordPress 依赖
  • lukecav/awesome-blocks
    • for WordPress Gutenberg
• tobi4120/notion-clone
• 参考
  • https://open.feishu.cn/document/server-docs/docs/docs-overview
  • https://developers.notion.com/reference/block

Builder

• Page Builder
• Report Builder
• Form Builder
• Component Builder
• 难点
  • 状态管理
  • 序列化
  • 框架集成
  • 数据接入

---

• premieroctet/openchakra
• plasmicapp/plasmic
  • MIT, TS
• BuilderIO/mitosis
  • MIT, TS
  • React, Vue, Qwik, Solid, Angular, Svelte
• prevwong/reka.js
  • MIT, TS
  • State management system to build any no-code editor
• prevwong/craft.js
  • React
• react-page/react-page Next-gen, highly customizable content editor for the browser - based on React and Redux. WYSIWYG on steroids.
  • MIT, TypeScript+React
  • 整页编辑
  • 耦合 mui
• alibaba/designable
• tinacms
• measuredco/puck
  • MIT, React

商业

• https://codyhouse.co/
• builderio

IDE/Code

• codemirror
• DTStack/molecule

Misc

• viebel/klipse
  • eval languages
• ekzhang/rustpad minimal collaborative code editor
  • MIT, Rust
• wereturtle/ghostwriter
  • GPL-3.0, C++
• https://github.com/TryGhost/Admin/tree/main/lib/koenig-editor
• Rich text / HTML editors and frameworks

Prototyping

• Prototype 场景
  • 2D 像素纬度 - 输出 SVG 或 设计稿 - 实现相对简单
    • 类似 PS，SVG 编辑器
  • Low Code - 部分控制
  • HTML - CMS
    • 编排 HTML 元素，所见即所得 - 需要处理复杂布局逻辑
    • 编辑组件、绑定数据 - 交互复杂

---

• React-Proto/react-proto
• https://openclipart.org/
  • Public Domain
• akiraux/Akira
  • Vala
  • Native Linux App for UI and UX Design built in Vala and GTK
• react-studio

View

• mac-s-g/react-json-view

Flow / NodeEditor

• react-flow
• retejs/rete
  • MIT
  • modular framework for visual programming
• DrawIO
• BPMN.js

Game/Studio

• raverie-us/raverie-engine
  • C++, WASM
  • aims to recreate the Macromedia/Adobe Flash experience of old
  • https://raverie-us.github.io/raverie-engine/
• https://editor.godotengine.org/

Model/Spec/Schema

设计/扩展 RichText Editor 的核心是理解文档模型

• markdown
• rst
• asciidoc
• portabletext/portabletext
  • Sanity.io 定义的规范
• https://docs.slatejs.org/v/v0.47/guides/data-model
• editor-js/document-model
• ProseMirror/prosemirror-model
• Low Code Design
• https://www.builder.io/c/docs/models-intro
• https://avuejs.com/
  • 写好模板配数据
• https://www.notion.so/blog/data-model-behind-notion

Glossary

• MIS - 管理信息系统
  • 大多为 Table+Form