{"id":29196845,"url":"https://github.com/marko-js/rive","last_synced_at":"2025-07-02T06:33:03.164Z","repository":{"id":263691141,"uuid":"891190121","full_name":"marko-js/rive","owner":"marko-js","description":"A wrapper around `@rive/canvas-lite` for Marko","archived":false,"fork":false,"pushed_at":"2024-11-26T20:23:41.000Z","size":2542,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-23T13:01:54.895Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://markojs.com/rive","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/marko-js.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"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":"2024-11-19T22:16:35.000Z","updated_at":"2024-11-26T20:22:09.000Z","dependencies_parsed_at":"2024-11-19T23:39:33.802Z","dependency_job_id":null,"html_url":"https://github.com/marko-js/rive","commit_stats":null,"previous_names":["marko-js/rive"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/marko-js/rive","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marko-js","download_url":"https://codeload.github.com/marko-js/rive/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marko-js%2Frive/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263086249,"owners_count":23411671,"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":[],"created_at":"2025-07-02T06:30:52.351Z","updated_at":"2025-07-02T06:33:03.155Z","avatar_url":"https://github.com/marko-js.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Marko Rive\n\nA wrapper around the `@rive/canvas-lite` package that provides a Marko component for rendering [Rive](https://rive.app/) animations.\n\n## Installation\n\n```bash\nnpm install @marko-tags/rive\nyarn add @marko-tags/rive\n```\n\n## Usage\n\n### Marko 6 (Tags API)\n\n```marko\nimport riveAsset from \"./path/to/asset.riv\";\n\n\u003crive-canvas/riveInstance src=riveAsset/\u003e\n\n\u003cscript\u003eriveInstance().play();\u003c/script\u003e\n```\n\n### Marko 5 (Class API)\n\n```marko\nimport riveAsset from \"./path/to/asset.riv\";\nimport type { Rive } from \"@rive-app/canvas-lite\";\n\n\u003crive-canvas src=riveAsset onMount(\"handleMounted\")/\u003e\nclass {\n  declare riveInstance: Rive;\n  handleMounted(instance: Rive) {\n    this.riveInstance = instance;\n    this.riveInstance.play();\n  }\n}\n```\n\n## Preloading the Rive Runtime\n\nBy default, the Rive runtime is loaded asynchronously when the component is mounted. This is harmful for performance, especially for assets which are visible on page load. To preload the runtime, be sure that you add this tag to the `\u003chead\u003e` of each document that uses Rive assets:\n\n```marko\n\u003crive-preload-vite/\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Frive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarko-js%2Frive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarko-js%2Frive/lists"}