Headless-first
The core does not depend on Angular Material. The professional UI is opt-in and replaceable by your app.
svg-engine
The embeddable SVG editor for Angular — headless on the inside, professional on the outside.
Angular v21Headless-first9 entry pointsApache-2.0pre-1.0
Why svg-engine?
Section titled “Why svg-engine?”svg-engine is a plugin-extensible editor core where the data model, rendering, editing services and Material UI are separate entry points. You compose only what your app needs — from a read-only renderer to a full professional editor — and the editing engine never forces a UI on you.
Import only what you need
Independent, lazy-loadable entry points — from a minimal viewer to a full editor.
Immutable model + signals
Reactive state with signal/computed; every mutation produces a new tree.
Automatic undo via the Command pattern.
Extensible via plugins
Plugin categories for renderers, tools, importers/exporters, effects, palettes, menus and more — no core fork required.
Compose only what you need
Section titled “Compose only what you need”The library ships as the scoped package @mosaicoo/svg-engine; each secondary
entry point (@mosaicoo/svg-engine/<name>) is independent and lazy-loadable.
Consuming core does not pull in rendering, editing, UI or the AI layer.
| Layer | Entry points | Material UI |
|---|---|---|
| Headless core | core · render · io · optimize · edit | No |
| Professional UI | ui | Opt-in |
| AI (opt-in) | ai/nlu · ai/nlu-ui · ai/nlu-voice-wasm | Partial |
See all entry points
A professional editing surface
Section titled “A professional editing surface”The optional editor reaches a feature set comparable to desktop vector tools — all built on the same headless engine.
Draw
Select / Direct-Select, Pen and Pencil, shape tools, rich-text (variable fonts, text-on-path), plus Eyedropper, Knife, Width and Symbol Sprayer.
Edit geometry
Path/Anchor editor (cusp / smooth / symmetric), Pathfinder boolean ops, path operations (simplify / join / outline stroke / offset), live corners and compound paths.
Compose documents
Pages / artboards, layers, Smart Objects, symbols and instances, version snapshots, auto-save and recovery.
Style
Non-destructive, chainable effects and filters, gradients with an inline editor, patterns, and a libraries system (shapes, palettes, gradients, patterns, symbols, brushes, graphic styles, templates).
Stay productive
Find & Replace, align / distribute, customizable keyboard shortcuts, auto-trace (raster → vector), code generators, per-asset export and an animation timeline.
Command by voice (opt-in)
Natural-language command input and on-device speech-to-text (Whisper) — fully optional and decoupled from the editor core.
Architectural guarantees
Section titled “Architectural guarantees”Headless boundary
core, render, io, optimize and edit have zero dependency on
@angular/material or @angular/cdk. Material lives only in ui.
Immutable model
Every mutation produces a new tree (structural sharing). Undo is a snapshot and replay, not a fragile delta system.
Command pattern
Every mutation routes through a single CommandBus, so undo/redo comes for
free and stays consistent.
OnPush everywhere
Every component uses ChangeDetectionStrategy.OnPush; reactive state is
signal/computed, with no Subjects in the public API.
Get started
Section titled “Get started”Published on npm as the scoped package @mosaicoo/svg-engine:
npm install @mosaicoo/svg-engine @angular/core@^21Apache-2.0, with just two runtime dependencies (polygon-clipping, tslib);
Angular Material and the AI/voice packages are optional peers. The library
is covered by 3,012 tests, and changes are tracked in the
changelog and
GitHub releases.