{"id":13484903,"url":"https://github.com/LottieFiles/dotlottie-web","last_synced_at":"2025-03-27T16:31:43.624Z","repository":{"id":203448683,"uuid":"707552684","full_name":"LottieFiles/dotlottie-web","owner":"LottieFiles","description":"Official LottieFiles player for rendering Lottie and dotLottie animations in the web. Supports React, Vue, Svelte, SolidJS and Web Components.","archived":false,"fork":false,"pushed_at":"2024-10-29T14:59:03.000Z","size":30621,"stargazers_count":179,"open_issues_count":35,"forks_count":11,"subscribers_count":7,"default_branch":"main","last_synced_at":"2024-10-29T17:12:15.870Z","etag":null,"topics":["animation","canvas","dotlottie","easy","immersive","javascript","lottie","painless","thorvg","web"],"latest_commit_sha":null,"homepage":"https://developers.lottiefiles.com/docs/dotlottie-player/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/LottieFiles.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-10-20T06:42:23.000Z","updated_at":"2024-10-29T13:37:59.000Z","dependencies_parsed_at":"2023-11-08T07:49:59.537Z","dependency_job_id":"7c3cb827-ffc5-467e-87c7-37609f406e8b","html_url":"https://github.com/LottieFiles/dotlottie-web","commit_stats":null,"previous_names":["lottiefiles/dotlottie-web"],"tags_count":219,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/LottieFiles%2Fdotlottie-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/LottieFiles","download_url":"https://codeload.github.com/LottieFiles/dotlottie-web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":222247647,"owners_count":16955121,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","canvas","dotlottie","easy","immersive","javascript","lottie","painless","thorvg","web"],"created_at":"2024-07-31T17:01:38.273Z","updated_at":"2024-10-30T18:31:50.223Z","avatar_url":"https://github.com/LottieFiles.png","language":"TypeScript","readme":"![CI](https://github.com/LottieFiles/dotlottie-web/workflows/main/badge.svg)\n![GitHub contributors](https://img.shields.io/github/contributors/LottieFiles/dotlottie-web)\n[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa.svg)](CODE_OF_CONDUCT.md)\n![GitHub](https://img.shields.io/github/license/LottieFiles/dotlottie-web)\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/23125742/201124166-c2a0bc2a-018b-463b-b291-944fb767b5c2.png\" /\u003e\n\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003edotLottie Web\u003c/h1\u003e\n\nStreamline your web animations with LottieFiles' official players for dotLottie and Lottie animations. Designed for quick integration, these packages help developers swiftly bring animated visuals into web projects with minimal effort.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"./assets/1.gif\" alt=\"dotLottie web sample 1\" /\u003e\n\n  \u003cimg src=\"./assets/2.gif\" alt=\"dotLottie web sample 2\" /\u003e\n\n  \u003cimg src=\"./assets/3.gif\" alt=\"dotLottie web sample 3\" /\u003e\n\n  \u003cimg src=\"./assets/4.gif\" alt=\"dotLottie web sample 4\" /\u003e\n\u003c/div\u003e\n\n# What is dotLottie?\n\ndotLottie is an open-source file format that aggregates one or more Lottie files and their associated resources into a single file. They are ZIP archives compressed with the Deflate compression method and carry the file extension of \".lottie\".\n\n[Learn more about dotLottie](https://dotlottie.io/).\n\n## Contents\n\n* [Packages](#packages)\n* [Getting Started](#getting-started)\n  * [Prerequisites](#prerequisites)\n  * [Setup](#setup)\n* [Live Examples](#live-examples)\n* [Local Examples](#local-examples)\n* [Development](#development)\n  * [Building Packages](#building-packages)\n  * [Running Locally](#running-locally)\n  * [Scripts](#scripts)\n* [Contributing](#contributing)\n* [License](#license)\n\n### Packages\n\nThe monorepo contains the following package:\n\n| Package                                                        | Description                                                                                                                                                             |\n| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| **[@lottiefiles/dotlottie-web](packages/web/README.md)**       | A JavaScript library for rendering Lottie and dotLottie animations in the browser or Node.js.                                                                           |\n| **[@lottiefiles/dotlottie-react](packages/react/README.md)**   | A React component wrapper for `dotlottie-web` that provides a declarative API for rendering Lottie and dotLottie animations and UI controls for interacting with them.  |\n| **[@lottiefiles/dotlottie-wc](packages/wc/README.md)**         | A Web Component wrapper for `dotlottie-web` that provides a declarative API for rendering Lottie and dotLottie animations and UI controls for interacting with them.    |\n| **[@lottiefiles/dotlottie-vue](packages/vue/README.md)**       | A Vue component wrapper for `dotlottie-web` that provides a declarative API for rendering Lottie and dotLottie animations and UI controls for interacting with them.    |\n| **[@lottiefiles/dotlottie-svelte](packages/svelte/README.md)** | A Svelte component wrapper for `dotlottie-web` that provides a declarative API for rendering Lottie and dotLottie animations and UI controls for interacting with them. |\n\n\u003e Note: Each package has its own README.md with detailed documentation on usage and APIs.\n\n### Getting Started\n\nTo contribute to this monorepo or use its packages in your project, follow these setup steps:\n\n#### Prerequisites\n\nEnsure you have the following installed:\n\n* Node.js version 18 or greater\n* `pnpm` version 8\n\n#### Setup\n\nClone the monorepo:\n\n```bash\ngit clone https://github.com/LottieFiles/dotlottie-web.git\ncd dotlottie-web\n```\n\nInstall dependencies:\n\n```bash\npnpm install\n```\n\n### Live Examples\n\n* `@lottiefiles/dotlottie-web`\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/JjzJZmL\" target=\"_blank\"\u003eGetting Started\u003c/a\u003e\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/dyrRKwg\" target=\"_blank\"\u003eControlling Animation Playback\u003c/a\u003e\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/JjzJZgB\" target=\"_blank\"\u003eDynamic Animation Loading\u003c/a\u003e\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/wvOxdRa\" target=\"_blank\"\u003eMulti Animations .lottie file\u003c/a\u003e\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/LYvZveR\" target=\"_blank\"\u003eAdvanced Animation Layout\u003c/a\u003e\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/RwOROKp\" target=\"_blank\"\u003eNamed Markers\u003c/a\u003e\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/BaEzEeq\" target=\"_blank\"\u003edotLottie theming\u003c/a\u003e\n\n* `@lottiefiles/dotlottie-react`\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/vYPJpBN\" target=\"_blank\"\u003eGetting Started\u003c/a\u003e\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/WNmEdxd\" target=\"_blank\"\u003eCustom Playback Controls\u003c/a\u003e\n\n* `@lottiefiles/dotlottie-vue`\n  * \u003ca href=\"https://codepen.io/lottiefiles/pen/yLwgeoJ\" target=\"_blank\"\u003eGetting Started\u003c/a\u003e\n\n### Local Examples\n\nDiscover how to implement and utilize the dotlottie-web packages with our example applications. These examples serve as a practical guide to help you understand how to integrate Lottie and dotLottie animations into your web projects.\n\nAvailable examples:\n\n* [dotlottie-web-example](apps/dotlottie-web-example/src/main.ts): A basic typescript example app of how to use `@lottiefiles/dotlottie-web` to render a Lottie or dotLottie animation in the browser.\n* [dotlottie-web-node-example](apps/dotlottie-web-node-example/index.ts): This example demonstrates how to use the `@lottiefiles/dotlottie-web` in a Node.js environment. It showcases controlling animation playback, rendering frame by frame, and converting a dotLottie animation into a GIF file. for more information, see the [README](apps/dotlottie-web-node-example/README.md).\n\n#### Running Examples\n\n* Clone the repository:\n\n```bash\ngit clone https://github.com/LottieFiles/dotlottie-web.git\ncd dotlottie-web\n```\n\n* Install dependencies:\n\n```bash\npnpm install\n```\n\n* Build the packages:\n\n```bash\npnpm run build\n```\n\n* Run the app:\n\n```bash\n# Change directory to the example app folder\ncd apps/dotlottie-web-example \npnpm run dev\n```\n\nFeel free to modify and play around with the code to see how changes affect the animations.\n\n### Development\n\n#### Building Packages\n\nTo build all packages within the monorepo:\n\n```bash\npnpm run build\n```\n\n#### Running Locally\n\nTo start a local development environment for all packages:\n\n```bash\npnpm run dev\n```\n\n#### Scripts\n\nHere's a brief explanation of the scripts available in the root package.json:\n\n* `build`: Builds all packages using turbo.\n* `changelog`: Adds a changeset to generate changelog and version updates.\n* `clean`: Cleans up the repository by removing development artifacts.\n* `dev`: Runs all packages in development/watch mode.\n* `format`: Formats the codebase using Prettier and Remark.\n* `lint`: Lints the codebase using ESLint.\n* `test`: Runs tests across all packages.\n* `type-check`: Checks for TypeScript type errors.\n\nFor a full list of available scripts, see the `scripts` section in `package.json`.\n\n### Contributing\n\nWe welcome contributions to any of the packages in this monorepo. Please read our [Contributing Guidelines](CONTRIBUTING.md) and our [Code of Conduct](CODE_OF_CONDUCT.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to the project.\n\n### License\n\n[MIT](LICENSE) © [LottieFiles](https://www.lottiefiles.com)\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLottieFiles%2Fdotlottie-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FLottieFiles%2Fdotlottie-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FLottieFiles%2Fdotlottie-web/lists"}