Improve your Development Workflow

with the LottieFiles plugin for Visual Studio Code

Install plugin

Via Visual Studio Marketplace

Watch video

Use Lottie animations with ease within VS Code

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.

Search LottieFiles

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.

Why use Lottie animations?

Faster page load speeds

Lotties are 600% smaller than GIFs. This means being able to animate your site – without slowing it down.

Stays sharp at any resolution

Lottie animations can be scaled up or down without pixelating. No matter the size, they always stay sharp.

Fits your brand’s visual identity

Customize Lottie animations to fit any brand identity. It’s quick and easy with the free Lottie Editor.

Fits your brand’s visual identity

Customize Lottie animations to fit any brand identity. It’s quick and easy with the free Lottie Editor.

Fits your brand’s visual identity

Customize Lottie animations to fit any brand identity. It’s quick and easy with the free Lottie Editor.

Learn Lottie basics with animation experts

Learn animation principles, techniques, and how to use After Effects to create Lottie animations with Salih Abdul-Karim, Design Lead at Airbnb.

View course

FAQ

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 Lottie?

What is a dotLottie?

How do I install the LottieFiles plugin for VS Code?

How can I preview a Lottie on VS Code?

Show dotLottie contents

How can I search for LottieFiles animations in VS Code?

What can I do with the Lottie code editor in VS Code?

Check out our support page for more.

Motion made simple

Use Lottie animations with ease within VS Code.

Install plugin