Documentation
Learn by building
Every page starts with a working example. Theory comes after you have something running.
Getting Started
Your First Shape
Draw a rectangle. Change its color. Resize. Rotate. Learn the editor basics in 2 minutes.
Your First Formula
Make a shape follow your cursor with one line: Ball.x = mouse.x. Understand reactive expressions.
Your First Animation
Add physics to a circle. Press Space. Watch it fall. Add a platform. Watch it bounce.
Your First Game
Build Arkanoid: paddle, ball, bricks, collision logic. Under 60 seconds in the editor.
API Reference
Technical documentation for every system. Each page starts with a working example.
| Page | What it covers |
|---|---|
| Nodes | Scene tree, node types, lifecycle, coordinate spaces |
| Properties | 12 built-in types, descriptors, constraints, paint deep dive |
| Shapes | All shape types: RECT, ELLIPSE, STAR, POLYGON, VECTOR, FRAME |
| Formulas | Syntax, compiler, signals, dependency tracking, source maps |
| Events & Methods | All events, event objects, methods, code editor |
| Physics | Bodies, colliders, joints, attractors, sensors, raycasting |
| Animation | Keyframes, blending, IK solvers, clips, export |
| Components | Inputs/outputs, instances, slots, non-visual, custom editors |
| Globals | mouse, keys, time, dt, frame, Tag, Math, console |
| Keyboard Shortcuts | Every hotkey, all modes |
Concepts
Deep-dive articles explaining how systems work:
| Topic | Article |
|---|---|
| Vector networks | How VNs differ from paths |
| Reactive signals | How formulas know when to update |
| Formula compiler | From expression to reactive function |
| Events system | Clicks, collisions, and custom methods |
| Tag groups | Group nodes, query in formulas |
| Physics bodies | Dynamic, static, kinematic |
| Colliders | Auto colliders and multi-collider bodies |
| Collision events | When shapes touch, code runs |
| Physics joints | Hinges, springs, ropes, welds |
| Gravity attractors | Point gravity and repulsion |
| IK solvers | Two-bone, CCD, FABRIK |
| Animation blending | Mock-based transitions |
Guides
Step-by-step tutorials building real projects:
Eyes That Follow
Cursor tracking with 2 formulas. Learn clamp(), mouse globals, parent-relative positioning.
Bouncing Ball
Physics + formulas. Dynamic body, restitution, velocity readout.
Color Picker
Interactive UI widget. HSV color space, formula-bound gradients, mouse drag.
Particle System
Tags + physics + formulas. Spawn, destroy, count. Tag.particle.length in action.
Platformer
Full game: keyboard-controlled character, platforms, coins, score. Physics + events + tags.
Export to Web
Standalone JS export. Embed your creation in any webpage.
Product pages
| Page | Description |
|---|---|
| Features overview | Everything Formo does in one page |
| Parametric shapes | 5 shape types, gizmos, paint system |
| Formulas | The reactive formula system |
| Physics | Built-in physics engine |
| Animation | Formula-keyframe hybrid animation |
| Components | Reusable building blocks |
| Brush tool | Parametric strokes, pressure, eraser |
| Timeline | Animation timeline UI |
| Editor | Four editing modes |
| Export | JS, React, Lottie, CSS, PIXI, THREE |
| Visual designer | Widgets, layout, preview mode |
| Collaboration | Real-time multiplayer |
| Pricing | Free, Pro, Team plans |
Writing style
These docs are written for someone who codes but hasn’t graduated. If you know JavaScript basics and want to build something interactive, you’re in the right place.
- Every page has a working example first
- Code snippets are copy-paste ready
- No jargon without explanation
- No assumptions about CS background