# VS Code
Find, inspect, and integrate Lottie animations without leaving a VS Code-based IDE.

The LottieFiles extension brings animation discovery, inspection, and delivery into Visual Studio Code, Cursor, and Windsurf. Preview local files, use team assets, test advanced dotLottie features, and generate implementation code without returning to a designer's canvas.

<Image src="https://assets.docs.lottiefiles.com/static/a1783df954-640.webp" alt="LottieFiles extension open beside a code editor with an animation preview and download controls" caption="Find an animation, inspect it, and move directly into implementation" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/a1783df954-640.webp 640w, https://assets.docs.lottiefiles.com/static/a1783df954-1024.webp 1024w" width="1376" height="1232" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAHCAYAAAA1WQxeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAwUlEQVR4nB3O3W6CMACA0T7FtiAtaQEBM3UCIj+zokQwRhbisiXb+7/Ht8z7c3FEP/1Q1i1FdaBqz5S2o2ha8nJPN34jmnbAT18x2QrPlURJgjtzeHl+oj5e/sEFVWToPMUoj3j1xnK9ZhnPaYcRYYcRTyqUVGitCZMFSbIg8jW2HxGHfkRLha8UvjEPEMURgfaw5xuivk442w3OLscNDEEQEoY+npzx3l0Rp/sv2487xfRJuj8+9lll2ewaTrcv/gDLdljW6SzqwwAAAABJRU5ErkJggg==" />

## Core workflow

1. **Find** an animation in Explore, Workspace, or your team's Motion System.
2. **Inspect** playback, multi-animation contents, themes, motion tokens, or state machines.
3. **Integrate** by downloading the right format, publishing a Workspace URL, or generating code.

Follow the [Quickstart](/en/integrations/vscode/01_quickstart) for the fastest complete workflow.

## Choose a starting point

| Starting point | Use it when                                                           | Next step                                                                                         |
| -------------- | --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------- |
| **Explore**    | You need to discover a public animation                               | [Explore](/en/integrations/vscode/02_explore)                                                     |
| **Workspace**  | Your team already saved or approved the asset                         | [Workspace](/en/integrations/vscode/03_workspace)                                                 |
| **Local file** | A `.json` or `.lottie` file is already in the project                 | [Previewing local Lottie files](/en/integrations/vscode/04_inspect/previewing-local-lottie-files) |
| **System**     | You need an approved color, easing, font, preset, or collection asset | [Motion System](/en/integrations/vscode/06_motion-system)                                         |

## Developer tools

- Preview and validate Lottie JSON while editing.
- Inspect animation IDs, markers, segments, themes, motion tokens, and state machines.
- Download original or optimized `.lottie`, Lottie JSON, or Animated SVG (SMIL).
- Publish Workspace assets with permanent CDN links.
- Generate player and interaction code.
- Create multi-animation dotLottie bundles.
- Generate TypeScript identifiers and CI validation files.

## Supported IDEs

The extension supports Visual Studio Code, Cursor, and Windsurf. Some first-run and walkthrough behavior differs between IDEs. See [IDE compatibility and troubleshooting](/en/integrations/vscode/07_reference/ide-compatibility-and-troubleshooting).