Web Dev Tools

Rich Text Editors

WYSIWYG, block-based, and markdown editors for the browser.

This is one of the deepest categories in the JS ecosystem. The right choice depends on whether you're building a Notion-style block editor, a Google-Docs-style document, a comment box, or a markdown editor.

  • Tiptap — by far the most popular ProseMirror wrapper. Headless, extensible, large ecosystem of extensions (tables, mentions, collab, AI). Free for the editor; some Pro extensions are paid; collab via Hocuspocus is free self-host.
  • ProseMirror — the underlying library. Use directly if you want maximum control.
  • Remirror — older Tiptap competitor, less active.

Lexical-based

  • Lexical — Meta's editor (powers Facebook comments). React-first, plugin-based, fast. Good fit for "comments" or "rich text fields" use cases.
  • Plate — React + Tailwind block editor on top of Slate/Lexical (Plate v40+ supports Lexical and Slate). shadcn-style copy-paste components.

Block editors (Notion-style)

  • BlockNote — Notion-style, opinionated, built on Tiptap. The fastest path to a Notion-feeling editor.
  • Plate — block editor toolkit; very flexible, you assemble it.
  • Editor.js — block editor; older but mature.
  • Outstatic / GitBook OSS / AppFlowy editor — bundled into other products.

Slate-based

  • Slate — react-only, very flexible, lower-level than Tiptap. Plate sits on top.

Markdown / code editors

  • Monaco Editor — the editor from VS Code. Best choice for code editing in a browser.
  • CodeMirror 6 — modular, fast, pluggable. Underlying tech for many markdown editors.
  • Milkdown — markdown editor on ProseMirror; middle ground between Tiptap and a true markdown editor.
  • MDXEditor — WYSIWYG MDX editor.
  • react-md-editor, Toast UI Editor — lighter markdown editors.

Specialty

  • Quill — older WYSIWYG; Quill 2 is a healthy refresh.
  • Trix (Basecamp) — minimalist WYSIWYG.

Pick this if…

  • Default rich-text in a React app: Tiptap.
  • Notion-style blocks fast: BlockNote.
  • Comments / messages / Facebook-style rich input: Lexical.
  • Code editing: Monaco.
  • Markdown editor: CodeMirror 6 (build) or Milkdown (WYSIWYG markdown).
  • You want shadcn-style copy-paste components: Plate.

On this page