Introducing the Sanity Lottie Plugin: Bringing Animations to Life in Your CMS

We're excited to announce the launch of our latest tool: the Sanity Lottie Plugin. After working extensively with Sanity CMS and seeing the growing demand for rich, interactive content, we identified a clear gap in the ecosystem; there was no native way to handle Lottie animations in Sanity Studio.

So we built one: https://www.npmjs.com/package/sanity-plugin-lottie.

The Problem We Solved

Lottie animations have become the gold standard for web animations. They're lightweight, scalable, and created by professional animators in tools like After Effects. But despite their popularity, Sanity users were stuck with workarounds: embedding animations through custom code blocks or managing them as static assets without proper previews.

Content creators deserved better. They needed a way to upload Lottie files directly in the Studio, preview them instantly, and use them just like any other media asset.

What Makes This Plugin Special

Instant Studio Previews

The moment you upload a Lottie .json file, you can see it playing right in the Studio. No more guessing whether an animation will work or look right. You get immediate visual feedback.

Smart File Validation

The plugin automatically validates that uploaded files are legitimate Lottie animations, preventing broken assets from entering your content system.

Animation Insights

Get useful metadata about your animations including duration, frame count, and frame rate—helpful for developers and content creators planning their implementations.

Dead Simple Integration

Adding Lottie support to your Sanity project takes just two steps:

1. Install the plugin
2. Add the lottie type to your schema

That's it. No complex configuration, no additional setup.

The Technical Challenge

Building this plugin required solving an interesting technical challenge: how do you preview JSON-based animations in a React environment like Sanity Studio?

We integrated the @lottiefiles/react-lottie-player library to handle the rendering, wrapped it in Sanity's component architecture, and added validation to ensure only proper Lottie files make it through. The result is a seamless experience that feels native to Sanity Studio.

Real Impact for Content Teams

This plugin transforms how content teams work with animations:

• Designers can upload their After Effects exports directly to the CMS
• Content creators can preview animations before publishing
• Developers get clean, structured data to work with on the frontend
• Project managers can review animated content without switching between tools

What's Next

This plugin represents our commitment to improving the Sanity ecosystem. We've seen firsthand how the right tools can streamline workflows and unlock creative possibilities.

We're already planning enhancements based on community feedback — things like playback controls, animation segments, and render quality options. But for now, we're excited to see how teams use this foundation.

Try It Today

The Sanity Lottie Plugin is available now on npm:

npm install sanity-plugin-lottie

Check out the full documentation on GitHub, and let us know how it works for your projects.