Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

Wow, it actually is DOM (See me using Chrome DevTools to inspect the DOM) HTML is <canvas> is going to open a new era of web UIs

Steren

11,332 subscribers

734,769 views • 1 month ago •via X (Twitter)

Science & Technology

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Connect your agents directly to Chrome DevTools. 🛠️ The new Chrome DevTools MCP server allows agents to inspect the DOM and debug console errors in real-time using Gemini CLI or any compatible agent. Check out the documentation on GitHub →

Google for Developers

22,793 views • 6 months ago

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Announcing our public preview of Chrome DevTools MCP! Experience the full power of DevTools in your AI coding agent → With Chrome DevTools MCP, your AI agent can run performance traces, inspect the DOM, & perform real-time debugging of your web pages.

Chrome for Developers

1,041,647 views • 9 months ago

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,202 views • 20 days ago

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome

HTML-in-Canvas will open a door for innovation on the web Create UIs and user experiences that are more engaging and sensible than ever before Very straightforward and accessible Extremely normal interfaces! Experimental - Requires activation of the chrome://flags/#canvas-draw-element flag in Chrome

Robin

24,784 views • 2 months ago

you can even project DOM events html-in-canvas is insane

you can even project DOM events html-in-canvas is insane

carmen

30,809 views • 1 month ago

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,497 views • 2 months ago

HTML can't run Doom But HTML can now run *inside* Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

HTML can't run Doom But HTML can now run inside Doom! Thanks to HTML-in-Canvas! Fully accessible DOM elements drawn into Doom's own wall textures. This demo uses a WebAssembly port (jacobenget/doom.wasm) of the original C source. See it in action at - Requires Chrome with chrome://flags/#canvas-draw-element enabled. On every Doom tick, HTML-in-Canvas's drawElementImage() captures the DOM form (child of ) to an offscreen buffer, it's quantised to Doom's 256-colour palette, and the bytes are written straight into the cached patch for the appropriate texture in Doom. Doom's own software renderer then paints it onto E1M1 as a wall texture - which means perspective warp, sector lighting, and even the damage-red tint all get included and applied to the HTML form elements. It's just a texture to Doom.

Robin

114,509 views • 2 months ago

the new --cpu-prof flag is a really nice way to see how much of your time Bun is spending on the CPU ⚡ you can open the profile directly in VSCode/Cursor/Chrome DevTools. also makes it easier to compare how your script performs in Bun vs Node!

Lydia Hallie ✨

70,061 views • 7 months ago

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!

Chrome DevTools MCP is going to be a Swiss-Army knife MCP. Watch me use it here with Gemini CLI to open Google Scholar, search for a term, and save the top 5 PDFs to a local folder. I cannot stop thinking of all sorts of personal automation possibilities with this. Amazing release from the Chrome for Developers team!

Delip Rao e/σ

238,890 views • 9 months ago

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.

HTML in Canvas + fragment shader. Shader is applied to the actual interactive html.

Zsolt Kacso

62,722 views • 2 months ago

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

messin' with physics 👨‍🍳 text in the DOM, blocks on <canvas> ✨

jhey ʕ•ᴥ•ʔ

383,166 views • 1 year ago

is one of the most impressive applications of modern browser tech. It's a Rust-based immediate mode UI app compiled to the web via Webassembly targetting WebGPU. The whole app is just a large <canvas>.

is one of the most impressive applications of modern browser tech. It's a Rust-based immediate mode UI app compiled to the web via Webassembly targetting WebGPU. The whole app is just a large <canvas>.

Guillermo Rauch

205,301 views • 1 year ago

goose + the Chrome DevTools MCP server is a cheat code. It fixes all my Docusaurus and TailwindCSS issues, then checks desktop, tablet, and mobile to confirm the fix actually worked. The future is now 😂

goose + the Chrome DevTools MCP server is a cheat code. It fixes all my Docusaurus and TailwindCSS issues, then checks desktop, tablet, and mobile to confirm the fix actually worked. The future is now 😂

Rizèl Scarlett 🇦🇬🇬🇾

75,408 views • 6 months ago

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools

The future of web development is here! AI assistance is now available in Chrome 131. Learn how this feature can help you code more efficiently: #DevTools

Chrome for Developers

2,621,406 views • 1 year ago

time to reveal my HTML workflow with agents HTML is the new markdown. Lavish is the new editor for your HTML artifacts just tell your agent - discuss the technical plan with me using `npx lavish-axi` 100% open source and runs locally. details in thread below 👇

time to reveal my HTML workflow with agents HTML is the new markdown. Lavish is the new editor for your HTML artifacts just tell your agent - discuss the technical plan with me using `npx lavish-axi` 100% open source and runs locally. details in thread below 👇

Kun Chen

57,430 views • 1 month ago

‼️WHY TODAY IS A BIG DAY FOR INTERNET COMPUTER PROTOCOL DFINITY Foundation's Internet Computer Protocol is set to unveil caffeine v3.0 today, April 7. According to the announcement made by Dom Williams (dom | icp), it will kickstart a new era on ICP. The update introduces "Cloud Engines," enabling enterprises to deploy private subnets using a mix of sovereign nodes and traditional AWS instances to achieve specialized throughput. Bullish for the ICP ecosystem.

‼️WHY TODAY IS A BIG DAY FOR INTERNET COMPUTER PROTOCOL DFINITY Foundation's Internet Computer Protocol is set to unveil caffeine v3.0 today, April 7. According to the announcement made by Dom Williams (dom | icp), it will kickstart a new era on ICP. The update introduces "Cloud Engines," enabling enterprises to deploy private subnets using a mix of sovereign nodes and traditional AWS instances to achieve specialized throughput. Bullish for the ICP ecosystem.

BSCN

15,289 views • 2 months ago

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

680,765 views • 2 years ago

On who they want to see as John Cena's final opponent Bayley, Grayson Waller and Nattie choose Dominik Mysterio. Dom is universally loved by that lockerroom. Bayley: "Dom is a perfect story. Cena's been passing the torch...Dom is a perfect fit for it." Grayson: "Dom is the guy that deserves that opportunity. In some ways Dom is gonna be the next Cena, he's gonna be around for the next 20 years."

On who they want to see as John Cena's final opponent Bayley, Grayson Waller and Nattie choose Dominik Mysterio. Dom is universally loved by that lockerroom. Bayley: "Dom is a perfect story. Cena's been passing the torch...Dom is a perfect fit for it." Grayson: "Dom is the guy that deserves that opportunity. In some ways Dom is gonna be the next Cena, he's gonna be around for the next 20 years."

Adam

57,360 views • 8 months ago

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

577,024 views • 1 month ago

New side project: a tiny Chrome extension to Slooow down and capture any web animation. I never open the animation devtools, but I always want to see how far a team pushed their polish. 0.1x turns every interface into a motion design critique — you see things you’d normally miss.

New side project: a tiny Chrome extension to Slooow down and capture any web animation. I never open the animation devtools, but I always want to see how far a team pushed their polish. 0.1x turns every interface into a motion design critique — you see things you’d normally miss.

Micka

40,631 views • 3 months ago