“The file is the source of truth. A good editor honors it — and leaves no fingerprints of its own.”
great at SVG.
Agentic design runs on plain text. No binary to reverse-engineer, no platform-specific MCP to wire up and babysit — just markup a model already knows how to write. SVG is the only vector format that fits.
<svg viewBox="0 0 64 64">
<path d="M12 8h40v..." />
<circle cx="32" cy="32" r="10"
- fill="#6366F1" />
+ fill="#10B981" />
<text x="32" y="58">grida</text>
</svg>Plain text, not a binary
A model writes an SVG the way it writes code — straight to text. No proprietary file to decode, no Figma- or Sketch-specific bridge to stand up and keep alive.
The format models already speak
HTML, CSS, and SVG are what LLMs read and write fluently. Put your design system on the one vector format that's already their native tongue.
Round-trip, or the loop breaks
Generation is the easy part; staying in sync is the hard part. People and agents take turns on one file — and that holds only when every save is a clean, readable diff.
Illustrator wraps your file in its own scaffolding. Inkscape stamps every save with its namespaces. Both render fine — and leave markup the next editor, the next AI pass, or a git diff can't make sense of. A clean editor doesn't.
Round-trips by default
Open and save with no edits, get byte-for-byte the same file. Comments, whitespace, attribute order, even unknown-namespace attributes survive untouched.
Mutates minimally
Change one attribute and the diff is one attribute. Rotate a rect and it writes a transform on the rect itself — no wrapping <g>, no collapse to a matrix.
Adds no proprietary noise
No editor namespaces, no invented .st0 classes or SVGID ids, no eight-decimal coordinates rewriting nodes you never touched.
Honest about its scope
CSS cascades, SMIL animation, <switch> branches, foreign metadata — preserved and surfaced, never silently mangled. When it can't edit something cleanly, it refuses rather than corrupt it.
The same editor, headless. A backend-agnostic SDK you can embed in your own product — or hand straight to an agent.
import { createSvgEditor } from "@grida/svg-editor";
const editor = createSvgEditor({
svg: "<svg ...>...</svg>",
});
// edit by capability, not by tag — clean diff guaranteed
editor.commands.set_paint("fill", {
kind: "color",
value: { kind: "rgb", value: "#10B981" },
});
// hand a single subtree to an AI agent
const fragment = editor.serialize_node(selectedId);
// emit clean SVG — round-trip per P1
const out = editor.serialize();Headless & backend-agnostic
The core never touches window, document, or the DOM. It parses SVG, owns the IR, takes commands, and emits state — bring any rendering surface.
A legible source of state
Subscribe to designed views — selection, properties, paint, tree, dirty — never raw pointer events. Bring your own toolbar, panels, and inspector.
A closed, typed command set
select, set_paint, resize, rotate, group, tidy. Every command picks the cleanest in-place edit and keeps the round-trip guarantee intact.
Experimental · v0.x — the API is still moving. Not stable for production yet.