Headless-first
El núcleo no depende de Angular Material. La UI profesional es opt-in y reemplazable por tu app.
svg-engine
El editor de SVG embebible para Angular — headless por dentro, profesional por fuera.
Angular v21Headless-first9 entry pointsApache-2.0pre-1.0
¿Por qué svg-engine?
Sección titulada «¿Por qué svg-engine?»svg-engine es un núcleo de editor extensible por plugins, donde el modelo de datos, el render, los servicios de edición y la UI Material son entry points separados. Compones solo lo que tu app necesita — desde un renderer de solo lectura hasta un editor profesional completo — y el engine de edición nunca te impone una UI.
Importa solo lo necesario
Entry points independientes y lazy-loadable — desde un visor mínimo hasta un editor completo.
Modelo inmutable + signals
Estado reactivo con signal/computed; cada mutación produce un nuevo
árbol. Undo automático mediante el patrón Command.
Extensible por plugins
Categorías de plugin para renderers, tools, importers/exporters, efectos, paletas, menús y más — sin hacer fork del core.
Compón solo lo que necesites
Sección titulada «Compón solo lo que necesites»Cada entry point secundario es independiente y lazy-loadable. Consumir core
no arrastra render, edición, UI ni la capa de IA.
| Capa | Entry points | UI Material |
|---|---|---|
| Núcleo headless | core · render · io · optimize · edit | No |
| UI profesional | ui | Opt-in |
| IA (opt-in) | ai/nlu · ai/nlu-ui · ai/nlu-voice-wasm | Parcial |
Ver todos los entry points
Una superficie de edición profesional
Sección titulada «Una superficie de edición profesional»El editor opcional alcanza un conjunto de funciones comparable al de las herramientas vectoriales de escritorio — todo sobre el mismo motor headless.
Dibujar
Select y Direct-Select, Pen y Pencil, herramientas de forma, texto enriquecido (variable fonts, texto sobre path), además de Eyedropper, Knife, Width y Symbol Sprayer.
Editar geometría
Editor de Path/Anchor (cusp / smooth / symmetric), operaciones booleanas del Pathfinder, operaciones de path (simplify / join / outline stroke / offset), live corners y compound paths.
Componer documentos
Pages / artboards, capas, Smart Objects, símbolos e instancias, snapshots de versión, autoguardado y recuperación.
Estilo
Efectos y filtros no destructivos y encadenables, gradientes con editor inline, patterns y un sistema de libraries (formas, paletas, gradientes, patterns, símbolos, brushes, graphic styles y plantillas).
Productividad
Find & Replace, alinear / distribuir, atajos de teclado configurables, auto-trace (raster → vector), code generators, export por asset y línea de tiempo de animación.
Comando por voz (opt-in)
Comando por lenguaje natural y speech-to-text en el dispositivo (Whisper) — totalmente opcional y desacoplado del core del editor.
Garantías arquitectónicas
Sección titulada «Garantías arquitectónicas»Frontera headless
core, render, io, optimize y edit tienen dependencia cero de
@angular/material o @angular/cdk. Material vive solo en ui.
Modelo inmutable
Cada mutación produce un nuevo árbol (structural sharing). El undo es snapshot y replay, no un frágil sistema de deltas.
Patrón Command
Cada mutación pasa por un único CommandBus, así que undo/redo es automático
y consistente.
OnPush en todo
Cada componente usa ChangeDetectionStrategy.OnPush; el estado reactivo es
signal/computed, sin Subjects en la API pública.
Primeros pasos
Sección titulada «Primeros pasos»Publicado en npm como el paquete con scope @mosaicoo/svg-engine:
npm install @mosaicoo/svg-engine @angular/core@^21Apache-2.0, con solo dos dependencias de runtime (polygon-clipping,
tslib); Angular Material y los paquetes de AI/voz son peers opcionales. La
biblioteca está cubierta por 3012 tests, y los cambios se registran en el
changelog y en las
releases de GitHub.