LottieFiles for VS Code

Build, preview, test, and integrate Lottie animations directly inside your editor.

Works with:

• Visual Studio Code
• Cursor
• Windsurf

Bring motion into your development workflow

The LottieFiles extension turns your editor into a full animation workspace.

Preview animations instantly, browse your team's assets, test interactive state machines, customize themes and motion tokens, generate integration code, and manage .lottie files without leaving VS Code.

Used by teams from 62,000+ companies worldwide.

Features

Preview animations instantly

Open .lottie or Lottie JSON files and preview them directly inside VS Code.

Features include:

• Playback controls
• Frame scrubbing
• Speed adjustment
• Direction control
• Looping
• Segment playback
• Live reload while editing JSON

Inspect:

• Embedded animations
• Themes
• State machines
• Assets
• Metadata

Browse and download free animations

Search and preview 100,000+ free animations from the LottieFiles library directly inside the editor.

• Search by keyword
• Preview before download
• Customize according to your color palette
• Drag into projects
• Download optimized assets
• Enable CDN with a single click

Workspace integration

Sign in with OAuth to access your team workspace.

• Browse workspace animations
• Upload new files
• Host via CDN
• Manage shared assets
• Access private team content

State machine testing

Preview and interact with dotLottie state machines directly in the editor.

• Trigger transitions
• Test interactive flows
• Validate animation logic
• Debug states visually

This makes the extension especially useful for game UI, onboarding flows, interactive apps, and product animations.

Themes and motion tokens

Edit animation appearance in real time.

• Swap themes
• Override motion token values
• Recolor animations
• Preview changes instantly
• Export customized files

Generate integration code

Copy ready-to-use snippets for:

• React
• Vue
• Angular
• Svelte
• Vanilla JavaScript

Quickly embed animations into production apps with minimal setup.

Lottie JSON developer tooling

Advanced tooling for .lottie.json files:

• IntelliSense
• Schema validation
• Hover documentation
• Quick navigation
• Autocomplete
• Error highlighting

CI/CD integration

Generate automation files for validating animations in your pipeline.

Supports:

• GitHub Actions
• Pre-commit hooks
• .relottierc.json

Type generation

Generate TypeScript types from .lottie files for:

• State machine IDs
• Marker names
• Segments
• Themes

Perfect for type-safe animation workflows.

Installation

Install directly from the VS Code Marketplace:

1. Open Extensions
2. Search for LottieFiles
3. Click Install

Or install manually from a .vsix package.

Supported file types

• .lottie
• .json

Built for modern motion workflows

LottieFiles helps developers and designers collaborate around motion without constantly switching tools.

Use it for:

• App animations
• Product onboarding
• Interactive UI
• Game interfaces
• Motion design systems
• Design engineering workflows