Editor Awesome
Web Editor
- prosemirror
- 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 封装
- facebook/lexical
- quilljs/quill
- Quill is a modern WYSIWYG editor built for compatibility and extensibility.
- zenoamaro/react-quill
- tinymce/tinymce
- The world's most popular JavaScript library for rich text editing
- 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
- 富文本实时协同编辑器框架
Image Editor
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
- satya164/react-simple-code-editor
- works by overlaying a syntax highlighted
<pre>block over a<textarea> - 限制
- 必须字体相同
- undo 栈与浏览器不一致 - 大部分编辑器都有这样的问题
- 没有针对性能优化 - 大文档会慢
- works by overlaying a syntax highlighted
- Comparison of JavaScript-based source code editors
Flow Editor
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
- UI mantine - bundle 非常大
- codex-team/editor.js
- Apache-2.0, Typescript
- Native、不依赖框架 - gzip 50kB
- editor-js/awesome-editorjs
- appleple/smartblock
- React+ProseMirror
- 不活跃
- WordPress/gutenberg
- GPLv2, MPLv2
- Automattic/isolated-block-editor
- 去除 WordPress 依赖
- tobi4120/notion-clone
Builder
- Page Builder
- Report Builder
- Form Builder
- Component Builder
- 难点
- 状态管理
- 序列化
- 框架集成
- 数据接入
- 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 元素，所见即所得 - 需要处理复杂布局逻辑
- 编辑组件、绑定数据 - 交互复杂
- 2D 像素纬度 - 输出 SVG 或 设计稿 - 实现相对简单
- 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
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