ChatGPT's New HTML & React Rendering Abilities in 5 Minutes

--- type: transcript date: 2025-01-24 youtube_id: uoi1LbxsYOk --- # Transcript: ChatGPT's New HTML & React Rendering Abilities in 5 Minutes Chad GPT now has the ability to render both HTML as well as react components directly within their web app as well as their desktop app so here's a quick example from Edwin who's one of the developers over at open AI who made a Windows 95 simulator all completely within chat GPT using the 01 model and that's a big piece of this announcement you do have access to the 01 model directly to render these canvases of whether it's HTML or react components so in this video I'll go through through a couple demonstrations in both the web app as well as the desktop app and then I'll also briefly touch on my first impressions and how this compares to tools like VZ bolt. new as well as lovable so there's two ways to access canvas if you haven't used it before you can access it from this button here or alternatively you can forward SL canvas at any point within your query to have it indicate that you are going to be using canvas for whatever you're doing once you have it selected I can go ahead and say generate me a react component that reads hello World once you submit that now if you are using the 01 model it will take a little bit of time potentially depending on your query the important thing to consider is if you are a plus member you can very quickly go through your 01 messages by using something like this one thing that I'd encourage is if you want you can swap to a different model mid chat one of the difference that I found right off the bat when I compare this to something like artifacts b0 bolt. new or lovable is you do actually have to choose to render it and it won't actually just render automatically that's why one subtle ux difference but it's not actually that big of a deal to actually just press preview and then get it from there but the nice thing with the canvas view is you can edit it directly within here there are also some other features within here you can Port it to a different language fix bugs if there are in there you can also add comments just with one click they have some of these nice little features to layer it into whatever you might be building we have our code with some comment blocks now what I could say here is I could say add in a header and footer and head of this read developers digest the thing that I found is using these models for similar type of web apps before is GPD 40 does do quite well for a lot of different applications if you're just building a simple web page you will be able to get pretty far if you do want something that's a little bit more complicated obviously the 01 model is going to be a little bit better for that but let's just try a new chat here and I'm going to try canvas again we say build a beautiful website for my SAS and let's give it the fun name of a genen toy one it to have multiple pages and have a professional look and feel we'll go ahead and I'll submit that we'll see what it looks like with GPD 40 one big thing off the bat is it is going to render these react components within one file that's one of the big notable differences between tools like vzer bolt on new as well as lovable where those are more text app Builders whereas this is like a text to component Builder it is similar to anthropics CLA artifacts feature where you'll be able to render these little components that you can then Port within your application that's my general First Impressions with something like this here's our simple SAS website obviously it's pretty straightforward but now let's go to 01 and I'm going to say I want to make this way more involved let's use framer motion and a number of beautiful component libraries to make this look like a professional SAS we now it will just take a moment for it generate all of the different tokens o1 is obviously a little bit slower of a model given that it does think through things and then it also has to generate the tokens here is our second iteration now we have our header and we have our footer if I go to the next page here we have something that looks a little bit better in terms of a pricing page obviously it still needs a little bit of prompting to get it across the line if we go to the about page again a pretty simple about page and then we have a contact page the other thing this is you can also just copy the code just like that or alternatively you can open up the console you can see if you have any errors or if there's anything within the console that you're going to be logging out you can see that within there as well that's definitely a nice little touch I think where this could potentially be interesting is if you tie it to something like cursor and maybe have a react component within your application it would be interesting to see how well it would work on actually being able to integrate with existing code bases now my suspicion is if you're trying to to do that with some proprietary code where you have to access different environment variables and stuff like that it's probably not quite there but for certain applications like if it's a static website and stuff like this you could actually probably get quite a bit done last I'm just going to ask it to generate a Minecraft clone in react we'll go ahead I'll send that through and then I'll skip forward to what it generates all right so here we go we have Minecraft clone we have all of the different components I'll go and I'll click preview now here if you open up the console you'll see that it's installing the packages within the desktop app I saw that it got stuck at installing packages so I'm not sure what the issue might be there but when I hopped over to the web app this is what it looks like so we can zoom in here I can go ahead it looks like I can potentially select blocks where it's highlighting a little bit as I hover over them and then I see click me it needs a little bit of work but this is a starting point I'm curious what you'll be able to generate with this with a more impressive prop so let me know what you've had luck with within the description of the video otherwise that's it for this video if you found this video useful please like comment share and subscribe otherwise until the next one