# Documentation
Documentation for dotLottie players, Lottie Creator, file formats, and developer tools — everything you need to build with Lottie animations.

<HeroSimple title=" Lottie Documentation" subtitle="Create, package, and deliver Lottie animations using LottieFiles tools and open formats." />

<Grid columns={{ sm: 1, md: 2, lg: 3 }} gap="lg">
  <Card title="Create animations" subtitle="LottieFiles Creator" icon="ph:paint-brush-duotone" href="/en/creator" variant="interactive" className="px-5 py-6" footer={<a href="/en/creator">Explore Creator docs →</a>}>
    Design and export animations using LottieFiles Creator.

    Build motion with timeline tools, then export to Lottie JSON or dotLottie for production use.
  </Card>

  <Card title="Deliver & render animations" subtitle="dotLottie Runtimes" icon="ph:play-duotone" href="/en/runtimes" variant="interactive" className="px-5 py-6" footer={<a href="/en/runtimes">Explore Runtimes →</a>}>
    Integrate Lottie animations across web and mobile apps.
    Use dotLottie runtimes for fast, consistent playback across frameworks and platforms.
  </Card>

  <Card title="Formats & specifications" subtitle="Lottie JSON & dotLottie" icon="ph:file-duotone" href="/en/format" variant="interactive" className="px-5 py-6" footer={<a href="/en/format">Explore format specs →</a>}>
    Understand how Lottie animations are structured and delivered.
    Learn the differences between Lottie JSON and dotLottie, and when to use each.
  </Card>
</Grid>

<Spacer />

<Spacer size="xl" />

<Grid columns={4} gap="lg">
  <Feature icon="ph:github-logo-duotone" title="Open Source" subtitle="MIT-licensed. No vendor lock-in." variant="horizontal" />

  <Feature title="Proven at Scale" subtitle="Billions of renders in production monthly." icon="ph:package-duotone" variant="horizontal" />

  <Feature title="Built for Developers" subtitle="TypeScript-first APIs, every platform." icon="ph:code-duotone" variant="horizontal" />

  <Feature title="Open Standards" subtitle="Open spec. Not locked to any vendor." icon="ph:shield-check-duotone" variant="horizontal" />
</Grid>