Getting Started
Forms
Components
78
Libraries
Headless Editor
Headless Editor is the rich text engine behind NgStarter editors. It gives you a signal-based editor service, a versioned JSON document, a contenteditable surface that keeps the DOM and native selection in sync with that document, undo history, and a small plugin contract. It ships no visual design: layout, toolbars, menus, and styles belong to your application.
Everything is exported from @ngstarter-ui/components/headless-editor.
Live example
A formatting toolbar, block types, undo and redo, and keyboard shortcuts, all built from plain Angular markup on top of the headless core.
Loading example…
When to use it
- You need an editing experience with your own layout, toolbar, and styling.
- Content must be stored and exchanged as structured JSON rather than HTML strings.
- You want to add custom inline formats, block types, or embedded Angular components.
- You are building a product-specific editor: notes, announcements, task descriptions, templates.
If a finished comment composer is enough, use Comment Editor, which is built on this engine. For page-like documents assembled from rich blocks, see Content Editor.
How it fits together
- Document model: immutable, versioned JSON made of blocks, text runs, and marks.
- NgsHeadlessEditor: a scoped service holding the document, selection, and history as signals, with editing operations.
- Plugins: typed objects that register blocks, marks, commands, key bindings, paste handling, services, and lifecycle hooks.
- ngsHeadlessEditorSurface: turns browser input into editor operations and renders the document, re-rendering only the blocks that changed.
- ngsHeadlessEditorCommand: binds commands to toolbar controls with active and disabled state.
Features
- Signals for document, selection, focus, read-only, history, and change origin.
- Inline marks with attributes: bold, italic, strike, code, text and background color, or your own.
- Text blocks and atomic blocks, including blocks rendered by Angular components.
- Tables with formatted cells, row, column, and header commands, and paste from spreadsheets.
- Undo and redo with word-level grouping and keyboard shortcuts.
- Word and line deletion, spellcheck replacements, IME composition, drag and drop, and plain-text paste.
- Layout-independent shortcuts: bindings resolve on non-Latin keyboard layouts too.
- Keyed rendering that keeps unchanged blocks untouched while typing.
- SSR-safe: DOM work starts after the first browser render.
Guides
Getting StartedCreate an editor, render it, and read its value.Document ModelBlocks, text runs, marks, selections, and normalization.Surface and InputBrowser input, rendering, styling, and floating menus.Commands and ToolbarTyped commands, toolbar state, and key bindings.Marks and FormattingInline formats, attributes, and stored marks.BlocksHeadings, lists, code lines, and atomic blocks.Component BlocksEmbed Angular components in the document.TablesTables with row and column commands and spreadsheet paste.PluginsPaste handling, services, lifecycle, and runtime plugins.MentionsCaret menus with custom Angular option components.Selection and HistoryProgrammatic selection and undo grouping.Forms and SerializationReactive forms, validation, JSON, HTML, and text.ApiReference for every exported symbol.