Domternal - Lightweight Editor Toolkit

What is Domternal?

Domternal is a lightweight, extensible editor toolkit with a clean extension API, optional UI components, and first-class TypeScript support. Built on ProseMirror, a proven and widely adopted library for structured content editing. The core is framework-agnostic and headless. It handles the document model, extensions, and commands with zero UI opinions.

Domternal provides pre-built UI components (toolbar, bubble menu, floating menu) with a default icon set. If you use them, you get a fully functional editor out of the box. If you don’t, they are tree-shaken away (your bundler automatically strips unused code, reducing the final bundle size). Your bundle only includes what you import.

Why Domternal?

• Lightweight. A full-featured editor with StarterKit, toolbar, bubble menu, and theme weighs only ~116 KB gzipped. Need just the core? Even less. You ship exactly what your app requires, nothing more.
• Themeable. Install the optional @domternal/theme package for ready-made light and dark themes, or style everything yourself with CSS custom properties.
• Zero-config to full customization. Drop in StarterKit and the default theme for a working editor in minutes. Need more control? Every extension accepts options, every command is overridable, and the full ProseMirror API is always accessible underneath.
• Tree-shakeable. Every extension, node, and mark is a separate entry point. Import only what you use. Unused code is automatically removed from the final bundle, keeping it as small as possible.
• TypeScript all the way. Every schema, command, and extension option is fully typed. Catch mistakes at compile time, get autocompletion everywhere, and never deal with any escape hatches.

Framework support

The core works with vanilla JavaScript, TypeScript, or any framework that renders to the DOM. Ready-made framework bindings currently ship for Angular (17+), with React and Vue planned next.

Core Concepts

Everything in Domternal is built from three primitives. Mix and match them to compose exactly the editor you need.

• Nodes define the structure of your document. Block-level nodes like Paragraph, Heading, Table, and Image make up the content tree. Each node declares how it renders to the DOM and how it parses back from HTML.

• Marks are inline formatting that attaches to text. Bold, Italic, Link, Code, and more. Marks stack freely, so a word can be bold, italic, and linked at the same time.

• Extensions add behavior without adding new content types. Keyboard shortcuts, input rules, undo/redo, placeholder text, text alignment, drag-and-drop cursors. If it changes how the editor works rather than what it contains, it is an extension.

Packages

Domternal is split into focused packages. Install only the ones your project needs.

Package	Description
@domternal/core	Editor engine with 13 nodes, 9 marks, 25 extensions, chainable command API, and optional toolbar, bubble menu, and floating menu
@domternal/theme	Light and dark themes with 70+ CSS custom properties for full visual control
@domternal/angular	Standalone Angular components: editor, toolbar, bubble menu, floating menu, emoji picker
@domternal/pm	Single-import access to all ProseMirror packages (state, view, model, transform, and more)
@domternal/extension-table	Full-featured tables with cell merging, column resize, row/column controls, and cell selection
@domternal/extension-image	Image insertion via URL, paste from clipboard, or drag-and-drop with a dedicated bubble menu
@domternal/extension-emoji	Emoji picker panel and inline :shortcode: autocomplete
@domternal/extension-mention	@mention autocomplete with customizable suggestion list
@domternal/extension-details	Collapsible details/accordion blocks with open/closed toggle
@domternal/extension-code-block-lowlight	Syntax-highlighted code blocks powered by lowlight with language auto-detection