Smart TV in Qwik
The same TV interface as the React version, rewritten in Qwik. Same markup, same styles, same navigation engine: only the framework changes.
Open the React version →Smart TV demo
Race Condition
Two promises, one state. Whoever arrives last wins.
Continue watching
Frontend thrillers
Documentaries
Comedies
Enter with Tab or the remote below, then use the arrow keys, Enter to open and Backspace/Esc to go back.
What changes
- React hydrates the component: before the demo responds, the browser downloads and runs the runtime and the island code.
- Qwik resumes state from the HTML (resumability): on load no component code runs, only the small loader that intercepts events.
- Downloaded JavaScript is not zero: the integration preloads the Qwik runtime with modulepreload and, after load, the preloader fetches the chunks likely to be needed. They are downloaded but not executed until an interaction requires them.
- Blocking arrow-key scrolling uses sync$: it is serialized in the HTML and works before any chunk arrives.
- The spatial navigation engine is the same file as in the React version: in Qwik it is created on first focus or key press, not on load.
- Both pages load without the ClientRouter, so the meter only counts the page’s own JavaScript.
- On the first interaction Qwik reconciles the server-rendered DOM: the integration injects preloads and scripts into the component’s first element, and reconciling them would detach the TV screen and drop its focus. An empty element at the top of the component collects them, and the engine falls back to event.target as the starting point if focus is lost anyway.
Qwik 2 is still a release candidate (2.0.0-rc.2): it is the only version compatible with Astro 7 and Vite 8.
Measured results
| Metric | React | Qwik |
|---|---|---|
| JavaScript downloaded (compressed) | 78.7 KB | 49.1 KB |
| JavaScript executed on load | 61 ms | 43 ms |
| JavaScript on first interaction (Tab + arrow) | 13 ms | 30 ms |
Production build, Chrome with 4× CPU throttling, cache disabled, median of 5 loads. Measured on 9 October 2026: absolute values vary between machines, the ratio between the two versions is what matters.
On a demo this small the balance is close to even: Qwik downloads almost 40% less and moves part of the work from load to the first interaction, where it pays for resuming. The advantage grows with the number of interactive components on the page, because the ones never used never run.
Lesson learned: the first port, a single large component translated from the React version, cost about half a second on first interaction with 4× CPU. In Qwik it pays to split the interface into small components that only read the state they need: moving focus updates only the featured panel.
Source code: src/pages/lab/qwik-tv