Renderers and the smaller builds

Three renderers draw an animation: svg, the default, canvas, and html.

import { Lottie } from "lottie-react";export function Canvas() {  return <Lottie src="/anim.json" autoplay loop renderer="canvas" />;}

renderer and rendererSettings are typed as a pair: choose canvas and the settings type is the canvas one. The html renderer needs a block element, so as refuses inline tags while it is chosen.

The smaller builds

lottie-web ships smaller copies of its engine, and two of them have a component and a hook here. Both render svg only, and the types refuse the other renderers, so the choice is about what else the engine has to do:

Engine sizes are lottie-web 5.13, minified and gzipped.

The svg build

LottieSvg and useLottieSvg keep the expression engine, so an After Effects export that drives its properties with expressions plays as designed:

import { LottieSvg } from "lottie-react";export function Svg() {  return <LottieSvg src="/anim.json" autoplay loop />;}

The light build

LottieLight and useLottieLight carry the smallest copy of the engine:

import { LottieLight } from "lottie-react";export function Light() {  return <LottieLight src="/anim.json" autoplay loop />;}

The light engine evaluates no expressions and applies no layer effects, so a property they drive is drawn at its static value; in development, loading such an animation logs a warning that names the svg build. It also contains no eval, which matters under a strict Content Security Policy.

What an import costs

The package is tree-shakeable: it ships one file per module and declares itself side-effect free, so a bundler keeps only what an import reaches. Lottie alone does not pay for the controls or the overlays, and LottieSvg and LottieLight never pull any engine but their own, which the build measures. Measured with react and lottie-web external, minified and gzipped: Lottie alone is about 4.4 KB and useLottie alone about 3.4 KB. A whole-package figure, the kind a size badge or a bundle analyzer shows for the package as a unit, sums all three engines and describes no real import: with the engine included, Lottie alone is about 81 KB gzipped, LottieSvg about 67 KB and LottieLight about 51 KB.