Logic Architecture
State Machine UI
Canonical Definition
A computational model where an interactive interface component exists in exactly one of a finite number of deterministic states at any given time, transitioning in response to events.
Detailed Explanation & Context
State Machine UI is an architectural approach that models interactive components as formal finite state machines (FSM). Rather than managing boolean flags (like isLoading, isHovered, isSuccess, hasError) that can produce invalid combinations, a state machine explicitly defines allowed states and valid transitions. ExodeUI embeds visual state graphs directly on the motion canvas.
Mathematical Model / Governing Formula
S × E → S' (Current State × Event Trigger = Next State)Key Takeaways
- Prevents impossible UI states (e.g. displaying a loading spinner and error message simultaneously).
- Makes interactive micro-interactions self-documenting and deterministic.
- In ExodeUI the state machine lives in the .exode file; your code sets inputs to move between states.
Implementation Syntax (TYPESCRIPT)
type AuthState = 'idle' | 'typing' | 'validating' | 'success' | 'error';
type AuthEvent = { type: 'SUBMIT' } | { type: 'RESET' };Related Glossary Terms
Pillar Guides & Tools
Apply State Machine UI in Your Application
ExodeUI makes modern motion engineering effortless. Design visually and compile clean, accessible components directly to production.