EXODEUI EDITOR MANUAL
Logic & State Machine Studio
Visual state graphs, event triggers, logic gates, interactive canvas components, and zero-loss React SDK runtime integration.
Interactive Node Graph & Event Pipeline
fireTrigger("idle");Inputs & Logic Gates
The communication bridge between user interaction and state animation.
Input Variable Types
Click the [+] icon in the Logic Inspector to define state inputs:
| Input Type | Value Domain | Common Use Cases |
|---|---|---|
| Trigger | One-shot impulse signal | Button clicks, download complete, celebrate confetti |
| Boolean | true / false | Hover active, dark mode toggle, modal visible |
| Number | Continuous float / integer | Health bars, progress percentage, scroll offset |
| Text / String | Dynamic UTF-8 string | User badges, live currency values, ticker copy |
Boolean Logic Gates (AND, OR, NOT)
Outputs true only if every connected socket input evaluates to true (e.g. formValid AND acceptedTerms).
Outputs true if at least one socket input is true (e.g. enterKeyPressed OR submitButtonClicked).
Inverts signals or applies arithmetic (Add, Subtract, Multiply, Remainder) for procedural dynamics.
States & Visual Transitions
Wire animations into discrete state nodes and define mathematical transition rules.
State Nodes (Entry, Idle, Anim, Blend)
| State Node | Behavior |
|---|---|
| Entry Node | The initialization point executed when the scene loads. |
| Animation State | Plays a dedicated timeline track (e.g., walk cycle, button hover, error shake). |
| Blend State (1D / 2D) | Mixes two or more timelines smoothly based on numeric parameters. |
| Any State | Allows transitions from any currently running state without wiring manual spaghetti lines. |
Transition Conditions & Easing
Drag a connector wire from one state node to another. In the Inspector, attach one or more logical conditions:
Controls the cross-fade duration (e.g. 200ms) between outgoing and incoming skeletal/vector keyframes.
Specifies whether the state must complete its current timeline cycle before the transition is allowed to fire.
Interactive Canvas UI Components
Drop pre-built interactive UI widgets onto the canvas with native runtime communication.
Dropdowns & Dynamic ListViews
Populate canvas dropdowns and list views with remote data arrays at runtime:
const { setInputStringArray } = useExodeUI();
// Populate country list dynamically from backend API
setInputStringArray('available_regions', [
'North America (US-East)',
'Europe (Frankfurt)',
'Asia Pacific (Tokyo)'
]);React / Next.js SDK API
The full runtime API reference for embedding ExodeUI graphics into web applications.
<ExodeUICanvas /> Component Props
| Prop | Type | Description |
|---|---|---|
| artboard | ExodeProjectJSON | Direct inlined project JSON data. |
| src | string | Remote URL path to .exode binary asset. |
| autoPlay | boolean | Starts timeline immediately on load (default: true). |
| fit | 'contain' | 'cover' | 'fill' | Canvas viewport scaling behavior. |
| onReady | (engine) => void | Callback fired when WebGL/WASM engine is initialized. |
| onComponentChange | (event) => void | Unified event pipeline for all interactive canvas UI. |
useExodeUI() Hook Methods
| Method Signature | Description |
|---|---|
| fireTrigger(triggerName: string) | Fires a one-time trigger pulse into the active state machine. |
| setInputBool(name: string, value: boolean) | Updates a boolean state input switch. |
| setInputNumber(name: string, value: number) | Sets a numeric variable value. |
| setInputText(name: string, text: string) | Updates dynamic text bound on the canvas. |
| updateObjectOptions(id: string, options: object) | Mutates component properties (e.g. disabled, text, color). |
2D Rigid Body Physics Engine
Real-time collision, restitution, and gravitational dynamics.
Body Types (Dynamic, Static, Kinematic)
Affected by gravity, mass, linear velocity, and collisions.
Unaffected by forces; acts as solid walls and boundary floors.
Moves via keyframe animations, pushing dynamic objects realistically.
Diagnostics & Troubleshooting
Quick solutions for common runtime and editor scenarios.
Verify that the Input variable name defined in the Logic Panel matches the string passed in code exactly (case-sensitive). Also check if 'Exit Time' is preventing immediate switching.
Ensure the Text layer on canvas has the VAR toggle enabled in the Typography Inspector, and that the default fallback string is configured.
Group complex static backgrounds into a single cached layer, and ensure unused parallel state machine layers are paused.