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.

Make HTML the new JSON. Declarative Partial Updates let you render out-of-order HTML updates and build UI placeholders without JS. Plus, the new streaming APIs makes Island architecture a breeze by injecting HTML directly into the DOM. Available for testing since Chrome 148 →

Chrome for Developers

422,430 subscribers

18,556 views • 2 months ago •via X (Twitter)

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

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

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 views • 4 months ago

🌟 New in Chrome 116! 🌟 The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content. Watch the full video to jump into all of Chrome’s latest updates! →

🌟 New in Chrome 116! 🌟 The Document Picture-in-Picture API makes it possible to open an always-on-top window that can be populated with arbitrary HTML content. Watch the full video to jump into all of Chrome’s latest updates! →

Chrome for Developers

37,045 views • 3 years ago

$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 views • 1 month ago

Prompt: Create an interactive New Year's Eve fireworks display using HTML/CSS/JS in a single HTML file. When the user clicks, a rocket should launch and explode into colorful particles with gravity and drag physics. Include a 'Grand Finale' button that automatically launches a barrage of fireworks that form the glowing text 'HELLO 2026' in the sky.

Prompt: Create an interactive New Year's Eve fireworks display using HTML/CSS/JS in a single HTML file. When the user clicks, a rocket should launch and explode into colorful particles with gravity and drag physics. Include a 'Grand Finale' button that automatically launches a barrage of fireworks that form the glowing text 'HELLO 2026' in the sky.

Diego | AI 🚀 - e/acc

34,210 views • 7 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

115,052 views • 4 months ago

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

Paras Chopra

215,661 views • 2 months ago

Why HTML turned out to be the foundation for agentic video making from Bin Liu: “We’ve been trying to build a video agent. However, we learned the hard way that agents have no visual intelligence. So that’s when we turned to code. HTML is the LLM’s native language. LLMs can express not only information, but also visual aesthetics through HTML, CSS, and JavaScript. Footage, images, assets, SVGs can all sit on top of HTML." 📌 As an example, see how you can make a product video from any website URL here:

Why HTML turned out to be the foundation for agentic video making from Bin Liu: “We’ve been trying to build a video agent. However, we learned the hard way that agents have no visual intelligence. So that’s when we turned to code. HTML is the LLM’s native language. LLMs can express not only information, but also visual aesthetics through HTML, CSS, and JavaScript. Footage, images, assets, SVGs can all sit on top of HTML." 📌 As an example, see how you can make a product video from any website URL here:

Peter Yang

16,653 views • 2 months 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 • 4 months ago

2. Build interactive tools and apps without code Describe your idea and Grok scaffolds the UI, logic, and deployment steps no coding required. Prompt: "You are a senior software architect who excels at building no-code and low-code systems with HTML, JavaScript, and Web APIs. Task Design a fully working interactive tool based on this idea: [DESCRIBE YOUR TOOL IDEA] Deliverables 1. A plain-English explanation of how the tool works. 2. A step-by-step plan to implement it with Grok or a no-code platform. 3. Exact HTML/CSS/JS code if relevant. 4. UX and design improvement tips. 5. Instructions to generate a shareable, embed-ready version. Imagine you are shipping an MVP for a startup demo. "

2. Build interactive tools and apps without code Describe your idea and Grok scaffolds the UI, logic, and deployment steps no coding required. Prompt: "You are a senior software architect who excels at building no-code and low-code systems with HTML, JavaScript, and Web APIs. Task Design a fully working interactive tool based on this idea: [DESCRIBE YOUR TOOL IDEA] Deliverables 1. A plain-English explanation of how the tool works. 2. A step-by-step plan to implement it with Grok or a no-code platform. 3. Exact HTML/CSS/JS code if relevant. 4. UX and design improvement tips. 5. Instructions to generate a shareable, embed-ready version. Imagine you are shipping an MVP for a startup demo. "

God of Prompt

316,672 views • 1 year ago

LLM Wikis + HTML Artifacts are insanely powerful. You should seriously consider this in your workflows. LLM Wikis captures all the important information that lets you and your agents do meaningful work. HTML artifacts present that information in interesting ways that allow you to take important actions along with your agents. My HTML artifacts sit on top of my LLM wikis. They are dynamic and are easily extended as needs arise. I have hooked my Artifacts to talk to my agents, and similarly, the agents can talk to artifacts. This has allowed me to build powerful artifacts that reduce my inbox to zero, keep me updated on any topic of interest, fast prototyping, do deep research, design/trigger new experiments, generate figures to improve understanding, schedule research, search relevant information, discover topics, and so much more. What you see in the clip is not a website. It's a simple interactive HTML artifact. HTML artifacts are useful for designers, engineers, researchers, students, and anyone working with agents. Lastly, HTML doesn't replace Markdown. They are a much better combination working together.

LLM Wikis + HTML Artifacts are insanely powerful. You should seriously consider this in your workflows. LLM Wikis captures all the important information that lets you and your agents do meaningful work. HTML artifacts present that information in interesting ways that allow you to take important actions along with your agents. My HTML artifacts sit on top of my LLM wikis. They are dynamic and are easily extended as needs arise. I have hooked my Artifacts to talk to my agents, and similarly, the agents can talk to artifacts. This has allowed me to build powerful artifacts that reduce my inbox to zero, keep me updated on any topic of interest, fast prototyping, do deep research, design/trigger new experiments, generate figures to improve understanding, schedule research, search relevant information, discover topics, and so much more. What you see in the clip is not a website. It's a simple interactive HTML artifact. HTML artifacts are useful for designers, engineers, researchers, students, and anyone working with agents. Lastly, HTML doesn't replace Markdown. They are a much better combination working together.

elvis

248,793 views • 3 months ago

Zero Hand Tracking is here! Working on the OS and sensor integration. Accesibility is key, that's why apps are HTML/CSS/JS 2D web apps render as panels in front of you. It's really easy to make this kind of app for Zero 3D apps, like below, run over WebXR, here using #threejs

Zero Hand Tracking is here! Working on the OS and sensor integration. Accesibility is key, that's why apps are HTML/CSS/JS 2D web apps render as panels in front of you. It's really easy to make this kind of app for Zero 3D apps, like below, run over WebXR, here using #threejs

Miroslav Kotalík

13,123 views • 1 year ago

Tuesday 10/7 drop into Season 1 and let the good times roll! Look out for new challenges, soundtrack updates, new brands and seasonal events! Grab you board and we'll see you in San Van!

Tuesday 10/7 drop into Season 1 and let the good times roll! Look out for new challenges, soundtrack updates, new brands and seasonal events! Grab you board and we'll see you in San Van!

skate.

140,138 views • 10 months ago

$Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web. - Shape morphing - All properties animatable - Dynamic refraction and reflection - Adaptive tint - Adaptive specular highlight - Dispersion - Full html integration - Super fast layout engine that works across Canvas and html - Pointer event handling - Framework and renderer-agnostic low level API - High level React API - Ootb Three.js and r3f integration And lots more. Read on for implementation details and demos.$

Dear frontend devs and UI designers. I bring you Liquid DOM, a complete and faithful implementation of Liquid Glass on the Web. - Shape morphing - All properties animatable - Dynamic refraction and reflection - Adaptive tint - Adaptive specular highlight - Dispersion - Full html integration - Super fast layout engine that works across Canvas and html - Pointer event handling - Framework and renderer-agnostic low level API - High level React API - Ootb Three.js and r3f integration And lots more. Read on for implementation details and demos.

Andrew Prifer

1,356,087 views • 3 months ago

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

0xSero

25,695 views • 5 months ago

🆕 Introducing PDFGen - Dynamic PDF Generation for your app. With PDFGen, you can create an HTML template, send data to our API, and get a PDF back. Includes Tailwind out-of-the-box for styling Would you give it a try and let me know what you think? 🙏

🆕 Introducing PDFGen - Dynamic PDF Generation for your app. With PDFGen, you can create an HTML template, send data to our API, and get a PDF back. Includes Tailwind out-of-the-box for styling Would you give it a try and let me know what you think? 🙏

Ryan Chenkie

201,605 views • 3 years ago

Here is a quick walkthrough of everything new in Stitch: 🌊 Streaming: Stitch now streams its work straight to the canvas. You can see Stitch working and start steering before the final product is done! 📄 Existing Designs: Stitch can help you start with your design by creating a DESIGN.md from your codebase, .fig files, or a live website ⏩ In-place AI Edits: Stitch can quickly edit specific parts of your screens just by asking or pointing and clicking 🎥 Motion & HTML canvas: Javascript, shaders and more now render natively on an HTML canvas so you can immediately see animation, hover states and effects 🚀 Portability and Integrations: We've added a big list of import and export additions to fit right into your workflow, including import your .fig files and one-click export to Netlify, Loveable and Bolt 🌟 Bonus: New skills to IMPORT your screens directly into Stitch via MCP and sync changes back to your codebase Walkthrough video👇 Details for each improvement in 🧵

Here is a quick walkthrough of everything new in Stitch: 🌊 Streaming: Stitch now streams its work straight to the canvas. You can see Stitch working and start steering before the final product is done! 📄 Existing Designs: Stitch can help you start with your design by creating a DESIGN.md from your codebase, .fig files, or a live website ⏩ In-place AI Edits: Stitch can quickly edit specific parts of your screens just by asking or pointing and clicking 🎥 Motion & HTML canvas: Javascript, shaders and more now render natively on an HTML canvas so you can immediately see animation, hover states and effects 🚀 Portability and Integrations: We've added a big list of import and export additions to fit right into your workflow, including import your .fig files and one-click export to Netlify, Loveable and Bolt 🌟 Bonus: New skills to IMPORT your screens directly into Stitch via MCP and sync changes back to your codebase Walkthrough video👇 Details for each improvement in 🧵

Stitch by Google

34,970 views • 3 months ago