{"id":13527734,"url":"https://github.com/raphamorim/react-tv","last_synced_at":"2025-09-29T00:32:20.561Z","repository":{"id":39351199,"uuid":"100723033","full_name":"raphamorim/react-tv","owner":"raphamorim","description":"React Renderer for low memory applications","archived":true,"fork":false,"pushed_at":"2022-03-30T15:33:14.000Z","size":8416,"stargazers_count":2024,"open_issues_count":31,"forks_count":146,"subscribers_count":88,"default_branch":"main","last_synced_at":"2025-09-13T08:27:53.456Z","etag":null,"topics":["lg-webos","orsay","palm","react","react-renderer","react-tv","rendering","samsung","smarttv","tizen-dev","tizen-tv","tv","tvs","webos"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-tv","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":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-08-18T14:59:01.000Z","updated_at":"2025-09-11T16:02:28.000Z","dependencies_parsed_at":"2022-08-25T18:51:17.716Z","dependency_job_id":null,"html_url":"https://github.com/raphamorim/react-tv","commit_stats":{"total_commits":261,"total_committers":18,"mean_commits":14.5,"dds":"0.10727969348659006","last_synced_commit":"b772fb6cffbf9c9d8e40476c4da3d3c600c976c5"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/raphamorim/react-tv","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-tv","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-tv/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-tv/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-tv/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/raphamorim","download_url":"https://codeload.github.com/raphamorim/react-tv/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/raphamorim%2Freact-tv/sbom","scorecard":{"id":761966,"data":{"date":"2025-08-11","repo":{"name":"github.com/raphamorim/react-tv","commit":"b772fb6cffbf9c9d8e40476c4da3d3c600c976c5"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3.2,"checks":[{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":4,"reason":"Found 7/15 approved changesets -- score normalized to 4","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE.md:0","Info: FSF or OSI recognized license: MIT License: LICENSE.md:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Signed-Releases","score":0,"reason":"Project has not signed or included provenance with any releases.","details":["Warn: release artifact 0.3.0-alpha.1 not signed: https://api.github.com/repos/raphamorim/react-tv/releases/8541850","Warn: release artifact 0.3.0-alpha.1 does not have provenance: https://api.github.com/repos/raphamorim/react-tv/releases/8541850"],"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 23 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}}]},"last_synced_at":"2025-08-22T23:42:54.572Z","repository_id":39351199,"created_at":"2025-08-22T23:42:54.572Z","updated_at":"2025-08-22T23:42:54.572Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277450938,"owners_count":25819971,"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-09-28T02:00:08.834Z","response_time":79,"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":["lg-webos","orsay","palm","react","react-renderer","react-tv","rendering","samsung","smarttv","tizen-dev","tizen-tv","tv","tvs","webos"],"created_at":"2024-08-01T06:01:59.027Z","updated_at":"2025-09-29T00:32:20.167Z","avatar_url":"https://github.com/raphamorim.png","language":"JavaScript","funding_links":[],"categories":["JavaScript","Television","HarmonyOS","如何在计算机科学世界快速学习","Cross-platform frameworks"],"sub_categories":["Windows Manager","Google Chromecast"],"readme":"# [React-TV](https://github.com/raphamorim/react-tv) · [![license](https://img.shields.io/npm/l/react-tv.svg)]() [![npm version](https://img.shields.io/npm/v/react-tv.svg?style=flat)](https://www.npmjs.com/package/react-tv) [![circleci status](https://circleci.com/gh/raphamorim/react-tv/tree/master.svg?style=shield)](https://circleci.com/gh/raphamorim/react-tv) [![Build status](https://ci.appveyor.com/api/projects/status/a9uh7sdg2njyojjd/branch/master?svg=true)](https://ci.appveyor.com/project/raphamorim/react-tv/branch/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)\n\n\u003e \u003cp\u003ereact-tv: React Renderer for low memory applications.\u003c/p\u003e\u003cp\u003ereact-tv-cli: React Packager for TVs.\u003c/p\u003e\u003cp\u003eCurrently under development.\u003c/p\u003e\n\n![React-TV Logo](resources/images/reactv-cover-dark.png)\n\n```jsx\nimport React from 'react'\nimport ReactTV, { Platform } from 'react-tv'\n\nclass Clock extends React.Component {\n  state = { date: new Date() }\n\n  componentDidMount() {\n    setInterval(() =\u003e this.setState({date: new Date()}), 1000)\n  }\n\n  render() {\n    if (Platform('webos')) {\n      return (\n        \u003ch1\u003eTime is {this.state.date.toLocaleTimeString()}\u003c/h1\u003e\n      )\n    }\n\n    return \u003ch2\u003eThis App is available only at LG webOS\u003c/h2\u003e\n  }\n}\n\nReactTV.render(\u003cClock/\u003e, document.getElementById('root'))\n```\n\n## Summary\n\n- [About React-TV](#about-react-tv)\n  - [Understanding the Problem](#understanding-the-problem)\n  - [Articles](#articles)\n- [react-tv-cli](#react-tv-cli)\n  - [Developing for webOS](#developing-for-webos)\n  - [Setup webOS Environment](#setup-webos-environment)\n- [react-tv](#react-tv)\n  - [`Platform`](#platform)\n  - [`renderOnAppLoaded`](#renderonapploaded)\n  - [Spatial Navigation](#navigation)\n- [Examples](#examples)\n    - [Clock App](#clock-app)\n    - [Youtube App](#youtube-app)\n- [References for Study](#references)\n  - [webOS](#webos)\n  - [Videos](#videos)\n  - [Essentials to beginner](#essentials-to-beginner)\n  - [React Basics and Renderer Architecture](#react-basics-and-renderer-architecture)\n- [Roadmap](#roadmap)\n- [Credits](#credits)\n\n## About React-TV\n\nReact-TV is an ecosystem for TV based React applications (from the renderer to CLI for pack/build applications).  \nAt the moment we're focusing on webOS and SmartTV.  \nReact-TV's aims to be a better tool for building and developing fast for TVs.\n\n### Understanding the Problem\n\n**tl;dr:** [Crafting a high-performance TV user interface using React](https://medium.com/netflix-techblog/crafting-a-high-performance-tv-user-interface-using-react-3350e5a6ad3b)\n\nCrafting a high-performance TV user interface using React 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**: Applying reactive concepts to unblock the processing on the renderer layer, plug the TV's keyListener, avoid React.createElement.\n\nIn addition: Unify the build for multiple TV platforms.\n\n### Articles\n\nFriendly list of tutorials and articles: \n\n- [Developing for TVs with React-TV](https://medium.com/@raphamorim/developing-for-tvs-with-react-tv-b5b5204964ef)\n\n## [react-tv-cli](https://www.npmjs.com/package/react-tv-cli)\n\nTo install `react-tv-cli` (CLI Packager):\n\n```bash\n$ yarn global add react-tv-cli\n```\n\n##### Support for React-TV-CLI\n\n| Target Platform | Status | Available Version |\n| --- | --- | --- |\n| `LG webOS` | stable | 0.3.1 |\n| `Samsung Tizen` | [ongoing](https://github.com/raphamorim/react-tv/pull/104) | x |\n| `Samsung Orsay` | not started yet | x |\n| `Sony PS4` | not started yet | x |\n| `Nintendo Switch` | not started yet | x |\n\n### Developing for webOS\n\n\u003cp align=\"center\"\u003e\u003cimg src=\"http://ksassets.timeincuk.net/wp/uploads/sites/54/2015/07/lg-webOS-2-0-2015-Main-1.jpg\" /\u003e\u003c/p\u003e\n\n**Short Description:** webOS, also known as Open webOS or LG webOS, (previously known as HP webOS and Palm webOS, stylized as webOS) is a Linux kernel-based multitasking operating system for smart devices such as Smart TVs and it has been used as a mobile operating system.\n\n--------------------------------------------------------\n\nFirst of all, setup your webOS Environment:\n\n#### [Setup webOS Enviroment](docs/setup-webos-environment.md)\n\nThen, init your react-tv project:\n\n```bash\n$ react-tv-cli init \u003cmy-app-name\u003e\n```\n\nFrom the project directory, install the dependencies to enable building:\n\n```bash\n$ yarn install\n```\n\nYou will need to keep the list of files related to your app on the React-TV entry up to date in `package.json`. The init command will already add `index.html`, `bundle.js` and `style.css` to the package.\n\n```json\n{\n  \"name\": \"my-app-name\",\n  \"react-tv\": {\n    \"files\": [\n      \"index.html\",\n      \"bundle.js\",\n      \"style.css\"\n    ]\n  }\n}\n```\n\nTo build your project:\n\n```bash\n$ yarn build\n```\n\nOnce the project is built, you can run it on a specific device or emulator:\n\n```\n$ react-tv-cli run-webos \u003cdevice\u003e\n```\n\n* When you not specify the device, it runs on VirtualBox webOS Simulator\n\n## [react-tv](https://www.npmjs.com/package/react-tv)\n\nTo install `react-tv` (React Renderer):\n\n```bash\n$ yarn add react-tv\n```\n\n### `Platform`\n\nWhen building a cross-platform TV app, you'll want to re-use as much code as possible. You'll probably have different scenarios where different code might be necessary.  \nFor instance, you may want to implement separated visual components for `LG-webOS` and `Samsung-Tizen`.\n\nReact-TV provides the `Platform` module to easily organize your code and separate it by platform:\n\n```js\nimport { Platform } from 'react-tv'\n\nconsole.log(Platform('webos')) // true\nconsole.log(Platform('tizen')) // false\nconsole.log(Platform('orsay')) // false\n```\n\n### `renderOnAppLoaded`\n\nTakes a component and returns a higher-order component version of that component, which renders only after application was launched, allows to not write diffent logics for many devices.\n\n```js\nimport { renderOnAppLoaded } from 'react-tv'\n\nconst Component = () =\u003e (\u003cdiv\u003e\u003c/div\u003e)\nconst App = renderOnAppLoaded(Component)\n```\n\n### `findDOMNode`\n\nSimilar to [react-dom findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode)\n\n### Navigation\n\nIf you want to start with Navigation for TVs. React-TV provides a package for spatial navigation with declarative support based on [Netflix navigation system](https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8). \n\n[React-TV Navigation](https://github.com/react-tv/react-tv-navigation) exports `withFocusable` and `withNavigation` which act as helpers for Navigation.\n\n```jsx\nimport React from 'react'\nimport ReactTV from 'react-tv'\nimport { withFocusable, withNavigation } from 'react-tv-navigation'\n\nconst Item = ({focused, setFocus, focusPath}) =\u003e {\n  focused = (focused) ? 'focused' : 'unfocused'\n  return (\n    \u003cdiv onClick={() =\u003e { setFocus() }} \u003e\n      It's {focused} Item\n    \u003c/div\u003e\n  )\n}\n\nconst Button = ({setFocus}) =\u003e {\n  return (\n    \u003cdiv onClick={() =\u003e { setFocus('item-1') }}\u003e\n      Back To First Item!\n    \u003c/div\u003e\n  )\n}\n\nconst FocusableItem = withFocusable(Item)\nconst FocusableButton = withFocusable(Button)\n\nfunction App({currentFocusPath}) {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eCurrent FocusPath: '{currentFocusPath}'\u003c/h1\u003e,\n      \u003cFocusableItem focusPath='item-1'/\u003e\n      \u003cFocusableItem focusPath='item-2'/\u003e\n      \u003cFocusableButton\n        focusPath='button'\n        onEnterPress={() =\u003e console.log('Pressed enter on Button!')}/\u003e\n    \u003c/div\u003e\n  )\n}\n\nconst NavigableApp = withNavigation(App)\n\nReactTV.render(\u003cNavigableApp/\u003e, document.querySelector('#app'))\n```\n\nSee [examples/navigation](examples/navigation) for more details about usage.\n\n## Examples\n\n### [Clock App](https://github.com/raphamorim/react-tv/tree/master/examples/clock-app)\n\n![Clock App Example](examples/clock-app/screenshot.png)\n\n### [Youtube App](https://github.com/dead/react-key-navigation/tree/master/examples/youtube-react-tv)\n\n![Youtube App Example](https://raw.githubusercontent.com/dead/react-key-navigation/master/examples/youtube-react-tv/example.gif)\n\n## References:\n\n### webOS\n\n- http://webostv.developer.lge.com/sdk/download/download-sdk/\n- http://webostv.developer.lge.com/sdk/install-instructions/installing-sdk/\n- http://webostv.developer.lge.com/sdk/emulator/introduction-emulator/\n- http://webostv.developer.lge.com/develop/building-your-first-web-app-webos-tv/\n- http://webostv.developer.lge.com/develop/app-test/\n- http://webostv.developer.lge.com/api/web-api/supported-standard-web-api/\n- http://webostv.developer.lge.com/develop/app-developer-guide/web-app-lifecycle/\n- http://webostv.developer.lge.com/develop/js-services/calling-js-service/\n\n#### Videos\n\n##### Windows\n\n- [LG webOS SDK Installing (Setup webOS IDE)](https://www.youtube.com/watch?v=4l-3ZdRkRgc)\n\n##### OSX\n\n- [Build Your First App for webOS TV (Setup OSX)](https://www.youtube.com/watch?v=DXOCbt6oTmk)\n\n### Essentials to beginner\n\n- http://developer.samsung.com/tv/develop/getting-started/setup-sdk/installing-tv-sdk/\n- http://developer.samsung.com/tv/develop/getting-started/using-sdk/tv-simulator\n- http://developer.samsung.com/tv/develop/getting-started/essentials-for-beginner\n\n### Developing for SmartTV Guidelines\n\n- https://github.com/ruiposse/smart-tv-app-dev-guidelines\n- https://github.com/immosmart/smartbox\n- https://github.com/linuxenko/awesome-smarttv\n\n### React Basics and Renderer Architecture\n- https://github.com/reactjs/react-basic\n- https://github.com/iamdustan/tiny-react-renderer\n- https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html\n\n## Roadmap\n\n#### Stage 1\n\nInitial proof-of-concept. [DONE]\n\n- [x] CLI Build Abstraction of LG webOS (`run-webos`, `run-webos-dev`)\n- [x] Create a guide or script to Install all LG webOS environment\n- [x] Renderer ReactElements to simple DOM\n  - [x] Support HOF and HOC\n  - [x] Support State and Lifecycle\n  - [x] Keyboard Navigation\n- [x] Check `webos` Platform\n- [x] Migrate to `React-Reconciler`\n\n#### Stage 2 [IN PROGRESS]\n\nImplement essential functionality needed for daily use by early adopters.\n\n- [ ] Support render to Canvas instead DOM using `React.CanvasComponent`\n- [x] `run-webos` support TV device as param\n- [ ] Optmizate DOMRenderer for TV\n- [ ] Start CLI for Tizen\n- [x] Develop helpers for webOS debbug (e.g: Log System).\n- [x] Support Cross Platform\n  - [x] Check executable bin path for Windows, OSX and Linux\n- [ ] Bind all TV key listeners on `React.Element`\n- [ ] Improve documentation\n- [ ] Benchmark it\n\n#### Stage 3\n\nAdd additional features users expect from a Renderer. Then fix bugs and stabilize through continuous daily use. At this point we can start to experiment with innovative ideas and paradigms.\n\n- [ ] Start CLI for Orsay\n- [ ] Update Benchmarks\n- [ ] Handle common errors\n- [ ] Reactive Renderer\n- [ ] Testing and stability\n\n---------------------------------------------------- \n\nSee ReactTV's [Changelog](https://github.com/raphamorim/react-tv/blob/master/CHANGELOG.md).\n\nCurrently ReactTV is licensed by [MIT License](https://github.com/raphamorim/react-tv/blob/master/LICENSE.md)\n\n## Credits\n\nThanks [react-dom](https://github.com/facebook/react/tree/master/packages/react-dom) for be example and a inspiration code :)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Freact-tv","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fraphamorim%2Freact-tv","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fraphamorim%2Freact-tv/lists"}