Lottie vs State Machine Runtimes: What Runs Your UI?
Lottie now supports state machines in dotLottie packages. Rive and ExodeUI take different approaches. Compare what each runtime can actually run.
Core Takeaway
Lottie is a playback format, and dotLottie packages can now carry state machines that a dotLottie player runs. Rive is an interactive runtime built around state machines and data binding. ExodeUI keeps states, springs, inputs and layout in one open .exode file played by runtimes for React, Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter. The right choice depends on whether your motion comes from After Effects, whether the logic must live in the file, and which players you can ship.
The old comparison is out of date
For years the short answer was simple: Lottie plays keyframes, Rive runs state machines. That is no longer accurate. LottieFiles added visual state machines to Lottie Creator in September 2025, and the logic is saved inside a dotLottie file. The catch is that only dotLottie players run it. The classic lottie-web player and older JSON-only setups play the animation and ignore the logic. So the useful question is not whether Lottie has state machines. It is which file and player combination you can use on every platform you ship.
What each format is for
The formats have different centres of gravity.
- Lottie: After Effects animation exported through Bodymovin, stored as JSON, and packaged as dotLottie when it needs assets, themes or state machines
- Rive: a binary .riv file built in the Rive editor, with artboards, animations, state machines and data binding
- ExodeUI: an open .exode JSON file that holds layout, timeline, state machines, spring physics, inputs and events, played by platform runtimes
What dotLottie state machines can do
A dotLottie state machine can react to numeric, string, boolean and event inputs, listen for pointer events, apply guards and transition between animations. Lottie Creator is the authoring path. This covers interactive icons, buttons, toggles and illustrations with a small number of states. It is a good fit when the artwork already lives in After Effects and the interaction is mostly hover, click or a few named states.
What Rive adds
Rive's state machines are native to the .riv format and have had longer to mature. They add blend states, multiple layers running at once, pointer listeners on parts of the artwork, and typed data binding through view models. Rive now recommends data binding over its older inputs for new work; existing input-based files still work. The extra machinery matters most for characters and complex interactive graphics whose behaviour depends on several values at the same time.
Where ExodeUI sits
ExodeUI is a browser and desktop tool for interactive UI and animation. It keeps the state machine, springs, layout and inputs together in one open .exode file, and runtime packages play that file across frameworks and mobile platforms. That is useful when the unit you want to reuse is a whole interactive component, not only an illustration. We make ExodeUI, so treat this as a disclosure and compare the alternatives before choosing.
How to choose
Start from the work you already have and the platforms you must hit.
- Choose Lottie or dotLottie when the animation comes from After Effects and the interaction is simple
- Choose Rive when you need character-grade state machines, blends or typed data binding
- Choose ExodeUI when one interactive UI file must run across web frameworks and mobile from a single source
- Test the hardest interaction on every target platform before committing; a format is only as good as its player there
Key Principles to Remember
- Lottie is playback; dotLottie packages can add state machines, but only compatible players run them
- Rive is built around state machines and is moving new work to data binding
- ExodeUI keeps UI layout, states, springs and inputs in one open file for multiple runtimes
- The format matters less than the player support on every platform you ship
- Prototype the most complex interaction, not the simplest one
Frequently Asked Questions
Sources
- dotLottie specification — dotLottie
- Lottie documentation — LottieFiles
- Rive documentation — Rive