Preview Lottie files within VS Code
The LottieFiles extension lets you preview Lotties and dotLottie file contents without leaving the VS Code app.
Show dotLottie contents
Extract and view the contents of a dotLottie file (a compressed Lottie file format) in VS Code..
The “Search LottieFiles” function makes finding the perfect toggle or play animation for your app convenient. Run this command within VS Code to search.
Edit Lottie JSON files
The Lottie code editor allows you to make changes to frame rate, dimensions, and other properties of Lottie JSON files, while showing your changes on an accompanying player.
What is a Lottie?
A Lottie file is a JSON-based animation file format that uses a textual, descriptive representation of the animation elements and movement towards a smaller file size and platform-independence, resolution independence and variable frame-rate during animation playback. Open-source and free Lottie players exist for the web, iOS, Android, Windows and other platforms.
What is a dotLottie?
dotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of ".lottie.”
Learn more about dotLottie here.
How do I install the LottieFiles plugin for VS Code?
There are two ways to install this plugin for VS Code:
1. Within VS Code, bring up the Extensions view by clicking on the Extensions icon in the Activity Bar on the sidebar of VS Code, or use the View: Extensions command (⇧⌘X).
2. Download it from the Visual Studio Marketplace.
How can I preview a Lottie on VS Code?
Click and open the Lottie JSON file using VS Code, press command + shift + p to open the command palette for VS Code, and key in “View in Lottie Player.”
Alternatively, you may right click the JSON file and click “View in Lottie Player.” The JSON file must be opened or clicked on first for the plugin to be able to run this command. Once you run the command, a new window with the Lottie player will open up.
How can I preview dotLottie file contents in VS Code?
Click and open the dotLottie file using VS Code, press command + shift + p to open the command palette for VS Code, and key in “Show dotLottie Contents.” The contents of a dotLottie file will not be shown inside VS Code unless this command is run on the file. Alternatively, right-click the dotLottie file and click “Show dotLottie Contents.”
Once the command is run, read-only files will be visible on the left side file navigation pane of VS Code and the Lottie player will be opened up with a preview of the Lottie.
How can I search for LottieFiles animations in VS Code?
With the plugin installed, press command + shift + p to open command palette for VS Code and key in “Search LottieFiles.” An input will appear. Type in a keyword to search and press enter. VS Code will then ask for permission to take you to the browser where you will see the search results of the keyword.
What can I do with the Lottie code editor in VS Code?
You can explore the Lottie file format or make small changes to frame rate, dimensions, and other basic properties. The plugin allows you to edit the Lottie JSON with a JSON editor and updates the player with each change made. Debugging issues with a Lottie file or building on top of the Lottie format is made simpler with this feature.
To use the code editor, click and open the Lottie JSON file using VS Code, press command + shift + p to open the command palette for VS Code, and key in “View in Lottie Code Editor.” Alternatively, right-click the JSON file and click “View in Lottie Code Editor.” This will open up a JSON editor with the Lottie loaded in. A preview Player will be attached in another tab and any changes made on the JSON editor will be reflected in the Player.