# Quickstart
Find an animation in Explore and put working player code into a project.

This quickstart follows one complete developer path: find a public animation, preview it, choose a source, and copy integration code.

## Before you start

- Install the extension. See [Installation](/en/integrations/vscode/01_quickstart/installation).
- Open a project in VS Code, Cursor, or Windsurf.
- Open the LottieFiles sidebar and choose **Explore**.

## 1. Find an animation

Search for a product state such as `loading`, `success`, `error`, or `empty state`. Select a result to open its preview.

## 2. Inspect the result

Play and scrub through the animation. Check its dimensions, duration, background, and available file formats. If the palette does not match the product, make a quick color change and preview it again.

## 3. Choose a durable source

Generated code needs a source that remains available to the application:

- **Download** the animation into the project for local ownership and version control.
- **Save to Workspace and enable CDN** when the team needs a managed permanent URL.
- **Use an existing Workspace or Motion System CDN URL** when the approved asset is already hosted.

Do not ship a temporary upload or preview URL.

## 4. Generate code

Open **Code Snippet**, choose the project framework, and configure playback options. Copy the generated code and install the runtime package shown by the extension.

<Image src="https://assets.docs.lottiefiles.com/static/122cde590e-640.webp" alt="LottieFiles Code Snippet panel showing framework options and generated player code" caption="Choose a framework and copy the generated player code" zoom variant="default" srcSet="https://assets.docs.lottiefiles.com/static/122cde590e-640.webp 640w, https://assets.docs.lottiefiles.com/static/122cde590e-1024.webp 1024w" width="1376" height="870" loading="lazy" data-blur="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAFCAYAAAB4ka1VAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAi0lEQVR4nAXBWxJDMABA0WyjVEQfYTqJZ1B0iqFMP3x0/4u5PUe89oN3PTO/VkzVsHQr72HBupZPvyHaacPdLEViUFrT6Iw0NkQ6ZkgqxLgeBEpxuV15mJxzpFCRwtiCQIWI57Rz8nxkqLjqBClDIhlwjxOk7yGm7w9b1uSupepG0rIhcy2uH7Flwx8jMz4OWJAFUgAAAABJRU5ErkJggg==" />

## 5. Verify in the project

Run the application and confirm that:

- The animation loads from the intended source.
- Autoplay and loop behavior match the preview.
- The rendered size and background work in the component.
- The browser or runtime console has no loading errors.

## Next steps

- [Choose an output format](/en/integrations/vscode/05_integrate/choosing-an-output-format).
- [Publish a Workspace animation with CDN](/en/integrations/vscode/05_integrate/publishing-with-cdn).
- [Preview a local Lottie file](/en/integrations/vscode/04_inspect/previewing-local-lottie-files).
- [Generate an interaction pattern](/en/integrations/vscode/05_integrate/generating-interaction-snippets).
- [Use Motion System primitives](/en/integrations/vscode/06_motion-system/using-motion-system-primitives).