Building with Canvas

ChatGPT can build small, working apps for you inside a workspace called Canvas. In this lesson you'll learn how to plan an app in one prompt, preview it, improve it, fix it, and share it.

What is Canvas?

Building with Canvas is like working with an architect who draws while you talk. You describe the house, they sketch it, and you say "make the kitchen bigger". The sketch updates right away.

• Canvas is a panel that opens beside the chat.
• ChatGPT writes the app's code (the instructions a computer follows) in that panel.
• A preview runs the code, so you can click around the real app.
• You improve it with short follow-up prompts, one change at a time.

To open Canvas, pick it from the tools menu (often behind the + button). Or just write "Use canvas" at the start of your prompt.

Planning a small app in a prompt

Planning an app is like writing a shopping list before you go to the store. Without a list, you wander around and forget things. A vague request gets a vague app. A clear plan gets something close to what you imagined.

You don't need a long document. Answer five short questions:

• What it does — one sentence. If you can't write it, the idea is still fuzzy.
• Who uses it — the people who will open the app, and on what device.
• Inputs — what the user types or picks.
• Outputs — what the app shows back.
• Must-haves — the smallest set of features that makes it useful.

Think of a vending machine: coins and a button press go in, a snack comes out. For example, imagine a study planner app:

Everything else, like reminders or dark mode, is a nice-to-have. Leave it for later.

The build prompt template

Turn your five answers into one prompt. Copy this template and fill in the brackets:

Use canvas. Build a single-page web app called "[app name]" that I can preview right here. I don't know how to code, so keep everything in one file.

What it does: [one sentence]
Users: [who uses it, and on what device]

Inputs:
- [input 1]
- [input 2]

When I click "[main button]":
- [rule 1]
- [rule 2]

Output: [what the app shows, and how it looks]

Design: clean and friendly, works on a phone, big readable text.
If any input is missing, show a short friendly message instead.

Let's break this down:

• "Use canvas" and "preview right here" tell ChatGPT where to build.
• "One file" keeps the app simple to view, save, and share.
• The rules are clear bullets, so the app behaves in a predictable way.
• The last line asks for error handling: what the app does when something goes wrong.

For the study planner, the rules might read: "Give more hours to subjects whose exam is sooner" and "No subject is planned after its exam date."

Preview and test

ChatGPT writes the code in the Canvas panel. Look for a Preview or Run button at the top of the panel and click it.

Now test it like a real user would. A quick checklist:

• Fill in normal inputs and press the main button. Is the result right?
• Try an edge case, like a very large number or a date far away.
• Leave everything empty and press the button. Do you see a friendly message?
• Make the window narrow, like a phone. Does it still look good?

Iterate with follow-up prompts

To iterate means to improve something in small rounds. Ask for one change at a time, then test again.

Show each day as a card. Put the date in bold at the top of the card. Keep everything else the same.

Add a short summary above the results: [what to summarize]. Keep everything else the same.

Fixing problems

Things will go wrong sometimes. That's normal, even for professional developers. The trick is to describe the problem clearly: what you did, what you expected, and what happened.

There's a problem. I [what you did].
Expected: [what should happen]
What happened: [what actually happened]
Please find the cause, explain it in one sentence, and fix it.

Saving and sharing

• Keep it in a project. The chat and Canvas stay there, so you can come back later.
• Share a link. Look for a Share button in Canvas or the chat. Anyone with the link can view it.
• Download the code. Use the copy or download option and save it as an .html file. Double-click the file to open it in your browser.

Common mistakes

Asking for many changes at once

Wrong: Add dark mode, checkboxes, a calendar view, and fix the dates.
Right: Fix the dates. (Test.) Then: add checkboxes. (Test.)

Vague bug reports

Wrong: It's broken, fix it.
Right: When I click "Make my plan" with 2 subjects, only the first one shows. Please fix it.

Planning too much

Wrong: Must-haves: login, reminders, calendar sync, dark mode, and a chatbot.
Right: Must-haves: the 3 or 4 things that make the main result appear.

• Not testing after each change. Bugs are easiest to fix right after they appear.
• Trusting the output blindly. Check dates and numbers yourself once.

What's next?

You can now build and share a small app with ChatGPT. Next, you'll meet Claude and learn your way around its interface.