Vector State Machine

Make any vector animation interactive.

A tiny, zero-dependency state machine for SVG. Author in your vector tool, scrub the timeline, drop markers → states, wire triggers, and export a drop-in package. No WASM, no runtime renderer — just clean SVG in the DOM.

👆 click the button — the path morphs and the colour shifts, driven by the state machine

Open the editor → One-file embed Runtime demo Vue example

tip In the editor, hit Load sample to scrub this exact button, then ▶ test and Export.

🪶 Lightweight

~2 KB core. Drop it on any page; it drives the SVG you already have.

🔀 Real states

default → A → default → B, with triggers, conditions, and emitted events back to your app.

🧩 Framework-agnostic

Vanilla JS, Vue, React — same core. Local-cache persistence built in.

✏️ Authorable

Import an Expressive Animator .eaf, scrub, mark states, export SVG + .vsm.json.

Embed in one snippet

<!-- the editor exports a self-contained button.js (16 KB, 0 deps) -->
<div id="btn"></div>
<script type="module">
  import mount from './button.js';
  const m = mount('#btn', { persist: { key: 'btn' } });
  m.on('onPress', () => addToCart());
  btn.onclick = () => m.fire('press');
</script>