Code blocks: read, preview, run

Code belongs in the response

When ChatGPT writes code, it almost always places it inside a code block: a dedicated area separate from the rest of the response that you can read, copy, edit, preview, and sometimes run without leaving the conversation. This feature replaces the former “Canvas Code” mode, which was retired along with Canvas on May 28, 2026. For a script, a test web page, or a chart, you don’t need another tool; for a full software project with a repository and tests, Codex takes over.

What a code block offers

Depending on the block and your account, you can:

• copy the code with one click and identify its language via the label (Python, JavaScript, HTML…);
• edit blocks that allow it directly, or ask ChatGPT to do it for you;
• open the block in full screen to work on long code;
• toggle between Code and Preview for content that renders visually;
• run supported Python code with Run, which opens a workspace with a console showing results and errors, and lets you stop code that runs too long.

Preview covers HTML pages, React components, SVG images, Mermaid diagrams, and Vega or Vega-Lite charts. If Preview doesn’t appear, the block doesn’t support it.

An isolated environment

Previewing and running happen in an isolated environment, a sandbox. If a preview needs external resources, ChatGPT may ask for your permission before connecting. In an enterprise workspace, administrators can disable code execution or network access. Your edits in a block are saved with the conversation, except in temporary chats where they may be lost.

The debugging workflow

Debugging in the conversation follows a four-step loop. First, paste the problematic code in full rather than in fragments so ChatGPT has the full context. Next, describe the problem precisely: expected behavior on one side, observed behavior on the other, and the exact error message. “The script should print ten lines, but it only prints nine and crashes at the end with an IndexError” is infinitely better than “it doesn’t work.” Then, examine the proposed fix and ask for an explanation of each change. Finally, run the corrected code, using Run for Python or your own environment, and come back with the new result if the problem persists.

Practical use cases

Rapid prototyping is the most common scenario. You have an idea, like automating file renaming or merging two exports, but no time to code it all: describe the need in natural language, let ChatGPT write the code, adjust the details yourself (variable names, paths, values), then test and iterate.

Language conversion is just as direct: “Convert this Python code to modern JavaScript.” Then compare the two versions line by line. For a visual mockup, ask for an HTML page or a React component, then switch to Preview to see it render and fix it on sight.

If you’re learning to program, the code block acts as a private tutor: ask for an exercise, write your solution, then say, “Check my code and tell me what I can improve.” The feedback focuses on code you actually wrote.

To go further, toward a full repository, automated tests, and changes across multiple files, switch to Codex in the ChatGPT desktop app: that’s the experience dedicated to software development.

Common pitfalls

The first pitfall is not testing the code: execution exists precisely to validate each step, and skipping it means accepting code on faith. The second is pasting code without context: a bare “fix this code” deprives ChatGPT of the information needed to diagnose the issue. The third is pasting secrets: API keys, passwords, and access tokens have no place in a conversation; replace them with dummy values before asking for help. The fourth, more subtle, is ignoring the explanations: reading them is the surest way to understand the code you’re about to run and avoid depending on AI forever.

Your turn

Write, run, fix. Ask: “Write a Python function that converts a list of durations in hh:mm format to minutes and calculates the total, with three examples.” Run the code with Run and read the console. Then ask: “Add handling for invalid inputs, like 12:75 or an empty string,” and run it again. Finish by creating an HTML page that displays a table of these durations, and switch to Preview to see it.

Official sources: Working with writing blocks and code blocks in ChatGPT (OpenAI Help Center: code block actions, previewing, running Python, sandboxing) · ChatGPT Work and Codex (Codex for software development)

Key takeaways

• Code blocks replace “Canvas Code”: copy, edit, preview, and run without leaving the conversation
• Preview displays HTML, React, SVG, Mermaid, and Vega; Run executes supported Python with a console
• Execution happens in a sandbox; external access requires your permission
• To debug: full code, expected vs. observed, exact error message, then test
• No secrets in a conversation; for a real software project, switch to Codex