Publishing with CDN

Publish with CDN when the application should load a team-managed animation from a permanent URL instead of bundling the file locally.

Before you start

• Sign in to LottieFiles.

• Save the animation in Workspace.

• Confirm that the workspace allows CDN links.

• Confirm that you have permission to publish the file.

Workspace settings can disable CDN links for the entire team. In that case, the extension hides or disables publication actions.

Enable CDN

1. Open the animation in Workspace.

2. Find the CDN or public-asset section.

3. Enable CDN for an available .lottie or Lottie JSON asset.

4. Wait for the publication result.

5. Copy the generated URL.

Use the .lottie URL when the source depends on dotLottie-only features. The extension warns before substituting a JSON URL that would lose them.

Use the URL in code

Paste the URL into the generated Code Snippet or your runtime configuration. A published URL normally uses the LottieFiles hosting domain and remains available independently from the current preview session.

import { DotLottieReact } from "@lottiefiles/dotlottie-react";

export function StatusAnimation() {
  return <DotLottieReact src="https://lottie.host/example/animation.lottie" autoplay loop />;
}

Replace the example with the exact URL copied from Workspace.

Update the animation

After creating a new file or version, reopen its CDN section and confirm which published asset is active. Refresh generated snippets so they reference the intended file and format.

Disable CDN

Disable the public asset when the application no longer uses it or the file should not remain public. Removing a live URL can break deployed clients, so update consumers before disabling it.

Motion System URLs are different

The System tab exposes the existing URL stored on a collection asset. It does not publish or toggle CDN access. See Using Motion System primitives.

Troubleshooting

• Enable CDN is missing - ask a workspace administrator whether CDN links are allowed.

• The snippet still shows a placeholder - return to Workspace, enable CDN for the file, then reopen Utilities Snippets.

• The URL loads the wrong version - verify the active Workspace file and published asset before copying again.