Features

Everything you need to create interactive vector content

Vector Drawing

Beyond Paths

Vector networks let you connect any vertex to any other vertex — not just sequential chains. T-junctions, branching, shared edges.

title: "Vector network topology"
description: "A shape with branching segments impossible in path-based tools"
nodes:
  - type: VECTOR, name: "Network", x: 200, y: 150, w: 300, h: 200, fill: "#4ECDC4", stroke: "#2C3E50"
tools_visible: [select, vector-edit, pen]
ui_visible: [properties]

Multi-Paint Stacking

Stack fills and strokes on one shape. Solid colors, linear, radial, angular, and diamond gradients — each with independent transforms.

Formula-Bound Colors

Bind any color channel to a formula. Shift hue based on mouse position. Derive saturation from physics velocity. HSV, LAB, OKLCH supported.

Parametric Shapes

5 Shape Types, 14 Gizmos

Rectangles, ellipses, stars, polygons, and freeform vectors. Each with on-canvas gizmos for direct parameter manipulation.

Mirror Symmetry

Cn, Dn, and bilateral symmetry for vector shapes. Edit one side — the other updates instantly.

Device Frames

Clipping containers with presets for laptop, mobile, and section layouts. Background fill and corner radius included.

Reactive Formulas

Write Expressions, Get Reactivity

Ball.x = mouse.x // follows cursor
Score.text = Tag.coin.length // counts remaining coins
this.rotation = time * 90 // spins 90 degrees per second

No event listeners. No update loops. Write the relationship — the system handles evaluation order, dependency tracking, and batch updates.

title: "Rotating square"
description: "A square that rotates based on time"
nodes:
  - type: RECT, name: "Box", x: 200, y: 200, w: 100, h: 100, fill: "#E74C3C"
formulas:
  - node: "Box", prop: "rotation", value: "time * 45"
tools_visible: [select, play]
ui_visible: [properties, formulas]

Smart Editor

Syntax highlighting with per-node-ID colors. Context-aware autocomplete. Brace matching. Inline source maps for DevTools debugging.

Events & Methods

Click, mousedown, mouseup, mouseenter, mouseleave, collide. Write handler code for any event. Define reusable methods callable from formulas and other events.

Tag Groups

Tag nodes with #brick, #enemy, #coin. Access groups reactively in formulas: Tag.brick.length updates when bricks are destroyed.

Physics Engine

One Click to Physics

Add the physics module. Choose body type. Hit play. Gravity works.

title: "Falling shapes"
description: "Shapes with physics falling onto a static platform"
nodes:
  - type: RECT, name: "Platform", x: 200, y: 400, w: 400, h: 30, fill: "#2C3E50"
  - type: ELLIPSE, name: "Ball", x: 200, y: 100, w: 50, h: 50, fill: "#E74C3C"
  - type: RECT, name: "Box", x: 250, y: 50, w: 40, h: 40, fill: "#3498DB"
modules:
  - node: "Platform", module: "physics", config: { bodyType: "static" }
  - node: "Ball", module: "physics", config: { bodyType: "dynamic", restitution: 0.7 }
  - node: "Box", module: "physics", config: { bodyType: "dynamic", restitution: 0.3 }
tools_visible: [select, play]
ui_visible: [properties, modules]

Multi-Collider Bodies

Attach multiple named colliders to one node. Each with independent type, scale, and offset. Build complex collision shapes visually.

Collision Events

collide event fires with target node, contact normal, contact point, and collider names. Write game logic in the handler:

if (event.target.is("brick")) {
  event.target.destroy()
}

Axis Locking

Lock X or Y independently. Create rails, platforms, constrained motion. Position captured automatically when toggled.

Animation

Formula Keyframes

Keyframes hold formulas, not just numbers. Crossfade between reactive expressions. The timeline and formula systems merge into one.

Per-Bone Timelines

Each node gets its own timeline with independent loop length. No shared timeline constraints.

IK Solvers

Two-bone analytical, CCD, and FABRIK inverse kinematics. Joint constraints. Animatable weight. Procedural animation built in.

Multi-Format Export

Export as standalone JavaScript, Lottie JSON, or CSS @keyframes. One animation, every platform.

Editor

Four Modes

Select → layout. Vector edit → vertices. Pen → draw paths. Run → test interactions.

Direct Vertex Editing

Select vertices, segments, tangents. Split, nudge, delete, dissolve. OBB-aware resize for vertex selections.

Smart Snapping

Shape snap points, angle snapping, visual guides. Ctrl toggles. Gizmo values snap to useful increments.

Play/Stop

Space to play — physics runs, formulas tick, events fire. Space again — everything reverts. Non-destructive testing.

Run Mode

Ctrl+Enter — full interactive playback. Mouse events dispatch to nodes. Test your creation without leaving the editor.

Developer Features

Standalone Export

Emit JavaScript from the formula graph. Evaluation functions, event wiring, batch updates, teardown. No editor dependency in production.

12 Property Types

number, integer, angle, ratio, color, point, paint, paint[], enum, blendMode, boolean, string. Full serialize/deserialize/lerp/clone support.

Module System

Extend nodes with custom behavior modules. Config schemas, play/stop lifecycle, formula bridge. Physics is the first module — build your own.

Open Formo →