Jedna z piętnastu zapowiedzi Chrome z I/O 2026, technicznie najgłębsza. Dla developerów frontendowych może oznaczać największe przesunięcie sposobu projektowania UI od momentu wprowadzenia CSS Flexbox.
Czym jest HTML-in-Canvas API
HTML-in-Canvas API to nowy API Chrome ogłoszony na I/O 2026 (19 maja 2026) pozwalający developerom integrować prawdziwe elementy DOM (HTML) w środowiskach 3D renderowanych przez WebGL i WebGPU — z zachowaniem dostępności (a11y), wyszukiwalności (SEO) i indeksowalności przez agentów AI. Wcześniej HTML w canvas 3D był reprezentowany jako bitmapa (tekstura), tracąc semantykę. Nowy API zachowuje semantykę pomimo renderowania w 3D context.
Co to konkretnie znaczy
Klasyczne podejście — HTML i canvas są dwoma niezależnymi światami:
– HTML → semantic, accessible, indexable, ale 2D,
– Canvas 3D (WebGL, WebGPU) → 3D, immersive, ale opaque dla wyszukiwarek i screen readerów.
Z HTML-in-Canvas API:
– HTML elementy mogą być umieszczone wewnątrz 3D scene,
– Zachowują swoją semantykę (link to link, button to button, input to input),
– Screen reader widzi te elementy jak normalny HTML,
– Search engines i agenci AI mogą je zindeksować,
– Element-scoped view transitions (Chrome 147) pozwalają na complex motion bez utraty performance.
Praktyczne zastosowania
– **3D product configurators** — strona produktowa z 3D model produktu (np. mebla), z HTML form na konfigurację (kolory, rozmiar, akcesoria). Form jest accessible, indexable, ale wizualnie zintegrowany z 3D modelem,
– **Immersive landing pages** — landing z 3D environment, ale text contenty (heading, copy, CTA) jest prawdziwym HTML — readable przez Pierwszego Czytelnika,
– **Interactive product demos** — combine animation 3D z form, button, text bez utraty SEO/agent operability,
– **Virtual storefronts** — sklep w 3D ale z prawdziwym katalogiem produktów (Product schema, Article schema) zachowanym.
Co HTML-in-Canvas API zmienia dla Agentic Web
Strony z 3D immersive UX dotychczas były dla agentów AI „niewidzialne” — agent widział obrazek, nie strukturę. Z HTML-in-Canvas API te strony stają się widoczne — agent może parsować zawartość, identyfikować produkty, wypełniać formularze, nawigować.
To zmienia kalkulację designerską: 3D immersive UI nie wyklucza już AI-readiness. Strony agencji kreatywnych, portfolio interaktywne, premium e-commerce z 3D — wszystkie te kategorie mogą teraz mieć cake and eat it too.
Status implementacji
– **Chrome 148** (gdzie Prompt API jest stable) — Chrome zaczyna shipping HTML-in-Canvas API,
– **Pozostałe przeglądarki** — brak ogłoszonych implementacji, Google jest first mover,
– **Polyfill** — niemożliwy (architektonicznie wymaga browser-level support).
Dla designerów stron
HTML-in-Canvas API otwiera nową kategorię projektowania:
– możliwość projektowania immersive UI bez kompromisu SEO/a11y,
– 3D nie musi być „Easter egg” — może być normalną częścią strony,
– structured data zachowuje swój efekt nawet w 3D context.
Ograniczenie: tylko Chrome (na razie). Aż Safari i Firefox nie zaimplementują, immersive 3D UI z HTML-in-Canvas API to feature dla podzbioru użytkowników.