Загрузка видео...

Не удалось загрузить видео

На главную

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's profile picture

Steren

11,846 subscribers

736,306 просмотров • 2 месяцев назад •via X (Twitter)

Наука и технологии
LIVE

Anya Rossi• Live Now

Private livecam show

Комментарии: 0

Нет доступных комментариев

Здесь появятся комментарии из оригинального поста

Похожие видео

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 →
1:01

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 просмотров • 7 месяцев назад

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.
0:32

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,042,343 просмотров • 10 месяцев назад

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 🎨
2:08

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,582 просмотров • 1 месяц назад

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
0:31

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,808 просмотров • 3 месяцев назад

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.
0:26

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 просмотров • 19 дней назад

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.
0:32

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 просмотров • 3 месяцев назад

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.
0:26

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,977 просмотров • 4 месяцев назад

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!
0:20

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 просмотров • 9 месяцев назад

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. 🧵
0:48

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,401,664 просмотров • 15 дней назад

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!
2:02

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 просмотров • 10 месяцев назад

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

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

Zsolt Kacso

62,811 просмотров • 3 месяцев назад

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>.
1:01

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 просмотров • 1 год назад

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 😂
1:10

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 просмотров • 7 месяцев назад

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
0:27

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 просмотров • 1 год назад

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 👇
0:33

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,573 просмотров • 2 месяцев назад

‼️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.
0:30

‼️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,328 просмотров • 4 месяцев назад

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."
1:38

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 просмотров • 9 месяцев назад

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.
0:43

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

681,437 просмотров • 2 лет назад

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.
0:44

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,966 просмотров • 5 месяцев назад

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

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

Remotion

580,036 просмотров • 3 месяцев назад