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.
NativeScript
Your JavaScript runs in NativeScript directly on the device, with access to native tvOS APIs, instead of inside a web page.
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.
@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.
- ✓ The router, the focus manager and your components run as they are
- ✓
fetch, relative asset URLs and font loading work through the host's shims - ✓ Siri Remote buttons arrive as ordinary key events, including press-and-hold repeat
- ✓ An unhandled Menu press leaves the app, the way tvOS users expect
- ✓ The renderer pauses on suspend and resumes when the app comes back
- ✓ The same host also runs on iOS
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/solid1.6.3,@solidtv/renderer1.9.3 and@solidtv/nativescript0.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.