# Working with multi-animation files
Inspect, select, rename, and extend animations inside a multi-animation dotLottie file.

A `.lottie` file can package several animations behind stable IDs. Use the preview to inspect the bundle before selecting an animation in runtime code or building a new bundle.

## Browse embedded animations

Open the `.lottie` preview and use the animation thumbnails or list to switch the active animation. The manifest's first or configured animation is the default.

<Image src="https://assets.docs.lottiefiles.com/static/3550b8dd17-640.webp" alt="A multi-animation dotLottie file selected in VS Code" caption="A multi-animation dotLottie file selected in VS Code" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/3550b8dd17-640.webp 640w, https://assets.docs.lottiefiles.com/static/3550b8dd17-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/3550b8dd17-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAkUlEQVR4nBXNMQ6CQBBA0b2D0UoiCzg7gGYD0V4SNYJWYKFYqJe042aab+he90zd3qialv3lStP11O2duu05d4/RP5OmKVW1oyxLYhHUe1QdThyighFVhuHD6/1kMp2x8gWZE3SZkEQRpvQZh9OR7abAWkue5/hMKTJlnTqMOGWxCAmCOTaOGUuJQmIbktjw+wfwsUD1qyuqhgAAAABJRU5ErkJggg==" />

Check each child for:

- Its animation ID.
- Dimensions and frame range.
- Markers and segments.
- Theme, motion-token, or state-machine dependencies.

## Rename an animation ID

Manifest-backed animation IDs can be renamed from the bundle interface. Use short, stable developer-facing names such as `idle`, `loading`, `success`, or `error`.

Changing an ID can break code that already references the previous value. Update runtime calls and generated types together.

## Add another animation

Use the add control in the preview to append another Lottie animation to the current bundle. Confirm the ID and active animation after the updated bundle loads.

For a deliberate multi-file build with ordering, metadata, and a chosen initial animation, use [dotLottie Composer](/en/integrations/vscode/05_integrate/creating-a-multi-animation-bundle).

## Use one animation in code

Keep the `.lottie` file as the source and select its animation ID with the target dotLottie runtime. This preserves the rest of the bundle for other states or components.

## Do not switch to JSON for bundle features

Lottie JSON represents one animation. Exporting a `.lottie` bundle as JSON keeps only the active animation and drops dotLottie-only multi-animation, theme, motion-token, and state-machine features. The extension warns before a lossy JSON download or URL action.

## Preview changes vs saved output

Changes made in the preview are not a durable project artifact until you download or save the updated `.lottie`. Reopen the saved result to verify its manifest before integrating it.

## Related

- [Choosing an output format](/en/integrations/vscode/05_integrate/choosing-an-output-format)
- [Validating animations and generating types](/en/integrations/vscode/05_integrate/validating-animations-and-generating-types)