Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

8 new Canvas UI components are now live, pushing HTML-in-Canvas and WebGL UI even further. The new dimension keeps expanding. See them in action:

David Haz

11,559 subscribers

15,855 Aufrufe • vor 1 Monat •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

16 Kommentare

Profilbild von 0xA

0xAvor 1 Monat

Looks incredible man great work

Profilbild von David Haz

David Hazvor 1 Monat

Thanks man!

Profilbild von Hey Detya

Hey Detyavor 1 Monat

Copy, paste, ship—this library just keeps getting better!

Profilbild von Filip Vabroušek 🥽

Filip Vabroušek 🥽vor 1 Monat

Incredible work! 🎉

Profilbild von David Haz

David Hazvor 1 Monat

🙏🚀

Profilbild von Osama

Osamavor 1 Monat

shawty cooking none stop

Profilbild von David Haz

David Hazvor 1 Monat

Never done cooking

Profilbild von Christian

Christianvor 1 Monat

brother... crazy

Profilbild von David Haz

David Hazvor 1 Monat

❤️

Profilbild von Ura

Uravor 1 Monat

huge amazing! saved!

Profilbild von 0xA

0xAvor 1 Monat

That force field.. wow

Profilbild von 阳光下的猫

阳光下的猫vor 1 Monat

This is awesome! Planning to use it with Remotion.

Profilbild von Lyon Incode

Lyon Incodevor 1 Monat

Amazing

Profilbild von Netanel Baruch

Netanel Baruchvor 1 Monat

love it

Profilbild von Mona Brahmakshatriya

Mona Brahmakshatriyavor 1 Monat

So Cool!!

Profilbild von Jay 🦀

Jay 🦀vor 1 Monat

Displacement 😍

Ähnliche Videos

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

David Haz

1,422,538 Aufrufe • vor 2 Monaten

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

41,696 Aufrufe • vor 3 Monaten

Canvas UI now runs on WebGPU. All 35 components ship in two builds: WebGL (GLSL) and WebGPU via Vercel's vgpu library (WGSL). Same props, same look, pick your renderer. React, Vue, Svelte, Solid, Preact, vanilla.

Canvas UI now runs on WebGPU. All 35 components ship in two builds: WebGL (GLSL) and WebGPU via Vercel's vgpu library (WGSL). Same props, same look, pick your renderer. React, Vue, Svelte, Solid, Preact, vanilla.

David Haz

19,567 Aufrufe • vor 21 Tagen

Just open-sourced a weird Three.js experiment 👀 Tiltshift-in-HTML It combines HTML-in-canvas with Three.js to let UI exist directly inside 3D scenes and react to a tilt-shift effect. Demo:

Just open-sourced a weird Three.js experiment 👀 Tiltshift-in-HTML It combines HTML-in-canvas with Three.js to let UI exist directly inside 3D scenes and react to a tilt-shift effect. Demo:

Yassine Bouanane

18,570 Aufrufe • vor 24 Tagen

Straight from the floor of #GoogleIOConnect India! We spoke with redBus Director of Engineering, Amit Kumar, for a quick lightning round about HTML-in-Canvas. Hear how they are using the new API to level up their web UI experiences 👇 #BuildwithGemini

Straight from the floor of #GoogleIOConnect India! We spoke with redBus Director of Engineering, Amit Kumar, for a quick lightning round about HTML-in-Canvas. Hear how they are using the new API to level up their web UI experiences 👇 #BuildwithGemini

Chrome for Developers

15,970 Aufrufe • vor 2 Monaten

$Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.$

Google has solved a 20-year-old web problem.. It's called html-in-canvas, a new experimental Chrome feature that renders live HTML directly as a 3D texture. here's what it does: → draws any DOM element (dashboards, forms, entire app UIs) straight into a canvas → full CSS still works, flexbox, grid, shadows, backdrop-filter, animations → text stays selectable, inputs stay typeable, screen readers still see it → auto syncs with your DOM on every paint → pipes into any WebGL shader → distort, curl, refract, warp the wildest part: someone already built an html-cloth plugin that turns your live UI into simulated fabric.

How To Prompt

235,877 Aufrufe • vor 2 Monaten

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

VFX-JS supports HTML-in-Canvas now. You can turn HTML element into a WebGL texture. It automatically detects the browser and fallback to the old SVG foreignObject workaround. So it works on Chrome, Firefox, and Safari, of course! #WebGL #VFXJS #Codepen

𝘼𝙈𝘼𝙂𝙄

52,470 Aufrufe • vor 5 Monaten

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Got HTML rendering in canvas working AS IS on all browsers, including iOS Safari - html-in-canvas polyfill - interactions - hover, focus, active, typing etc - css animations - scrolling - caret and text selection - #threejs, #webgl, #webgpu support - dark/light mode Link below

Palash Bansal

30,459 Aufrufe • vor 5 Monaten

tldraw canvas ➡️ interactive theme UI Demonstrating visual context understanding in Antigravity, the agent read the canvas mockups and built interactive code fast with 3.6 Flash⚡

tldraw canvas ➡️ interactive theme UI Demonstrating visual context understanding in Antigravity, the agent read the canvas mockups and built interactive code fast with 3.6 Flash⚡

Google Antigravity

57,638 Aufrufe • vor 1 Monat

HTML-in-canvas is now a first-class primitive in Remotion! It enables new types of effects that were impossible before.

HTML-in-canvas is now a first-class primitive in Remotion! It enables new types of effects that were impossible before.

Remotion

582,185 Aufrufe • vor 4 Monaten

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

Shu

56,892 Aufrufe • vor 5 Monaten

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

For the last couple months, our team has been working hard on a few paradigm-changing features for HTML Canvas. One of them is the ability to have HTML elements in a canvas. Here's a ThreeJS demo with a live HTML texture.

Fernando Serboncini

682,237 Aufrufe • vor 2 Jahren

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:

Atai Barkai

11,997 Aufrufe • vor 7 Monaten

Shadcn just dropped brand new components... 👀 and there's one subtle addition I never expected to see in shadcn/ui

OrcDev

30,417 Aufrufe • vor 2 Monaten

From the World Cup to Formula 1, this is the year of the live event 🏆 New Rive Challenge: build Broadcast & Livestream UI that responds to event data using Rive Scripting, Data Binding, GPU Canvas, and more. $10k in prizes 7/23 to 8/5 on Contra

From the World Cup to Formula 1, this is the year of the live event 🏆 New Rive Challenge: build Broadcast & Livestream UI that responds to event data using Rive Scripting, Data Binding, GPU Canvas, and more. $10k in prizes 7/23 to 8/5 on Contra

Rive

15,202 Aufrufe • vor 2 Monaten

Have you tried the new Replit Canvas? - Create beautiful UI designs with AI - Generate assets with GPT-Image 2 & Seedance - Turn your designs into launch-ready apps in minutes

Have you tried the new Replit Canvas? - Create beautiful UI designs with AI - Generate assets with GPT-Image 2 & Seedance - Turn your designs into launch-ready apps in minutes

Replit ⠕

14,774 Aufrufe • vor 3 Monaten

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

A visual comparison of HTML-in-Canvas vs rasterizing DOM to a canvas texture (side-by-side below, compare average capture times) Existing approaches to pull web content into canvas are slow and lossy: - Animations glitch, or don't play at all - CSS replication is imprecise - Clogs up the main thread, other animations lag HTML-in-Canvas (texElementImage2D) lets the browser's own compositor map CSS layouts, animations, and transitions precisely into canvas/WebGL textures — one native call instead of thousands of JS style reads. It's currently available behind an experimental Chrome flag. Really cool, and I can't wait for it to become mainstream.

Robin

46,604 Aufrufe • vor 5 Monaten

inZOI Dev Update | Week 1 – February 2026 🕹 Smart Zoi improvements 🧱 51 new Build Mode assets 👘 Lunar New Year outfits 🖼 Canvas & mod UI updates 📖 Full breakdown & patch details in the article ↓

inZOI Dev Update | Week 1 – February 2026 🕹 Smart Zoi improvements 🧱 51 new Build Mode assets 👘 Lunar New Year outfits 🖼 Canvas & mod UI updates 📖 Full breakdown & patch details in the article ↓

inZOI News

12,551 Aufrufe • vor 7 Monaten