The Best Lottie Player Libraries in 2026 (Web, Mobile and Flutter)
A Lottie file is only as useful as the player that renders it. The format is the same JSON, but players differ in renderer, supported features, interactivity and platform support. Choosing the wrong one produces the classic bugs: gradients that disappear, masks that flicker, or a file that plays on web and not in the app.
We make ExodeUI, which is an interactive animation tool rather than a Lottie player. It appears here only for animations that need states your code controls.
Use lottie-web for plain web pages and dotLottie players when you need state machines or the .lottie package. Use lottie-react in React apps for a small wrapper. Use lottie-react-native for React Native, Skottie inside Flutter, and lottie-ios for native Apple apps. If the animation needs to react to input in a way the player does not support, a runtime format is a better fit than a more complicated Lottie file.
Quick picks by job
| If you need | Use |
|---|---|
| Plain web pages | lottie-web |
| Interactivity and state machines | dotLottie players |
| React apps | lottie-react |
| React Native apps | lottie-react-native |
| Flutter apps | Skottie |
How we compared them
- Renderer and performance on low-end devices
- Feature support: masks, gradients, expressions and interactivity
- Platform coverage and how actively the player is maintained
The 5 best Lottie player options
1. lottie-web
Best for: The default player for browsers
- Platforms
- Web (SVG, canvas, HTML renderers)
- Price
- Free and open source
- Output
- Lottie JSON rendered in the page
lottie-web is the reference player from the Lottie project. It offers SVG, canvas and HTML renderers, which is useful when you need text rendering or specific performance characteristics. It does not add interactivity by itself, and very complex files still cost more than a video or CSS.
Pros and cons
- Three renderers for different needs
- Widely used and well understood
- Free and open source
- No state machines in the base player
- Complex files can be expensive to render
2. dotLottie players
Best for: Lottie with state machines, themes and a packaged file
- Platforms
- Web, React, Vue, Svelte, React Native, Flutter, iOS, Android
- Price
- Players are free and open source
- Output
- .lottie file with animation, themes and states
The dotLottie format packages the animation with themes and, in newer versions, state machines. The official players exist for most platforms, which makes it the best choice when you need hover, click or multi-step states without moving to a different format. Authoring interactivity happens in Lottie Creator or in the JSON.
Pros and cons
- State machines and themes on top of Lottie
- Official players for many platforms
- Keeps your existing Lottie animations usable
- Interactivity tooling is newer than the format
- Not every third-party player supports the newest features
3. lottie-react
Best for: A small React wrapper around lottie-web
- Platforms
- React
- Price
- Free and open source
- Output
- Lottie JSON rendered as a component
lottie-react wraps lottie-web in a component with props for the animation data, loop and playback. It is the least surprising way to use Lottie in React, and it stays close to the underlying player, so the documentation for lottie-web still applies.
Pros and cons
- Simple component API
- Close to lottie-web behaviour
- Easy to control playback from state
- Thin wrapper, so no extra features
- Same file limitations as lottie-web
4. lottie-react-native
Best for: Lottie playback in React Native and Expo apps
- Platforms
- iOS, Android
- Price
- Free and open source
- Output
- Lottie JSON rendered natively
This is the standard Lottie player for React Native: it renders natively rather than through a web view, which matters for performance. Feature support depends on the native libraries underneath, so test masks, gradients and text on both platforms before you commit.
Pros and cons
- Native rendering, not a web view
- Works with Expo
- Mature and widely used
- Feature gaps differ between iOS and Android
- Interactive states need extra code
5. Skottie (Flutter)
Best for: Lottie playback inside Flutter apps
- Platforms
- Flutter (iOS, Android, web, desktop)
- Price
- Free and open source
- Output
- Lottie JSON rendered by Skia
Flutter's Lottie package uses Skottie to render animations through Skia, which keeps quality consistent across platforms. It supports playback control and is the natural choice for Flutter apps. Complex After Effects features may still not render exactly as they did in the editor.
Pros and cons
- Consistent rendering across Flutter targets
- Good performance for vector animation
- Simple widget API
- Some effects are not supported
- Interactivity is limited to playback control
You have read the list. The one we make is one click away.
Free Community plan. One open .exode file that runs in React, Vue, Svelte, Angular, Solid, React Native, SwiftUI and Flutter.
Also worth a look
SVG, canvas or native: the renderer decides the bugs
SVG rendering keeps elements in the DOM, which helps accessibility and crisp scaling but struggles with very complex files. Canvas is faster for heavy animation but gives you less control over text and focus. Native players avoid the browser entirely and have their own feature gaps. When an animation looks wrong on one platform, the renderer is usually the reason.
When a Lottie player is the wrong answer
Lottie is a playback format. If the animation needs drag, scroll-linked progress, live data or many interacting states, you will end up writing the logic outside the file, and the player becomes a source of friction. At that point a runtime format or a code-based animation is simpler, even though it means rebuilding the file.