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.

OpenAI keeps working on Canvas rendering for HTML pages. Now it can render HTML pages seamlessly and also has a new loading animation. React Canvases seem to get a bit broken 👀 * This feature is still in development and not available to the public 🚧

TestingCatalog News 🗞

20,640 subscribers

50,710 views • 1 year ago •via X (Twitter)

Science & Technology News & Politics

Anya Rossi• Live Now

Private livecam show

11 Comments

Antonio1 year ago

I can’t wait for it to be available soon for everyone.

TestingCatalog News 🗞1 year ago

Same 🙌 Looks nice

Moescape AI1 year ago

Sign up & create wholesome anime art on Moescape AI now!

Z̷̢̘̟̍̀͂È̸̹̞̒͘͝N̶̠̓̐̚̚1 year ago

Would you say it’s as good as Artifacts?

TestingCatalog News 🗞1 year ago

It cannot render react apps yet but this will come soon too. They will be similar kind of

NomoreID1 year ago

Canvas with 4o is kind a suck now. At least they have to give us o1 mini for it.

Theo1 year ago

They should just make a third panel to the right and have an IDE. Prompt, preview, then deploy into the project. Love the animation though! UI x AI still feels underexplored so excited to see what comes.

Kol Tregaskes1 year ago

If it can render HTML then we'll get way more rich content and be able to write full articles. Can't wait for this.

TestingCatalog News 🗞1 year ago

Yes 🙌 Data visualization, etc

Slava Stalin1 year ago

How does one bypass the feature flag to enable the feature?

neuralAGI1 year ago

nice find 💪🏻

Related Videos

ChatGPT with canvas now works with OpenAI o1—and can render HTML and React.

ChatGPT with canvas now works with OpenAI o1—and can render HTML and React.

OpenAI Developers

927,039 views • 1 year 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,654 views • 2 years 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

40,747 views • 6 days ago

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

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Just remembered, I had made a #threejs html bridge last year using svg foreign object but didn't share Asked claude to finish and deploy it, it did, its now making a plugin for threepipe HTML rendering within a canvas with support for interaction and css animations. link...

Palash Bansal

14,436 views • 5 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

𝘼𝙈𝘼𝙂𝙄

51,990 views • 2 months ago

you can now use o1 to code in chatgpt canvas, and it renders html and react apps used it to quickly build a windows 95 sim! iterated on it within chatgpt—adding minesweeper, notepad files that can be saved and edited, even pointer traillssssss

you can now use o1 to code in chatgpt canvas, and it renders html and react apps used it to quickly build a windows 95 sim! iterated on it within chatgpt—adding minesweeper, notepad files that can be saved and edited, even pointer traillssssss

edwin

326,099 views • 1 year ago

Screenshot to HTML Keeps trying to match your screenshot to the HTML output using OpenAI vision model

Screenshot to HTML Keeps trying to match your screenshot to the HTML output using OpenAI vision model

Dushyant

2,165,705 views • 2 years ago

After seeing the reaction to pretext, I can tell you: the world is not ready for HTML-in-Canvas.

After seeing the reaction to pretext, I can tell you: the world is not ready for HTML-in-Canvas.

Sawyer Hood

115,955 views • 2 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,612 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,445 views • 2 months ago

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

got html-in-canvas working with polyfill in all browsers including safari. and it works better than in canary(for now) send me your examples to try out

Palash Bansal

16,056 views • 2 months ago

I just built this classic game on Hugging Face DeepSite. It's fun to play. You should try out . It’s has a canvas feature that supports HTML, CSS, and JS. For now, you can build websites, games, and a lot more. I used Novita as one of the four available providers from the list. DeepSeek models are awesome. Can’t wait for DeepSeek R2.

I just built this classic game on Hugging Face DeepSite. It's fun to play. You should try out . It’s has a canvas feature that supports HTML, CSS, and JS. For now, you can build websites, games, and a lot more. I used Novita as one of the four available providers from the list. DeepSeek models are awesome. Can’t wait for DeepSeek R2.

AshutoshShrivastava

43,414 views • 1 year ago

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

Amazed by HTML-in-canvas demos? it's natively supported by HyperFrames and we built a catalog of effects anyone can use with one command $ npx hyperframes add html-in-canvas take your videos to the next level

HeyGen

501,788 views • 1 month ago

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

can't wait for html-in-canvas? you don't have to, it works now in all browsers internet is going to be lit in a few years here are all the best html rendering in canvas demos made in the last month - frozen form ハシモトタクマ / FunTech - cf workers form matt rothenberg - threejs demo mrdoob - 3d scene, infinite embed Robin - curved surface Jake Archibald - html room Sawyer Hood - wormhole sirxemic - jelly slider Iwo Plaza | TypeGPU - several samples by Nick Daniel Try it out -

Palash Bansal

29,768 views • 2 months ago

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

Can you believe these slides are full page loads to completely new HTML pages‽ #smashingconf ^ try it with Canary and enable the flag chrome://flags/#view-transition-on-navigation what. rad. tech. 🤯

Adam Argyle

456,917 views • 3 years ago

Download complete web pages as a single HTML file in one click, including images, styles, fonts, and scripts

Download complete web pages as a single HTML file in one click, including images, styles, fonts, and scripts

AlternativeTo

29,562 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

213,470 views • 22 days ago