The Editor

Four modes. Zero friction. Select, draw, edit, run.

Switch between designing, editing vertices, drawing paths, and testing interactions — all in one workspace.

Select Mode

Click to select. Drag to move. Handles for scale and rotate. Shift+click for multi-select. Ctrl+click to select children inside groups.

title: "Move and resize"
description: "Select shapes and drag handles to transform"
nodes:
  - type: RECT, name: "A", x: 100, y: 150, w: 120, h: 80, fill: "#3498DB"
  - type: ELLIPSE, name: "B", x: 300, y: 200, w: 100, h: 100, fill: "#E74C3C"
  - type: STAR, name: "C", x: 200, y: 300, w: 80, h: 80, fill: "#F39C12", points: 5
tools_visible: [select, vector-edit, pen]
ui_visible: [properties, layers]

What you can do

• Scale — drag corner/edge handles. OBB-aware for rotated shapes.
• Rotate — drag outside corner handles. Snaps to 15-degree increments with Shift.
• Move — drag the shape. Snap guides appear automatically.
• Multi-select — Shift+click or drag a marquee rectangle.
• Deep select — Ctrl+click to select children inside frames/groups.
• Hover highlight — outlines appear on mouse over for visual feedback.

Vector Edit Mode

Double-click a shape or press Enter to edit vertices directly.

Vertex operations

• Select individual vertices, segments, or tangent handles
• Split segments at any point
• Nudge with arrow keys (1px, Shift+arrow for 10px)
• Delete vertices or dissolve them (reconnecting neighbors)
• Marquee select multiple vertices
• OBB-aware resize for vertex selections

Tangent editing

Drag tangent handles to reshape curves. Ctrl+click to toggle tangent modes. Tangents are relative to their vertex — rotating a vertex rotates its tangents.

Pen Mode

Click to place vertices. Drag to set tangent handles. Click the starting vertex to close the path. Creates VECTOR nodes with full vector network topology.

Run Mode

Press Ctrl+Enter to enter Run Mode. Your scene becomes interactive:

• Mouse events dispatch to nodes (click, mouseenter, mouseleave, mousedown, mouseup, mousemove)
• Events bubble through the node hierarchy
• Formulas evaluate with live mouse/keyboard state
• Physics simulation runs

Press Ctrl+Enter again to exit. Scene reverts to pre-run state.

Play/Stop

Press Space to play:

1. Document state is captured (full snapshot)
2. Physics simulation starts
3. Formulas tick with time, dt, frame updating each frame
4. Events can fire and modify nodes

Press Space again:

1. Simulation stops
2. Document state restores from snapshot
3. All changes during play are discarded

Non-destructive. Experiment freely.

Properties Panel

Right sidebar showing all properties of the selected node.

Formula-aware inputs

Any numeric input can hold a formula. Type = to enter formula mode. Green fx badge appears on formula-bound properties.

Paint editor

Click a fill/stroke swatch to open the paint popup. Color picker with hex/RGB/HSV input. Gradient editor with draggable stops.

Multi-select

Select multiple nodes — properties panel shows shared values. Mixed values shown with indicator. Drag-scrub applies relative deltas to all selected nodes.

Physics module

Custom panel with TripleToggle (Dynamic/Static/Kinematic), sliders for friction/restitution, fix toggles, velocity widget with direction dial, and collider group editor.

Layer Tree

Left sidebar showing all nodes in the document.

• Collapse/expand containers
• Preview thumbnails — 16px offscreen canvas renders, throttled
• Drag reorder — drop above, below, or into containers
• Inline rename — double-click to rename
• Selection sync — clicking a layer selects the node on canvas
• Tag highlighting — hover a tag badge to highlight all matching nodes

Toolbar

Top bar with shape tools, edit modes, and action buttons. SVG icons, keyboard shortcuts displayed, submenus for shape variants.

Keyboard Shortcuts

Open Formo →