正在加载视频...

视频加载失败

返回首页

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,332 subscribers

734,769 次观看 • 1 个月前 •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 次观看 • 6 个月前

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,041,647 次观看 • 9 个月前

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,202 次观看 • 22 天前

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,784 次观看 • 2 个月前

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

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

carmen

30,809 次观看 • 1 个月前

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 次观看 • 2 个月前

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,509 次观看 • 2 个月前

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 次观看 • 7 个月前

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 次观看 • 9 个月前

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,722 次观看 • 2 个月前

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

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

jhey ʕ•ᴥ•ʔ

383,166 次观看 • 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 次观看 • 6 个月前

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 年前

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,430 次观看 • 1 个月前

‼️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,289 次观看 • 2 个月前

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

680,765 次观看 • 2 年前

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 次观看 • 8 个月前

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

577,024 次观看 • 1 个月前

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,631 次观看 • 3 个月前