# Utilities tab
Reference the local Upload, dotLottie Composer, and interaction Snippets utilities.

Utilities groups three independent developer tools. Use this page to identify the right one, then follow its complete task guide.

<Image src="https://assets.docs.lottiefiles.com/static/5f540ce6ea-640.webp" alt="Utilities Upload and local animation preview in VS Code" caption="Utilities Upload and local animation preview in VS Code" 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==" />

## Upload

Upload opens a local `.json` or `.lottie` for preview. It does not upload the file to LottieFiles Workspace.

You can:

- Browse for one local Lottie file.
- Drag a file into the supported drop area when the IDE accepts operating-system file drops.
- Reopen a recent file from the current session.
- Remove an item from session history without deleting the original.

See [Previewing local Lottie files](/en/integrations/vscode/04_inspect/previewing-local-lottie-files).

For Creator files, images, SVGs, design sources, videos, or a durable team upload, use [Workspace upload](/en/integrations/vscode/03_workspace/uploading-and-organizing-assets).

## dotLottie Composer

Composer builds a `.lottie` bundle from several animations. It manages animation IDs, order, the initial animation, supported playback configuration, and metadata.

See [Creating a multi-animation bundle](/en/integrations/vscode/05_integrate/creating-a-multi-animation-bundle).

## Snippets

Snippets generates Scroll, Viewport, Hover, Hover Reverse, Click, and State Machine patterns for React, Vue 3, or Vanilla JavaScript.

When available, it uses the last CDN-enabled Workspace file as the source. Otherwise it leaves a placeholder URL. If the workspace disables CDN links, replace the placeholder with a project file or another durable source.

See [Generating interaction snippets](/en/integrations/vscode/05_integrate/generating-interaction-snippets).

## Tool map

| Utility            | Input                                    | Output                           |
| ------------------ | ---------------------------------------- | -------------------------------- |
| Upload             | One local `.json` or `.lottie`           | Session preview                  |
| dotLottie Composer | Several Lottie animations                | Multi-animation `.lottie` bundle |
| Snippets           | Pattern, framework, and animation source | Interaction code                 |