# The Best Lottie Player Libraries in 2026 (Web, Mobile and Flutter) > 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. *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.* Updated November 2026. Source: https://www.exodeui.com/best-lottie-player-libraries/ 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. ## Quick picks - Plain web pages: **lottie-web** - Interactivity and state machines: **dotLottie players** - React apps: **lottie-react** - React Native apps: **lottie-react-native** - Flutter apps: **Skottie** ## The 5 best Lottie player options ### 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: Three renderers for different needs; Widely used and well understood; Free and open source Cons: No state machines in the base player; Complex files can be expensive to render ### 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: State machines and themes on top of Lottie; Official players for many platforms; Keeps your existing Lottie animations usable Cons: Interactivity tooling is newer than the format; Not every third-party player supports the newest features More: [Lottie state machines vs Rive](https://www.exodeui.com/compare/lottie-state-machines-vs-rive) ### 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: Simple component API; Close to lottie-web behaviour; Easy to control playback from state Cons: Thin wrapper, so no extra features; Same file limitations as lottie-web ### 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: Native rendering, not a web view; Works with Expo; Mature and widely used Cons: Feature gaps differ between iOS and Android; Interactive states need extra code ### 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: Consistent rendering across Flutter targets; Good performance for vector animation; Simple widget API Cons: Some effects are not supported; Interactivity is limited to playback control ## 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. ## Frequently asked questions ### What is the difference between lottie-web and dotLottie? lottie-web plays Lottie JSON. dotLottie is a packaged format that can include themes and state machines, with official players for many platforms. dotLottie is the better choice when you need interactivity. ### Which Lottie player is fastest? On the web, the canvas renderer is usually faster for complex animation, while SVG is better for crisp shapes and accessibility. On mobile, native players such as lottie-ios and lottie-react-native avoid the browser entirely. ### Can Lottie files be interactive? With dotLottie state machines, yes: states, transitions, inputs and events. Plain Lottie JSON is playback only, and any interactivity has to be written in your app code. ### Why does my Lottie animation look different in the app? Players support different After Effects features. Masks, gradients, expressions, blend modes and text are common culprits. Test the file in the exact player and platform you will ship on. ### Does Lottie work in Flutter? Yes, through the Lottie package, which renders with Skottie. Most animations work well, but some complex effects are not supported. ## Related - [Lottie alternatives](https://www.exodeui.com/best-lottie-alternatives) - [Lottie editors](https://www.exodeui.com/best-lottie-editors) - [Runtime animation tools](https://www.exodeui.com/best-runtime-animation-tools) - [Lottie state machines vs Rive](https://www.exodeui.com/compare/lottie-state-machines-vs-rive) - [ExodeUI vs Lottie](https://www.exodeui.com/alternatives/lottie)