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.

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.

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.

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.

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.

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.

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.