Commands and settings

Open the Command Palette and type LottieFiles to find extension commands. Some file-specific commands also appear in editor, Explorer, or title-bar menus.

Command	Result
`LottieFiles: Open Sidebar`	Focuses the LottieFiles sidebar
`LottieFiles: Preview in Sidebar`	Previews recognized content from the active editor
`LottieFiles: Preview Animation`	Opens a supported Lottie preview
`Explore Contents`	Opens a `.lottie` in dotLottie Explorer
`Refresh`	Refreshes dotLottie Explorer
`LottieFiles: Getting Started`	Opens the extension walkthrough or sidebar fallback

Types and validation commands

Command	Result
`Generate TypeScript Types for .lottie`	Generates state-machine ID and marker-name types for one file
`Generate All Lottie Types (Workspace)`	Generates supported types across the workspace
`Validate Lottie File`	Validates the selected Lottie file
`Bundle as .lottie`	Packages a supported animation as `.lottie`
`Generate .relottierc.json`	Creates a relottie configuration
`Copy GitHub Actions Workflow`	Copies a validation workflow template
`Copy Vite Config Snippet`	Copies a Vite integration fragment
`Setup Pre-commit Hook`	Adds the supported validation hook setup
`Run Validation (relottie)`	Runs the configured relottie validation

Review generated files before committing them. Type generation currently covers state-machine IDs and marker names, not themes or segments.

Preview and hover settings

Setting	Purpose
`lottiefiles.directPreviewJson`	Automatically preview recognized Lottie JSON or require an explicit preview action
`lottiefiles.hover.enabled`	Show metadata when hovering a `.lottie` path in source code
`lottiefiles.snippet.defaultFramework`	Choose React, Vue, Angular, Svelte, or Vanilla as the default
`lottiefiles.snippet.autoplay`	Default generated autoplay behavior
`lottiefiles.snippet.loop`	Default generated loop behavior
`lottiefiles.snippet.speed`	Default generated playback speed
`lottiefiles.snippet.renderer`	Choose SVG or ThorVG for generated code where supported

Validation settings

Setting	Purpose
`lottiefiles.validateOnSave`	Validate `.lottie` files when saved
`lottiefiles.validateOnSave.skipAboveKb`	Skip on-save validation above a size threshold
`lottiefiles.typeGen.warnAboveSizeKb`	Warn before type generation for large files
`lottiefiles.validation.maxFileSizeKb`	Configure the relottie size rule
`lottiefiles.validation.requireAutoplayFalse`	Configure the generated accessibility rule
`lottiefiles.validation.requireSlots`	Configure the generated slot rule
`lottiefiles.validation.jsonGlob`	Choose JSON files for workspace validation
`lottiefiles.schemaValidation.enabled`	Validate against the official Lottie JSON Schema on save
`lottiefiles.schemaValidation.severity`	Report schema issues as error, warning, or hint
`lottiefiles.liveValidation.enabled`	Show live diagnostics while editing Lottie JSON
`lottiefiles.statusBar.enabled`	Show the workspace validation summary

Settings and generated configuration can differ in scope. Inspect the generated .relottierc.json to confirm which rules CI will actually run.

Commands and settings

Preview and navigation commands

Types and validation commands

Preview and hover settings

Validation settings

Related