# Interface
Learn the Explore, Workspace, System, Utilities, preview, and developer-tooling surfaces.

The extension combines an asset sidebar with editor-aware preview and developer tools.

## Sidebar tabs

- **Explore** - search public LottieFiles animations. See [Explore](/en/integrations/vscode/02_explore).
- **Workspace** - browse, upload, organize, download, and publish team assets. See [Workspace](/en/integrations/vscode/03_workspace).
- **System** - browse shared Motion System primitives and insert developer-ready values or code. See [Motion System](/en/integrations/vscode/06_motion-system).
- **Utilities** - preview a local upload, build a dotLottie bundle, or generate interaction snippets. See [Utilities tab](/en/integrations/vscode/07_reference/utilities-tab).

<Image src="https://assets.docs.lottiefiles.com/static/e7a8e011d2-640.webp" alt="Motion System asset preview in VS Code" caption="Motion System asset preview in VS Code" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/e7a8e011d2-640.webp 640w, https://assets.docs.lottiefiles.com/static/e7a8e011d2-1024.webp 1024w, https://assets.docs.lottiefiles.com/static/e7a8e011d2-1920.webp 1920w" width="1920" height="1080" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAj0lEQVR4nGPwiUj+D8Jmtk7/tfWN/xua2/73CU8Ci3mHJ/1lADH8IlP+q6pr/GdjZf4vLCwCkgArAGEGn4iU/15hCf/tHZ3/x8cn/ndx8/zvERL/3zcyBaLALyr1v2tg9H8vb7//Gzdu/Z+ekf3f2T/qP0gcYkIkxARjE7P/dnb2/w0Mjf97hkJM8I5I/gMAGmdMtt9WmecAAAAASUVORK5CYII=" />

## Preview and inspection

An animation preview can open from Explore, Workspace, Utilities Upload, or a local editor file. Its available panels depend on the source and file:

- Playback and frame controls.
- File and manifest information.
- Multi-animation selection.
- Markers and custom segments.
- Themes and motion tokens.
- State-machine controls.
- Color palette and generated code.
- Download and CDN actions.

## Editor integrations

The extension contributes JSON schema validation, IntelliSense, hover information, navigation, and the dotLottie Explorer. Use the Command Palette for preview, validation, type generation, and CI setup commands.

## Workspace context

Workspace determines which team assets are visible. The System tab follows the workspace selected in Workspace rather than using a separate workspace selector.

## Related

- [Commands and settings](/en/integrations/vscode/07_reference/commands-and-settings)
- [Previewing local Lottie files](/en/integrations/vscode/04_inspect/previewing-local-lottie-files)