Parker Rex
All videos
Parker Rex

OpenAI's 1st BIG Update in Months! (4o Canvas) First Impressions for Coders & Marketers

October 3, 2024

Watch on YouTube@parkerrex

OpenAI’s Canvas feature in ChatGPT-4o just landed, and this first impressions look focuses on what it actually feels like for coders and marketers right now. It shines for isolated components and editing tasks, but isn’t yet a drop-in for building full apps.

What Canvas 4o actually feels like today#

  • Canvas is strong for component-level work and document editing, but not a full app builder yet.
  • Output tends to be a single, large file rather than multiple project files, which changes how you’d integrate it into a real project.
  • The tool is early; the real bang comes from combining Canvas with other workflows (e.g., Cursor for end-to-end apps, or API-style usage for docs and writing).

For coders: what works and what doesn’t#

  • Good for isolated UI components
  • Example tests included: building a calendar preview and exploring different weeks/views.
  • You can see quick previews and tweak details in one place, but it isn’t a plug-and-play Next.js app generator yet.
  • Not ideal for end-to-end app scaffolding (yet)
  • Comparisons noted: Vercel’s v0 does a better job at multi-file scaffolding and composing components into an app.
  • Claude tends to return multiple files, which Canvas currently doesn’t consistently do.
  • Output and ties to your editor
  • Canvas often produces a single, large file rather than a full project; this makes it more of a collaborative design/document tool than a complete code exporter.
  • Practical workflow tips observed
  • Cursor is charged per request (around 0.40) — manage prompts accordingly.
  • In the Playground, you can customize system instructions to enforce your own rules (useful for “Cursor rules” and project standards).
  • Repo-pack prompts help guide the model on your objectives before it starts generating.
  • Keyboard-macro style prompts (e.g., using shortcuts like command-K to trigger prompts) can streamline your workflow if you already use text expanders.
  • Quick takeaways for coders
  • Use Canvas to prototype isolated components or to sanity-check UI ideas.
  • Don’t rely on Canvas for full app scaffolding; pair it with Cursor or other tooling for production-ready code.
  • If you want to explore how Canvas handles code, try translating a small feature between languages (e.g., TS/Next.js to Python) to see how it handles structure.

For marketers and writers: where Canvas shines#

  • Drafting and editing text
  • Can generate newsletter drafts and long-form content, then refine with prompts.
  • You can request tone, length, and structure changes, and add style constraints (italics, bold, tables, etc.).
  • Readability and polish controls
  • Readability levels (e.g., “kindergarteners” to advanced), final polish, and tone controls are accessible in the UI.
  • Features to add sources and stats to back up arguments are practical for research-heavy content.
  • Formatting and presentation
  • Supports markdown formatting (links, tables, bold/italics) and can adjust layout via prompts.
  • Emoji handling: can add suggestions, but it’s easy to overdo; you can steer it toward cleaner copy.
  • Practical takeaways for writers
  • Use Canvas to generate first drafts, then apply “final polish” to hit your desired voice and length.
  • Leverage the “elaborate on the following topic” and source-citation capabilities to build well-supported content.
  • Treat the tool as a writing assistant rather than a final editor; you’ll still want human review for nuance and accuracy.

Workflow tips and practical tactics#

  • System prompts and rules
  • In Playground, you can embed project rules and constraints in a system prompt to keep the model aligned with your workflow.
  • Macro-friendly prompts
  • Quick prompts like “at comments” (as a macro) can trigger predefined editing tasks or code annotations without retyping.
  • Debugging and exploration
  • Canvas feels productive for exploring ideas quickly (e.g., red-teaming or refactoring concepts) but expect iterative, not turnkey, outputs.
  • Cost considerations
  • Budget your prompts; the per-request pricing means you’ll want to batch tasks or use targeted prompts to avoid drift and waste.

Takeaways: when to use Canvas now#

  • If you’re a coder:
  • Use Canvas for isolated component ideas, quick UI experiments, and collaboration on design details.
  • Don’t expect production-ready multi-file apps out of the box; continue using dedicated tooling for end-to-end builds.
  • If you’re a marketer or writer:
  • Canvas is compelling for drafting, editing, and polishing content with style/format controls.
  • It’s especially useful for newsletters, blog drafts, and content briefs that need structure, sources, and tone control.

What’s next to watch#

  • API potential and inline editing
  • There’s a strong case for an API that supports inline editing and multi-file outputs, plus smoother export options for different formats.
  • Export and multi-file workflows
  • Look for better multi-file project exports and more flexible file trees to fit into existing repos and builds.
  • Deeper integration with existing tools
  • Expect tighter integration with editors, IDEs, and CMS workflows as Canvas matures.
Transcript

this is going to be a first impressions video on chat pt40 with canvas which just dropped now what I will say is most of these are really just good for components front end stuff in isolation now if you want to actually string these together and make an app that's not so great you want to probably use cursor so just wanted to call that out because I've been playing with them for a while and that's what I found is everything has a small use case and you kind of have to use them individually so this came out today uh October 3rd a couple hours ago and read the blog article wanted to try it out my first test for this to see how it ranks against the uh v0 by versel as well as just claw was just asking it to make a good prompt for itself and then to make an obsidian markdown text editor because these models know what obsidian is and so you can kind of get a good idea of how well it can put together a note taking app how far it will go um and it didn't get very far basically made this and you can't see any other files which I thought was kind of strange so if I did the same thing in Claud then I would see it gave me a bunch of different files and v0 gave me a bunch of different files as well so like I said it gives you everything kind of in isolation I think that that's a much better feature I know know that there these tools are early but I think the vzer from what I can see is serving a different use case where it's really good at the nextjs stuff and building these uh components in isolation and you can kind of string things together like I built this calendar took 15 takes but you know it has this little preview thing which isn't perfect it moves them around um and you can change the weeks you can see the different calendars you can see different activity layers and that's all done in here and I don't know that I would trust you know if I if I just let's say open up a new chap gbt for El cavis and I say let's make a Google Calendar clone that includes drag and drop and it's the weak view include all details do not omit any code it must be production ready we prefer to use typescript and xjs app router with Tailwind for Styles and Shad CN for UI components I'll give you $100 if you get it right you lose $50 for everything you get wrong cool let's let's see what it does here sure I can provide you that okay so cool it pops this thing open uh yeah so it's again it's just trying to give me this one big file so so very different than I think what a lot of us are kind of used to where it's you get multiple files um so that's different I think this is more of a collaborative tool than just straight up like generate a bunch of files for me as far as I can tell um now what I will say that I've been using from open AI since I discovered how good it was is 01 preview I mean it's crazy it takes a little bit of time for it to run but it's very powerful like in my case I was debugging something with event resizing and map my SAS and it took me forever to get it right oh looks like my server shut off but basically A1 preview is fantastic it complex problems with server State uh client date all that stuff and the way that I was doing that is I basically just packed up the files did a repo pack on the directories that I wanted and aimed at this because if you are using cursor it's 40 cents per request which is kind of crazy so that's why you know I have a bunch of credits in in the uh platform and you just go in and you add a system prompt so you put in whatever prompt you want and one pro tip for that is actually in the playground there's this new thing that they added under system instructions so you can put in a description of what you want it to be and I just put my cursor rules in there and then optimized it for the system settings so then when I actually go back into the chat playground I would put in this i' uh put it on assistant I'd hit add and then my next one would be a user and I'd explain hey this is what we're trying to address whether it's something that I'm debugging or it's something like a net new feature I would explain what the objective is and then I would paste that repo pack text file below then I'd flip it over to preview um again that's way more powerful but this I think it's definitely interesting like I think I could see myself using this like if I wanted to maybe I don't know I already use ad logs like I have something for that like I use a lot of text expanders so like a demo for that would be like I'll open up a note real quick um I use a lot of text expanders that already do this in cursor so if I say at comments then it pops open this prompt and I just run that so my workflow for instead of having this button in there where it's just one file on isolation I have keyboard shortcuts and in there so I do like command plus K oops command K and then I would do let's say like at comments and then that's going to pop into the actual file um and then I select the model and then I hit go and it adds all those comments so I don't really know i' use this um I'm curious if you could see what the like if in the network request if we can see what it say when they do that so we could see like so you can basically mimic if you really liked what this did maybe we can snoop around and and see I doubt it but let's try uh let's see like let's Port let's Port this whole thing uh to uh let's go to it's weird keep current it already is should be typescript but let's Port it in to uh python okay let's see conversation 40 canm That's the model right there interesting so we learned something that this is the model name for with canvas so you're going to probably be able to hit this I don't know whatever um let's see if we can't find anything good primary assistant messages roll assistant trying to figure out what the prompt is for these are just going to be all the messages for when you want to translate it to python um user create a new document that rewrites the code in Python that's it so they do a user okay context this is referring to this so they looks like a hasher no it just passes in the chat ID the user would like to create a new text Doc okay interesting so I wonder if I get the same output probably if I went into the 40 mini and then I just set a system prompt of or user prompt of create a new document that rewrites the code in Python and then I could probably just do that there uh and then just pass it the existing one yeah so [Music] nothing too cool there um what about this one is there anything I'm missing see if I'm missing anything um how about yeah conversations includes memory no because we don't have any and then it passes this text Doc back which is just step one install the necessary dependencies yeah so that's the actual thing okay so that's what's streaming in and then all right not that not that interesting now let's try uh fix bugs see what this looks like so it passes that in go down to here it's going to be in the conversation back end is dark mode false that's all the client side stuff and the messages again we just have assistant we have I've provided this let me know if you need help extending that's something that they added nothing too interesting in there either it's chat requirements proof of work H yeah nothing crazy so that's that's kind of it there um let's try with like writing something let's let's try something on just plain English prove your sleep let's grab this throw that in a new canvas can you help me you help me write a draft for my newsletter see what it does now I think this would probably be cooler where it's like for marketers you could come in here and that's kind of interesting you can change the styling I guess that's helpful add edit or explain uh can you elaborate elaborate on the following topic provide can you can you elaborate on the following topic pull in sources site a bunch of different stats that support the case for why sleep is good see if it can do that okay see that's cool huh uh suggest us adjust the length oh my God wow so I could basically just take this whole thing I could see the writing tool being a lot more helpful so if I just took this and said all right I want you to make this better wow see that's pretty cool huh and then you have this log on the left okay so yeah I think this is going to be danger for a lot of the tools like um uh what is it called Hemingway editor I think that's kind of uh irrel but it does this where it kind of grades things um let's just apply these what else can we do with this now I wonder why they add this stuff how about can you use italics and bold to size points don't be overbearing cool interesting I wonder if I can do tables let's try tables now um I don't know if this this looks like it's just markdown so we've done the link thing we've done the oh the reading level is pretty cool add final polish add emojis oh God instantly cringe instantly cringe we don't want that many emojis okay how do we remove emojis um you can't I can just add more wow okay oh about it that's a lot of emojis what about if I want to change the reading level let's make it for kindergarteners huh okay and then let's add some final polish so it's the styling wow yeah this is going to be a game changer for bloggers that's for sure um and I can see how this becomes like probably an API that you can hit I'm really curious about that part um but I wonder how I like get this I feel like they should take this and like make it easier to export like for different formats but I know this is in beta literally came out today um let's make it the longest it could possibly be and just make it longer like six times and see can I just keep suggest edits wow so first impressions are for programming if you already use cursor and you're used to using that and you're good at prompts and you use VZ then this is pretty useless but for document editing writing in English seems awesome I could totally see how this would be very helpful and I think it's going to get a lot better I'm curious if they end up having an API for it because inline editing with their models as a service that'd be really cool like the way that they have the comments show up the way that you can do suggestions like if you think up a layer of abstraction where not white labeled but like if this is even the UI elements all this stuff is very smooth I'd love to see this in a lot of products and it would make the experience a lot better for creators that's the video thanks for watching make sure you like it and I'll see you in the next