A lightweight, extensible rich text editor toolkit built on ProseMirror. Framework-agnostic headless core with first-class Angular, React, Vue, and Vanilla wrappers. Use it headless with vanilla JS/TS, add the built-in toolbar and theme, or drop in ready-made framework components. Fully tree-shakeable, import only what you use, unused extensions are stripped from your bundle.
Website · Getting Started · Packages & Bundle Size
StackBlitz (Angular) · StackBlitz (React) · StackBlitz (Vue) · StackBlitz (Vanilla TS)
- Headless core - use with any framework or vanilla JS/TS
- Angular components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker (signals, OnPush, zoneless-ready)
- React components - composable
Domternalcomponent, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (React 18+) - Vue components - composable
Domternalcomponent,useEditor/useEditorStatecomposables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, custom node views (Vue 3.3+) - Vanilla wrapper - framework-free class-based API for Astro, Svelte, Solid, plain HTML, and Web Components - editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker
- Notion-style block UX - drag-to-reorder, block context menu, slash command, smart paste, keyboard reorder, floating Table of Contents
- 65+ extensions across 15 packages - nodes, marks, and behavior extensions
- 120+ chainable commands -
editor.chain().focus().toggleBold().run() - Full table support - cell merging, column resize, row/column controls, cell toolbar, all free and MIT licensed
- Tree-shakeable - import only what you use, your bundler strips the rest
- ~44 KB gzipped (own code), ~117 KB total with ProseMirror - see Packages for full bundle breakdown
- TypeScript first - 100% typed, zero
any - 15,000+ tests - 4,000+ unit and 11,000+ E2E across 230+ Playwright specs and 4 demo apps
- Light and dark theme - 70+ CSS custom properties for full visual control
- Inline styles export -
getHTML({ styled: true })produces inline CSS ready for email clients, CMS, and Google Docs - SSR helpers -
generateHTML,generateJSON,generateTextfor server-side rendering
pnpm add @domternal/coreimport { Editor, Document, Text, Paragraph, Bold, Italic, Underline } from '@domternal/core';
const editor = new Editor({
element: document.getElementById('editor')!,
extensions: [Document, Text, Paragraph, Bold, Italic, Underline],
content: '<p>Hello <strong>World</strong>!</p>',
});Import only what you need for full control and zero bloat. Use StarterKit for a batteries-included setup with headings, lists, code blocks, history, and more.
Getting Started Guide - headless core, themed UI with toolbar, and Angular/React/Vue component setup
StackBlitz (Angular) - full Angular example with all extensions, toolbar, and bubble menu
StackBlitz (React) - full React example with composable components, toolbar, and bubble menu
StackBlitz (Vue) - full Vue example with composable components, toolbar, and bubble menu
StackBlitz (Vanilla TS) - full vanilla example with toolbar, bubble menu, and all extensions
| Package | Description |
|---|---|
@domternal/core |
Editor engine with 13 nodes, 9 marks, 27 extensions, toolbar controller, and 49 built-in icons |
@domternal/theme |
Light and dark themes with 70+ CSS custom properties |
@domternal/angular |
6 Angular components: editor, toolbar, bubble menu, floating menu, emoji picker, notion color picker |
@domternal/react |
React 18+ wrapper: composable component, toolbar, bubble menu, floating menu, emoji picker, notion color picker, node views |
@domternal/vue |
Vue 3.3+ wrapper: composable component, composables, toolbar, bubble menu, floating menu, emoji picker, notion color picker, node views |
@domternal/vanilla |
Framework-free class-based wrapper for Astro, Svelte, Solid, plain HTML, and Web Components |
@domternal/pm |
ProseMirror re-exports (state, view, model, transform, commands, keymap, history, tables, and more) |
@domternal/extension-block-menu |
Notion-style block UX: block handle, context menu, drag-to-reorder, keyboard reorder, slash command, smart paste |
@domternal/extension-toc |
Notion-style Table of Contents: floating outline, inline /toc block, scrollToHeading command |
@domternal/extension-table |
Tables with 18 commands: merge, split, resize, cell styling, row/column controls |
@domternal/extension-image |
Image with paste/drop upload, URL input, XSS protection, bubble menu |
@domternal/extension-emoji |
Emoji picker panel and :shortcode: autocomplete |
@domternal/extension-mention |
@mention autocomplete with multi-trigger and async support |
@domternal/extension-details |
Collapsible details/accordion blocks |
@domternal/extension-code-block-lowlight |
Syntax-highlighted code blocks powered by lowlight |
See Packages & Bundle Size for a full breakdown of what each package includes and how tree-shaking works.
Full documentation, live playgrounds, and API reference at domternal.dev.
- Getting Started - install and create your first editor
- Introduction - core concepts, architecture, and design decisions
- Packages & Bundle Size - what each package includes and bundle size breakdown
See CONTRIBUTING.md for commit conventions, PR guidelines, and development setup.
pnpm install # Install dependencies
pnpm build # Build all packages
pnpm test # Run tests
pnpm lint # Run linter
pnpm typecheck # Type checkRequires Node.js >= 20 and pnpm >= 10.
