Developing TV Apps with React-TV

TVs usually have limited graphics acceleration, single core CPUs and high memory usage for a common TV App. These restrictions make super responsive 60fps experiences especially tricky.

React-TV is an ecosystem for React Applications on TVs. Includes a Renderer and a CLI tool for building applications. Focused on be a better tool for building and developing fast for TVs.

React-TV optimizations includes removing cross-browser support, being friendly to TVs’ events, preventing DOM or Fiber caching to reduce memory sweep and adding support to canvas-based components.

Netflix have also been tackling this problem.

As a pre 1.0 release it currently only works for LG WebOS. Support for Samsung Tizen, Samsung Orsay, and Amazon Fire TV are on the roadmap.

import React from 'react'
import ReactTV, { Platform } from 'react-tv'

class Clock extends React.Component {
  state = { date: new Date() }

  componentDidMount() {
    setInterval(() => this.setState({date: new Date()}), 1000)

  render() {
    if (Platform('webos')) {
      return (
        <h1>Time is {}</h1>

    return <h2>This App is available only at LG WebOS</h2>

ReactTV.render(<Clock />, document.getElementById('root'))

If you’re interested in this project I recommend you to follow React-TV developer Raphael on Twitter, as he frequently posts some nice work in progress videos.

Developing for TVs with React-TV →
React-TV (GitHub) →
React-TV YouTube Example App →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.