How can I preview Lottie JSON files after creating them? When I try to view the files, they just open the code in Notepad! :@

I would like to watch the animation like I do after creating a GIF file. Is there any way I can watch a Lottie JSON file like this?


4 Answers 4


If you are looking to preview a Lottie JSON file created using Adobe After Effects, there are plenty of tools you can use to view them. Some of those tools are listed here on LottieFiles integrations page, which can help you view files on Desktop, Mobile and on the web.

Or visit https://lottiefiles.com/preview page, drag & drop your file and you can see your Lottie JSON play, visually.

  • Thank you so much. Nov 23, 2022 at 15:13
  • 1
    To be fair.. there was no mention of Lottie files until 3 comment later :)
    – Scott
    Nov 23, 2022 at 21:49
  • (face palm) JSON file/format is only for LOTTIE. ( face palm again) @Scott Nov 24, 2022 at 6:43
  • No it's not @RussianBlue JSON has many uses. Lottie files are just one of them. :) No big deal.
    – Scott
    Nov 24, 2022 at 8:56
  • :O I didn't know that. :O am so sorry @Scott Nov 24, 2022 at 9:54

JSON (JavaScript Object Notation) files are not animated images. Or anything like an animated image file. One can't simply "watch them". They need a browser, or similar environment, to operate and often exterior objects to manipulate.

JSON files are strings of code which contain instructions for other, exterior, objects (objects which may be image files).

Basically a JSON file may tell objects how to move which may result in those objects appearing to be animated. However, that is quite different than an image moving on its own like in the GIF format.

JSON is more closely related to Javascript in nature than to any image format.

If you are familiar with animations in Cascading Stylesheets (CSS), the concept is similar... the code/markup merely controls how elements are animated, but rarely does it create the actual elements.

  • So once I render a JSON file I cant watch it like GIF?? There is no way? :'( Nov 22, 2022 at 9:44
  • What do you mean by "render"?? Typically, there are other files, such as image files or an HTML file, along with any JSON file... .. and the JSON file merely tells the other files how to move/change.
    – Scott
    Nov 22, 2022 at 9:45
  • I created the animation in AE. then created lottiFiles/JSON files from that. Nov 22, 2022 at 9:47
  • It's web code.. you need a web browser and markup: lottiefiles.com/blog/working-with-lottie/…
    – Scott
    Nov 22, 2022 at 9:53
  • Thank you so much. Nov 22, 2022 at 10:01

i use inari lottie viewer - Microsoft Store


I use LottieFiles for VS Code (programming code editor) extension.

There is also online tool Lottie cloud. Just click borrow then select json file then click on eye icon.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.