{"id":34891083,"url":"https://github.com/routevn/route-graphics","last_synced_at":"2026-05-10T06:20:12.978Z","repository":{"id":305078875,"uuid":"1020745442","full_name":"RouteVN/route-graphics","owner":"RouteVN","description":null,"archived":false,"fork":false,"pushed_at":"2026-04-11T17:10:11.000Z","size":4228,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-11T19:27:58.990Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/RouteVN.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-07-16T10:29:07.000Z","updated_at":"2026-04-11T17:09:08.000Z","dependencies_parsed_at":"2025-07-18T08:04:01.565Z","dependency_job_id":"e927be9f-4b81-40a6-85e5-6ffec5f85d3f","html_url":"https://github.com/RouteVN/route-graphics","commit_stats":null,"previous_names":["yuusoft-org/route-graphics","routevn/route-graphics"],"tags_count":89,"template":false,"template_full_name":null,"purl":"pkg:github/RouteVN/route-graphics","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RouteVN%2Froute-graphics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RouteVN%2Froute-graphics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RouteVN%2Froute-graphics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RouteVN%2Froute-graphics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RouteVN","download_url":"https://codeload.github.com/RouteVN/route-graphics/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RouteVN%2Froute-graphics/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31831849,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T07:17:56.427Z","status":"ssl_error","status_checked_at":"2026-04-15T07:17:30.007Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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-12-26T05:31:17.225Z","updated_at":"2026-04-15T08:01:03.594Z","avatar_url":"https://github.com/RouteVN.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Route Graphics\n\nRoute Graphics is a declarative 2D UI/rendering system built on PixiJS. You describe states with JSON, then Route Graphics handles element lifecycle, animations, audio, and interaction events for you.\n\nThis README stays intentionally short. The hosted docs are the source of truth for setup guides, node reference pages, events, asset loading, plugin authoring, and live examples.\n\n## Start Here\n\n- [Documentation](http://route-graphics.routevn.com/docs/introduction/introduction/)\n- [Playground](http://route-graphics.routevn.com/playground/)\n- [Tasks \u0026 Roadmap](http://route-graphics.routevn.com/tasks)\n\n## Installation\n\n```bash\nbun install route-graphics\n```\n\n## Minimal Usage\n\n```javascript\nimport createRouteGraphics, {\n  createAssetBufferManager,\n  textPlugin,\n  rectPlugin,\n  spritePlugin,\n  containerPlugin,\n  tweenPlugin,\n  soundPlugin,\n} from \"route-graphics\";\n\nconst assets = {\n  \"circle-red\": { url: \"/public/circle-red.png\", type: \"image/png\" },\n  \"bgm-1\": { url: \"/public/bgm-1.mp3\", type: \"audio/mpeg\" },\n};\n\nconst assetBufferManager = createAssetBufferManager();\nawait assetBufferManager.load(assets);\n\nconst app = createRouteGraphics();\nawait app.init({\n  width: 1280,\n  height: 720,\n  backgroundColor: 0x000000,\n  plugins: {\n    elements: [textPlugin, rectPlugin, spritePlugin, containerPlugin],\n    animations: [tweenPlugin],\n    audio: [soundPlugin],\n  },\n  eventHandler: (eventName, payload) =\u003e {\n    console.log(eventName, payload);\n  },\n});\n\nawait app.loadAssets(assetBufferManager.getBufferMap());\ndocument.body.appendChild(app.canvas);\n\napp.render({\n  id: \"hello-state\",\n  elements: [\n    {\n      id: \"title\",\n      type: \"text\",\n      x: 40,\n      y: 40,\n      content: \"Hello Route Graphics\",\n      textStyle: {\n        fill: \"#ffffff\",\n        fontSize: 36,\n      },\n    },\n  ],\n  animations: [],\n  audio: [],\n});\n```\n\n`createAssetBufferManager()` may keep image and video assets as direct source\nURLs when possible, while audio and font assets remain buffer-backed.\n\nFor complete usage details, go to:\n\n- [Getting Started](http://route-graphics.routevn.com/docs/introduction/getting-started/)\n- [Assets \u0026 Loading](http://route-graphics.routevn.com/docs/guides/assets-loading/)\n- [Events \u0026 Render Complete](http://route-graphics.routevn.com/docs/guides/events-render-complete/)\n- [Custom Plugins](http://route-graphics.routevn.com/docs/guides/custom-plugins/)\n\n## Development\n\n```bash\n# Run tests\nbun run test\n\n# Ensure VT assets are real binaries, not Git LFS pointer files\ngit lfs pull\ngit lfs checkout\n\n# Build the local docs/playground site\ncd playground\nbun install\nbun run build\n```\n\nThe docs site and playground source live under `playground/`.\n\nVisual regression assets under `vt/static/public` and `vt/reference` are stored in Git LFS. If those files are not checked out, VT pages will render blank and browser logs will show image/audio decode errors.\n\n## Community\n\nJoin us on [Discord](https://discord.gg/8J9dyZSu9C) to ask questions, report bugs, and stay up to date.\n\n## License\n\nThis project is licensed under the [MIT License](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froutevn%2Froute-graphics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Froutevn%2Froute-graphics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Froutevn%2Froute-graphics/lists"}