{"id":13608884,"url":"https://github.com/raphamorim/react-ape","last_synced_at":"2025-05-15T09:09:19.519Z","repository":{"id":37484267,"uuid":"135634420","full_name":"raphamorim/react-ape","owner":"raphamorim","description":"🦍• React Renderer to build UI interfaces using canvas/WebGL (TV and Hardware-Accelerated GPU development based)","archived":false,"fork":false,"pushed_at":"2023-08-21T14:05:35.000Z","size":38956,"stargazers_count":1583,"open_issues_count":20,"forks_count":48,"subscribers_count":24,"default_branch":"main","last_synced_at":"2025-04-14T15:00:54.689Z","etag":null,"topics":["canvas","canvas-html5","gl","react","react-ape","react-renderer","render","renderer","webgl","webgl2"],"latest_commit_sha":null,"homepage":"https://raphamorim.io/react-ape/","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/raphamorim.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":".github/CODEOWNERS","security":null,"support":null,"governance":null},"funding":{"github":["raphamorim"]}},"created_at":"2018-05-31T20:54:53.000Z","updated_at":"2025-03-12T18:41:40.000Z","dependencies_parsed_at":"2023-02-08T04:15:29.559Z","dependency_job_id":"ce264367-7f5f-4f7d-bedf-c1d4063719d5","html_url":"https://github.com/raphamorim/react-ape","commit_stats":{"total_commits":283,"total_committers":10,"mean_commits":28.3,"dds":0.1413427561837456,"last_synced_commit":"0d0215477e306f1c2c0a3b9b83965b6e45e516e7"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-ape","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-ape/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-ape/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-ape/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/react-ape/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254310520,"owners_count":22049470,"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":["canvas","canvas-html5","gl","react","react-ape","react-renderer","render","renderer","webgl","webgl2"],"created_at":"2024-08-01T19:01:30.761Z","updated_at":"2025-05-15T09:09:14.510Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","funding_links":["https://github.com/sponsors/raphamorim"],"categories":["JavaScript","Television","HarmonyOS"],"sub_categories":["Windows Manager"],"readme":"# [React Ape](https://raphamorim.io/react-ape)\n\n\u003e React Renderer to build UI interfaces using Canvas/WebGL \n\n\u003cimg src=\"assets/logo.png\" width=\"220\" /\u003e\n\n## [Check the Docs (raphamorim.io/react-ape)](https://raphamorim.io/react-ape)\n\n## [Join our Discord](https://discord.gg/njHHfRzJ42)\n\n### DISCLAIMER: In experimental stage\n\nReact Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional [React-TV](https://github.com/raphamorim/react-tv) renderer. It's mainly a renderer focused on creating things for TV, PS5, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices.\n\nReact Ape lets you build Canvas apps using React. React Ape uses the same design as React, letting you compose a rich UI from declarative components.\n\n## Understanding the Problem\n\n*tl;dr:* [Crafting a high-performance TV user interface using React](https://netflixtechblog.com/crafting-a-high-performance-tv-user-interface-using-react-3350e5a6ad3b) (and also good to read: [60 FPS on the mobile web](https://engineering.flipboard.com/2015/02/mobile-web))\n\nCrafting a high-performance TV user interface based on DOM is a real challenge, because of some reasons:\n\n- Limited graphics acceleration\n- Single core CPUs\n- High Memory Usage for a common TV App\n\nThese restrictions make super responsive 60fps experiences especially tricky. The strategy is step in the renderer based on a hardware-accelerated canvas.\n\n## Examples\n\n| App Name  | Github | App URL |\n| ------------- | ------------- | ------------- |\n| Photo Gallery | [raphamorim/react-ape-photo-gallery](https://github.com/raphamorim/react-ape-photo-gallery) | [Check it out](https://raphamorim.io/react-ape-photo-gallery/)  |\n| Movie List | [raphamorim/react-ape-movie-list-demo](https://github.com/raphamorim/react-ape-movie-list-demo) | [Check it out](https://raphamorim.io/react-ape-movie-list-demo/)  |\n| [Add yours here](https://github.com/raphamorim/react-ape/edit/main/README.md)  | ---------  | --------- |\n\n## API Usage\n\n#### Install it using [NPM](https://www.npmjs.com/) or [Yarn](https://yarnpkg.com/)\n\n```bash\n# NPM\nnpm install react-ape\n\n# Yarn\nyarn add react-ape\n```\n\n#### React Ape's API usage example\n\n```jsx\nimport React, { Component } from 'react';\nimport { Text, View } from 'react-ape';\n\nclass ReactApeComponent extends Component {\n  render() {\n    return (\n      \u003cView\u003e\n        \u003cText\u003e\n          Render this text on Canvas\n        \u003c/Text\u003e\n        \u003cText\u003e\n          You just use React Ape components like 'View' and 'Text',\n          just like React Native.\n        \u003c/Text\u003e\n      \u003c/View\u003e\n    );\n  }\n}\n```\n\n## Demo on PS Vita\n\n![Demo on PS Vita](assets/demo-ps-vita.jpg)\n\n## Demo on TV\n\n![Demo on TV](assets/demo-tv.png)\n\n## Testing it\n\nReact-Ape's CI uses `macos-latest` and since canvas renders a different output based on the operating system (node-canvas have rasterize fonts in different ways based on OS). It requires run the tests on the same OS. Please be aware that if you want to contribute using a different OS, make sure that you have [Docker](https://www.docker.com/) installed.\n\n## Roadmap\n\nYou can follow React-Ape development status here: [Roadmap](https://github.com/users/raphamorim/projects/1/views/1)\n\n## Credits\n\nA special thanks to [Raphael Eckhardt](https://github.com/Raphseck) for making the logo \u003c3\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Freact-ape","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Freact-ape","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Freact-ape/lists"}