{"id":13672875,"url":"https://github.com/pinqy520/revas","last_synced_at":"2025-08-20T20:32:41.814Z","repository":{"id":54615106,"uuid":"240586922","full_name":"pinqy520/revas","owner":"pinqy520","description":"Use React and CSS to build UI interfaces on canvas","archived":false,"fork":false,"pushed_at":"2025-05-13T13:55:47.000Z","size":46534,"stargazers_count":127,"open_issues_count":1,"forks_count":15,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-07-18T04:13:02.208Z","etag":null,"topics":["canvas","flutter","react","react-canvas","react-native","reactjs","yoga","yoga-layout"],"latest_commit_sha":null,"homepage":"https://pinqy520.github.io/demo/revas-pwa/","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/pinqy520.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}},"created_at":"2020-02-14T19:48:06.000Z","updated_at":"2025-07-11T06:23:47.000Z","dependencies_parsed_at":"2022-08-13T21:40:27.379Z","dependency_job_id":null,"html_url":"https://github.com/pinqy520/revas","commit_stats":null,"previous_names":[],"tags_count":37,"template":false,"template_full_name":null,"purl":"pkg:github/pinqy520/revas","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinqy520%2Frevas","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinqy520%2Frevas/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinqy520%2Frevas/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinqy520%2Frevas/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/pinqy520","download_url":"https://codeload.github.com/pinqy520/revas/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/pinqy520%2Frevas/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271378680,"owners_count":24749192,"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","status":"online","status_checked_at":"2025-08-20T02:00:09.606Z","response_time":69,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["canvas","flutter","react","react-canvas","react-native","reactjs","yoga","yoga-layout"],"created_at":"2024-08-02T09:01:54.262Z","updated_at":"2025-08-20T20:32:40.456Z","avatar_url":"https://github.com/pinqy520.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/5719833/74748305-3fb20680-52a3-11ea-81c3-98804dceb602.png\" width=220 /\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://badge.fury.io/js/revas\"\u003e\n    \u003cimg src=\"https://badge.fury.io/js/revas.svg\" alt=\"npm version\" height=\"18\"\u003e\n  \u003c/a\u003e\n\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  Use React and CSS to build UI interfaces on canvas\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca target=\"_blank\" href=\"https://github.com/pinqy520/revas/blob/master/doc/API.md\"\u003eDocument\u003c/a\u003e | \u003ca target=\"_blank\" href=\"https://github.com/pinqy520/revas/blob/master/doc/README-zh.md\"\u003e中文文档\u003c/a\u003e | \u003ca target=\"_blank\" href=\"https://pinqy520.github.io/demo/revas-pwa/\" rel=\"nofollow\"\u003eLive DEMO\u003c/a\u003e | \u003ca target=\"_blank\" href=\"https://github.com/pinqy520/revas/blob/master/src/develop/App.tsx\"\u003eDEMO Code\u003c/a\u003e\n\u003c/p\u003e\n\n## Install\n\n``` bash\n$ yarn add revas react\n```\n## Usage\n\n### Render to a DOM\n```jsx\nimport React from 'react'\nimport {render, View, Text} from 'revas'\n\nrender(\n  \u003cView style={{ flex: 1 }}\u003e\n    \u003cText style={{ fontSize: 20 }}\u003eRevas\u003c/Text\u003e\n  \u003c/View\u003e,\n  document.getElementById('container')\n)\n```\n[![Edit purple-browser-h56ht](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/purple-browser-h56ht?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n### Render to a DOM rendered by React\n```jsx\nimport React from 'react'\nimport {render, View, Text} from 'revas'\n\nexport class Widget extends React.Component {\n  componentDidMount() {\n    this.app = render(\n      \u003cView style={{ flex: 1 }}\u003e\n        \u003cText style={{ fontSize: 20 }}\u003eRevas\u003c/Text\u003e\n      \u003c/View\u003e,\n      document.getElementById('container'),\n      this\n    )\n  }\n  componentDidUpdate() {\n    this.app.update()\n  }\n  componentWillUnmount() {\n    this.app.unmount()\n  }\n  render() {\n    return \u003cdiv id=\"container\" /\u003e\n  }\n}\n```\n[![Edit reverent-river-vbypp](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/reverent-river-vbypp?fontsize=14\u0026hidenavigation=1\u0026theme=dark)\n\n### Render to a custom canvas api\n\n- https://github.com/pinqy520/revas-wxgame-example\n- https://github.com/pinqy520/revas-bytegame-example\n\n\n## DEMO\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/5719833/81006150-9b8f3300-8e81-11ea-8cb1-08de6550ea03.png\" /\u003e\n\u003c/p\u003e\n\n## Other Framework\n- Vue - [huruji/vuvas](https://github.com/huruji/vuvas) by [@huruji](https://github.com/huruji)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinqy520%2Frevas","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpinqy520%2Frevas","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpinqy520%2Frevas/lists"}