# Previewing local Lottie files
Open a local .lottie or Lottie JSON file and inspect playback and file features in VS Code.

Preview a local animation while you work instead of switching to a separate player.

<Image src="https://assets.docs.lottiefiles.com/static/5f540ce6ea-640.webp" alt="Utilities Upload beside a local animation preview with playback, motion token, and code panels" caption="Open a local file from Utilities or directly from the editor" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/5f540ce6ea-640.webp 640w, https://assets.docs.lottiefiles.com/static/5f540ce6ea-1024.webp 1024w" width="1376" height="870" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAkUlEQVR4nC3KSwqCUABAUReiEaj5np9SLEsTGiRhVhpB/mighO1/B7dBnfFR8seLMErwgw1RnOKHO/IkJwi3nJ8DyuneYUsHKSRSSizLIRY+pmn8Q9UibAeR7pGOh+16aPMZumFR1APKpRnJbjXHqiErG1bBGk1V0XXjF67tm7KfKLuJsv8QxgcWwsZdBhT1yBd7JERLlBhNNQAAAABJRU5ErkJggg==" />

## Open a local file

Use either entry point:

- Open a recognized `.lottie` or Lottie JSON file in the editor and run the LottieFiles preview action.
- Open `Utilities -> Upload`, browse for a `.lottie` or `.json` file, then click **Preview**.

Utilities keeps a recent list for the current session. Removing an entry from that list does not delete the original file.

The extension can also preview a recognized unsaved Lottie JSON buffer. Save the file before using project-relative integration paths.

## Playback controls

Use the preview to:

- Play or pause.
- Scrub through frames.
- Toggle looping.
- Change playback speed.
- Change the preview background.
- Reload after editing.

For Lottie JSON, the preview refreshes while you edit valid animation data. Invalid JSON pauses the successful update until the syntax is fixed.

## Inspect the file

The available panels depend on the file contents:

- **Info or manifest** - format, dimensions, duration, and embedded metadata.
- **Animations** - child animations inside a multi-animation `.lottie`.
- **Markers** - named frame ranges that code can play.
- **Segments** - custom start and end frames for testing.
- **Themes and motion tokens** - embedded styles and editable slots.
- **State machines** - interactive logic and inputs.
- **Code Snippet** - runtime code for the current source.

## Invalid or unrecognized JSON

General JSON files do not open as Lottie previews. A Lottie animation normally contains animation version, layers, assets, frame range, and composition dimensions. Use editor diagnostics and [validation tools](/en/integrations/vscode/05_integrate/validating-animations-and-generating-types) to locate errors.

## Related

- [Working with multi-animation files](/en/integrations/vscode/04_inspect/working-with-multi-animation-files)
- [Using themes and motion tokens](/en/integrations/vscode/04_inspect/using-themes-and-motion-tokens)
- [Testing state machines](/en/integrations/vscode/04_inspect/testing-state-machines)