ChatGPT's Visual Upgrade with New 'Canvas' Feature

For those who were disappointed by the lack of new ChatGPT features during OpenAI’s DevDay event, this news might be a delightful surprise: OpenAI has released Canvas, a brand new feature that introduces a new way of working with ChatGPT for writing and coding tasks.

It’s weird that OpenAI didn’t mention this new feature yesterday during DevDay. Canvas represents the first major user interface redesign in ChatGPT since its release in November 2022.

What Is Canvas in ChatGPT?

Canvas is a new interface designed for working with ChatGPT on writing and coding projects that go beyond simple chat interactions. Canvas appears on the right side of the chat, making it easier to work on longer-form documents without having to continuously scroll up and down.

Here’s a closer look at what the new interface looks like.:

OpenAI’s research team developed the following core behaviors:

• Triggering the canvas for writing and coding
• Generating diverse content types
• Making targeted edits
• Rewriting documents
• Providing inline critique

Let me give you an example to illustrate how Canvas works:

Prompt: Write a simple NextJS dropdown with items Flux 1.0 Schnell, Flux 1.0 Dev, Flux 1.0 Pro. Make it look modern using shadcn components

import React from 'react';
import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@shadcn/ui";

const FluxDropdown: React.FC = () => {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button className="bg-blue-600 text-white hover:bg-blue-700 focus:ring-2 focus:ring-blue-400">
          Select Flux Version
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56 bg-white shadow-lg rounded-md p-1">
        <DropdownMenuItem className="hover:bg-gray-100 focus:bg-gray-200">
          Flux 1.0 Schnell
        </DropdownMenuItem>
        <DropdownMenuItem className="hover:bg-gray-100 focus:bg-gray-200">
          Flux 1.0 Dev
        </DropdownMenuItem>
        <DropdownMenuItem className="hover:bg-gray-100 focus:bg-gray-200">
          Flux 1.0 Pro
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};

export default FluxDropdown;

Using Canvas, ChatGPT can more effectively comprehend the context of your objectives. You can highlight particular sections to specify exactly where you want ChatGPT’s focus. Much like a copy editor or code reviewer, it can provide inline feedback and suggestions while keeping the entire project in mind.

For example, if you want to make changes to a specific portion of the code, you can simply highlight the section you wish to modify, and a floating text prompt will appear where you can specify the changes you want.

In the lower right corner, there’s a menu of shortcuts that allows you to ask ChatGPT to adjust writing length, debug your code, and quickly perform other useful actions.

One particularly interesting option is the “Port to a language” feature, which lets you quickly translate your code to other programming languages such as Python, JavaScript, C++, and more.

If you’re not happy with the code changes, you can restore previous versions of your work by using the back button in Canvas.

There’s also a history page when you close the Canvas interface.

OpenAI’s Canvas vs. Anthropic’s Artifacts

Canvas seems to be OpenAI’s answer to Anthropic’s Artifacts feature on Claude. If you haven’t heard about Artifacts yet, check out the article below for details:

Anthropic Introduces Claude 3.5 Sonnet — The Most Powerful Language Model
Anthropic is trying to win back its users with Claude 3.5 Sonnet, which they claim is better than GPT-4o. It’s faster…generativeai.pub

When a user asks Claude to generate content like code snippets, text documents, or website designs, the results appear in a dedicated window next to their conversation.

One major difference, however, is that Canvas cannot render web components. When I asked it to generate a simple snake game:

Prompt: create a fully working snake game web app with scoring system

Canvas was able to give me the source code of a snake game written in Python. However, when I asked it to render the game on the screen so I could play it, it simply responded:

Currently, I cannot directly run or render interactive games like this Python-based snake game. However, you can easily play it by running the script on your local machine.

When you try the same prompt on Claude, the Artifacts feature will render a playable web app right in the chat window.

This is a major dealbreaker for users who want to quickly visualize web apps or graphs without leaving the chat interface.

How To Access Canvas?

To access the Canvas feature, you need to be a paying subscriber to ChatGPT. However, OpenAI plans to make Canvas available to free users in the future.

Starting today we’re rolling out canvas to ChatGPT Plus and Team users globally. Enterprise and Edu users will get access next week. We also plan to make canvas available to all ChatGPT Free users when it’s out of beta.

To get started, open the ChatGPT dashboard, and under the model picker, you’ll see a new option, “GPT-4o with canvas.”

Select that model and start writing your prompt.

Canvas opens automatically when ChatGPT detects a scenario in which it could be helpful. You can also include “use canvas” in your prompt to open Canvas and use it to work on an existing project.

When to Use Canvas?

You may notice that ChatGPT smartly knows when to switch to the Canvas interface and when not to.

For queries like “Give me a workout plan for the weekend,” it’s not necessary to switch into the Canvas interface.

The truth is, it’s incredibly challenging to determine the optimal scenarios for triggering Canvas. OpenAI faced several key challenges in this regard:

1. Deciding When to Trigger a Canvas: For example, it should open a canvas for prompts like “Write a blog post about the history of coffee beans” but refrain from doing so for general queries like “Help me cook a new recipe for dinner.”
2. Optimizing Editing Behavior: Once the Canvas is active, the model needs to determine whether to make targeted edits or to rewrite entire sections.
3. Generating High-Quality Comments: The final challenge was enhancing the model’s ability to produce insightful and accurate comments within the Canvas. Unlike triggering and editing behaviors, assessing comment quality required human evaluations due to the subjective nature of feedback.

By addressing these key challenges, the model knows when to open Canvas, make targeted edits, and perform full rewrites. It also understands broader context to provide precise feedback and suggestions.

Final Thoughts

A few months ago, OpenAI made ChatGPT free to all users. Many were confused about why the company made such a move. Thousands of users, including myself, canceled their subscriptions because the free tier already gave access to GPT-4o, which is the latest and most capable language model the company offers.

Perhaps OpenAI made ChatGPT free because they had bigger features in the pipeline that are worth paying for. Introducing such premium tools could justify the subscription cost, making users more inclined to invest in the enhanced capabilities that go beyond what the free tier offers.

However, Canvas’s inability to render web components is a deal-breaker for me. When Anthropic released Claude Artifacts, I was really impressed because it allows you to build playable games right in the chat window. But Canvas can’t do that yet.

Also, to those who are comparing Canvas to Cursor AI — come on, Canvas is not even close. If OpenAI builds a cursor-like tool baked into VS Code, then maybe it can stand a chance to beat Cursor.

Anyway, Canvas is still in early beta. A lot could change in the coming weeks, and according to OpenAI, they plan to rapidly improve its capabilities. Let me know what you think about this new ChatGPT feature in the comments!

‍