New · Apple TV Beta

Your SolidTV app, now on Apple TV

Apple TV has no browser, so web-based TV apps have never been able to run there. SolidTV now runs on tvOS through NativeScript, with no WebView in between, from the same source code you ship to every other TV.

How it works

No browser. No WebView. Same renderer.

On a Smart TV, SolidTV draws to a WebGL canvas inside the platform's browser. tvOS has no browser to host that canvas, so on Apple TV the pieces are swapped underneath your app while the app itself stays the same.

The runtime

NativeScript

Your JavaScript runs in NativeScript directly on the device, with access to native tvOS APIs, instead of inside a web page.

The surface

A native WebGL2 canvas

@nativescript/canvas gives the SolidTV Renderer a WebGL2 surface to draw to, and its polyfill supplies the browser-shaped environment the renderer expects.

The host

@solidtv/nativescript

A renderer platform for the native canvas, shims for the browser globals the polyfill lacks, a bridge that turns Siri Remote presses into the key events SolidTV's focus manager already understands, and lifecycle bindings for suspend and resume.

What you keep

Your web entry point, imported unchanged

The SolidTV demo app is the worked example. Its tvOS build lives in a nativescript/ folder that holds only the host project, and imports the same src/index.tsx the web builds use.

Setup

A small NativeScript project beside your app

The tvOS build lives next to your web app: a boot file that binds the native canvas and the Siri Remote and then imports your web entry, a webpack config, and the usual NativeScript settings. Your web build keeps using Vite. The Apple TV deployment guide walks through every file, from package.json to running on a physical Apple TV.

// app/app.ts (simplified from the guide)
import '@nativescript/canvas-polyfill';
import '@solidtv/nativescript/shims';
import { Application } from '@nativescript/core';
import { isTvOS } from '@nativescript/core/platform';
import { Config, renderer } from '@solidtv/solid';
import {
  KeyBridge,
  bindCanvas,
  bindLifecycle,
  bindRemote,
} from '@solidtv/nativescript';

// A Menu press nothing handled leaves the app, as tvOS expects
Config.preventDefaultOnHandledKeys = true;

function boot(canvas) {
  // This native view stands in for the canvas your app would create
  bindCanvas(canvas);
  // Siri Remote -> key events on document, where the focus manager listens
  const bridge = new KeyBridge({ target: document });
  // Pause on suspend, resume when the app comes back
  bindLifecycle(() => renderer, bridge, Application);
  if (isTvOS) bindRemote(bridge, Application.ios.window);
  // Your app's own entry, unchanged
  import('../../src/index');
}
// webpack.config.js
const webpack = require('@nativescript/webpack');
const { chainSolidTV } = require('@solidtv/nativescript/webpack');

module.exports = (env) => {
  webpack.init(env);
  webpack.chainWebpack((config) => {
    // Solid JSX, browser export conditions,
    // and the aliases from your vite.config.js
    chainSolidTV(config, { alias: {} });
  });
  return webpack.resolveConfig();
};

Requirements

  • ✓ A Mac with Xcode and the tvOS platform
  • ✓ To run a browser app unchanged: the releases after @solidtv/solid 1.6.3, @solidtv/renderer 1.9.3 and @solidtv/nativescript 0.1.1. See the guide's version note
  • ✓ "jsx": "preserve" and "jsxImportSource": "@solidtv/solid" in the tvOS project's tsconfig

Status

In beta, and verified on real hardware

60 fps

The demo app on a physical Apple TV HD, using the WebGL2 renderer.

Siri Remote

Focus driven by real remote presses on the simulator and on the device, including the Menu button exit.

Suspend & resume

A looping animation survives a minute in the background and picks up where it left off.

Apple TV support is in beta. @solidtv/nativescript is an early release (v0.1) under the Apache 2.0 license. No app has gone through App Store submission with it yet, and we'd like to work closely with the first teams that do. If that's you, get in touch.

Known limits today: video playback on tvOS goes through a native AVPlayer view, which the host does not cover yet, SVG images do not decode, and there is no pointer input. The guide's Limitations section has the full list and the workarounds.

Want your TV app on Apple TV?

The Apple TV Port package takes your existing SolidTV app to tvOS, with the scope and price agreed up front. Not on SolidTV yet? Start with a migration assessment.