LanguageEnglish
Pillar 07 · How it runs
From .exode to Your App: How ExodeUI Files Are Built and Played
One open file from design to production. A runtime plays it, your code drives it.
What is From .exode in ExodeUI?
ExodeUI does not generate React, Swift or Flutter source code. You design in an open .exode JSON file; for production it can be compiled into a smaller .bexode file, and a runtime package for your framework plays it on a canvas. Your code controls it by setting inputs and listening for events. We make ExodeUI.
Core Architecture
Why Engineers & Designers Choose ExodeUI
Design, logic and motion in one file that runs inside your app.
Open source file
The .exode file is JSON that describes layers, states, transitions, springs, inputs and events. Developers can read it and AI tools can edit it.
Compiled for production
The same scene can be compiled into a smaller .bexode file to ship in your app.
Runtime per framework
Runtime packages for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter play the file.
Controlled by your code
Set booleans, numbers and triggers from app state, and listen for events the animation sends back.
Objective Evaluation
How ExodeUI Compares to Rebuilding motion by hand
Where ExodeUI is stronger, and what to weigh before you switch.
ExodeUI
- The designed file is the shipped file, so nothing is lost in handoff
- States and logic travel with the animation
- One file works across eight framework runtimes
- Designers can change timing without a code change, if inputs and events stay the same
Rebuilding motion by hand
- Developers recreate each transition from a reference
- Every design change needs another code change
- Each platform is rebuilt separately
- Hand-written code gives full control and no extra runtime, which is sometimes the right trade-off
Developer Handoff
Using It in Your Code
Your app loads the compiled file through the ExodeUI runtime and talks to it through inputs and events.
// Playing an ExodeUI file in React with the exodeui package.
// The animation, its states and springs live in save-button.exode;
// your code only sets inputs and listens for events.
import { useEffect } from 'react';
import { ExodeUICanvas, useExodeUI } from 'exodeui';
import saveButton from './save-button.exode'; // read by exodePlugin() from 'exodeui/vite-plugin'
export function SaveButton({ saving, onSave }) {
const { setEngine, setInputBool } = useExodeUI();
// Drive the "Loading" state from app data
useEffect(() => {
setInputBool('Loading', saving);
}, [saving, setInputBool]);
return (
<div style={{ width: 220, height: 64 }}>
<ExodeUICanvas
artboard={saveButton}
onReady={setEngine}
onTrigger={(name) => {
if (name === 'Pressed') onSave();
}}
/>
</div>
);
}What happens between the editor and your app
An ExodeUI component goes through four steps:
- 1. Design: you build layers, states, transitions, springs and logic in the browser or desktop editor. The work is saved as an open .exode JSON file.
- 2. Compile (optional): for production, the scene can be compiled into a smaller .bexode file.
- 3. Play: a runtime package for your framework loads the file and draws it on a canvas.
- 4. Control: your code sets inputs, such as a Loading boolean or a Success trigger, and listens for events the animation sends.
When hand-written code is the better choice
A runtime is not always right. For a single fade or a simple hover, CSS or a library such as Motion is lighter and needs no extra package. ExodeUI is most useful for components with several states, physics or logic that designers want to keep editing.
Topic Cluster Network
Explore Connected Concepts & Tooling
Got Questions?
Frequently Asked Questions
Build living components with real motion.
Start free in the browser or download the desktop app. Compile spring physics and state machines directly to React and SwiftUI.