Export

Your creation runs without the editor. Export as standalone JavaScript, React components, Lottie JSON, CSS animations, or compile to PIXI.js and THREE.js runtimes.

---

Export targets

Format	Best for	File size	Interactivity
Standalone JS	Embeds, widgets, games	Small	Full
React components	Web apps, design systems	Small	Full
Lottie JSON	UI micro-animations	Tiny	Playback only
CSS @keyframes	Simple animations	Tiny	Playback only
PIXI.js	Canvas games, visualizations	Medium	Full
THREE.js	3D scenes, WebGL content	Medium	Full

---

Standalone JavaScript

The formula emitter compiles your reactive graph into plain JavaScript. No framework dependency. No editor runtime.

What ships:

• Evaluation functions for every formula
• $on() event wiring for click, collide, etc.
• Batch update system (no redundant evaluations)
• dispose() teardown for clean removal
• Topological sort preserved — evaluation order is correct

<!-- Embed in any page -->
<canvas id="scene" width="400" height="400"></canvas>
<script src="foximation-export.js"></script>
<script>
  const scene = Formo.create('#scene');
  scene.play();
</script>

The exported bundle includes only what your scene uses. Tree-shaking removes unused systems — if you don’t use physics, the Box2D port isn’t bundled.

---

React components

Components in the editor map 1

to React components.

Editor concept	React equivalent
Component with inputs	Component with props
Component outputs	Exposed refs or context
Reactive formula	useMemo / useEffect
Non-visual component	Custom hook
Keyframe animation	CSS or motion library
Event handler	onClick, onHover, etc.
mouse.x	useMousePosition() hook
$parent.width	Context or prop

Two rendering modes

Custom-drawn — shapes export as SVG or Canvas rendering code. Pixel-perfect match with the editor.

function Button({ label, color }) {
  return (
    <svg viewBox="0 0 200 48">
      <rect fill={color} rx={8} width={200} height={48} />
      <text x={100} y={28} textAnchor="middle">{label}</text>
    </svg>
  );
}

Native DOM — use built-in DOM widgets (Button, Input, Select) for accessible, performant HTML output.

function Button({ label, color }) {
  return (
    <button style={{ backgroundColor: color, borderRadius: 8 }}>
      {label}
    </button>
  );
}

The designer chooses: pixel-perfect custom rendering, or native DOM with standard behavior.

---

Lottie JSON

Classical keyframe animations (constant from/to values) export to Lottie format. The Lottie ecosystem plays them everywhere:

• lottie-web — browser
• lottie-ios — iOS native
• lottie-android — Android native
• lottie-react-native — React Native

Limitations: Lottie doesn’t support interactivity, physics, or reactive formulas. Only static keyframe animations export. Formula keyframes and event handlers are stripped.

---

CSS @keyframes

Simple single-property animations export as CSS:

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spinner {
  animation: spin 1s linear infinite;
}

Best for: loading spinners, hover effects, micro-animations. No JavaScript needed.

---

PIXI.js target

PIXI.js has no vector authoring tool. Formo fills that gap — design in the editor, export as PIXI.js scene code.

import { Application, Graphics } from 'pixi.js';

const app = new Application({ width: 400, height: 400 });
const ball = new Graphics().circle(0, 0, 20).fill('#E74C3C');
ball.position.set(200, 200);
app.stage.addChild(ball);

// Formula: Ball.x = mouse.x
app.stage.on('pointermove', (e) => {
  ball.position.x = e.global.x;
});

Vector network geometry is tessellated for PIXI’s Graphics API. Gradients, blend modes, and opacity are preserved. Physics exports as Matter.js integration code.

---

THREE.js target

Export 2D designs as THREE.js scenes for WebGL/WebGPU rendering. Shapes become ShapeGeometry meshes. Useful for:

• Embedding interactive 2D content in 3D scenes
• VR/AR UI panels
• GPU-accelerated rendering of complex scenes

---

What exports fully

Feature	JS	React	Lottie	CSS	PIXI	THREE
Shapes & fills	Yes	Yes	Yes	No	Yes	Yes
Formulas	Yes	Yes	No	No	Yes	Yes
Events	Yes	Yes	No	No	Yes	Yes
Physics	Yes	Yes	No	No	Yes	No
Keyframe animation	Yes	Yes	Yes	Simple	Yes	Yes
Components	Yes	Yes	No	No	Yes	Yes
Tags	Yes	Yes	No	No	Yes	Yes
IK	Yes	Yes	No	No	Yes	Yes

---

One-click export

1. Open the export panel
2. Choose your target
3. Click Export
4. Download the bundle

No build configuration. No dependency management. The export handles bundling, tree-shaking, and asset embedding.

---

Join the Beta →