ChatGPT Canvas to PNG: How to Save a ChatGPT Preview as an Image or PDF

6 October 2026 · 6 minute read

To save what used to be a ChatGPT canvas as a PNG, click Copy code on the code block that shows your page, paste the code into an HTML-to-PNG renderer (or save it as a .html file and take a full-page screenshot in your browser), and download the image. Canvas itself is gone from current ChatGPT models: on 28 May 2026 OpenAI replaced it with writing blocks and code blocks, and a code block's Preview can show an HTML page but has no download and no image export.

The short version: Copy code, paste, render. React previews need turning into a standalone HTML file first, and Mermaid diagrams are quickest in the free Mermaid Live Editor.

What happened to ChatGPT canvas?

OpenAI's release notes for 28 May 2026 say canvas "will no longer be available in GPT-5.5 Instant or GPT-5.5 Thinking", and that "writing and coding functionality is now supported directly in chat responses through writing blocks and code blocks". The same note said paid users could keep using canvas "for a limited time through legacy models until those models are sunset".

OpenAI has not said whether any model still opens canvas today, and its old help article on canvas now returns a 404, so in practice you will meet code blocks. If an older chat does still open in canvas and offers a download, use that file; everything below applies to it too. People still search for "ChatGPT canvas" because the habit outlived the feature: the page preview they mean now lives in a code block.

What can a ChatGPT code block do instead?

OpenAI's help article on writing blocks and code blocks (updated in early October 2026) lists what a code block does: copy the code, edit it directly or ask ChatGPT to edit it, open it full screen, run supported Python, and switch between Code and Preview where a preview is supported. Previews run in a sandbox and cover five kinds of code. None of them has a download or a save-as-image button, so the route out depends on the type.

Preview type	What it shows	Best way to get an image
HTML page	A web page, poster, one-pager or dashboard	Copy code, then render it as a PNG or PDF
React component	An interactive app or chart	Ask for a standalone HTML file first, then render that
SVG image	A logo, icon or simple graphic	Ask for it inside a small HTML page and render that; or save the code as image.svg if you need a vector file
Mermaid diagram	A flowchart or sequence diagram	Paste the code into mermaid.live, then Actions > PNG or SVG
Vega or Vega-Lite chart	A data chart	Ask for "this chart as a single standalone HTML page", then render

If there is no Preview button, OpenAI's explanation is simple: "the code block does not support a preview". Usually the code is a fragment or another language. Ask for "a complete HTML page" and the Preview tab should appear.

How do you save a ChatGPT preview as a PNG?

Get the preview right first. Ask for changes in the chat until the Preview tab shows what you want. The image will match the code, not an earlier version you remember.
Click Copy code on that code block.
Check the first line. <!DOCTYPE html> or <html> means a full page. Lines starting with import mean React component code, which only runs inside ChatGPT. Send the prompt below and copy the new code.
Paste it into a renderer. Renda's Gemini Canvas and ChatGPT to PNG page takes the code directly; anything over 10 MB has to be saved as a .html file and dropped in instead.
Pick an output and download. Full page gives the whole page as one PNG. A social size (Instagram 4:5, square or Story, X, LinkedIn, a YouTube thumbnail or a link preview) lays the page out at that size instead.

Turn this into a single standalone HTML file that opens directly in a browser. Load React and any libraries from cdnjs, inline everything else, and give me the whole file.

Full page renders at the page's own width (1280 pixels if it has none), at 2x for pages up to 4,096 pixels tall, so small text stays sharp. Five PNGs a month are free, with no account and no watermark. The free alternative is a browser screenshot of the saved file; the guide to HTML to PNG without code has the exact clicks for Chrome, Firefox and Edge.

How do you get a PDF instead of a PNG?

There are two ways, and the difference is whether the text stays text.

Print to PDF from your browser. Save the code as page.html, open it, press Ctrl+P (Cmd+P on a Mac), choose Save as PDF and tick Background graphics under More settings. The text stays selectable and searchable, but page breaks can cut charts and cards in half, and a wide dashboard is shrunk to fit the paper.
Render it as a PDF. Pick PDF on the canvas tool. Fit to design makes the whole page one PDF page at its natural size, with no breaks; A4 portrait or landscape places it on an A4 sheet. Each page is a single image, so the text cannot be selected or searched.

For a report someone will search or copy from, print it. For a dashboard or one-pager that must look exactly like the preview, render it.

Why does the image look different from the preview?

Usually one of four things, each with a one-line fix:

What you see	Why	Fix
Empty or half-drawn charts	Charts animate in after the page loads	Ask ChatGPT to turn chart animations off
Missing sections or a blank page	A library did not load, or the code needs a developer build step	Ask for every library to load from cdnjs
The wrong tab or filter	A render captures the page as it first loads, not what you clicked in the preview	Ask for a static version that shows that state
A different font	Only Google Fonts and fonts embedded in the file load	Ask for a Google Font

The same causes trip up Claude artifacts, and the guide to an artifact that renders blank goes through each one in more depth.

How do you ask ChatGPT for a page that exports cleanly?

Add these lines to the end of your request. They fix the size, keep fonts and libraries on hosts that load anywhere, and remove anything that hides content behind a click.

Write this as one complete, standalone HTML file with all CSS and JavaScript inline, so it works when saved as page.html and opened in a browser.

- Size: exactly [1080x1350] (Instagram 4:5). For a report or dashboard instead: [1280px] wide, with the height following the content.
- Fonts: [Inter] from Google Fonts.
- Libraries: from cdnjs only, with chart animations turned off.
- Images: embedded in the file or on full https addresses.
- A light background with fixed colours, no dark mode.
- Every word and number written into the page: no tabs, filters or buttons that hide content.

The page: [describe it, with your exact text and numbers].

Frequently asked questions

Can I still use canvas in ChatGPT?

Not in current models. The May 2026 release note said paid users could keep canvas for a limited time through legacy models, but OpenAI does not say which, if any, still offer it. Code blocks do the same job for web pages.

Can ChatGPT turn the page into an image for me?

ChatGPT Images can draw a picture of it, but it redraws the page rather than capturing it, and OpenAI's own documentation says its image models "can still struggle with precise text placement and clarity". A generated image suits an illustrated poster; for exact words and numbers, capture the code instead.

Where did my writing canvas go?

Documents now appear as writing blocks, which you can edit in place, copy, revise and open full screen. OpenAI added download support to the full-screen writing view on the web in June 2026 but does not list the formats. Copying the text into Google Docs or Word always works.

Is it the same for Gemini Canvas?

Almost. Gemini Canvas has no image or HTML download either; its copy button is called Copy contents. The guide to saving a Gemini Canvas as an image covers its document and slide exports too.

Copy the code, get the PNG

Paste the code from a ChatGPT code block and download the whole page as a sharp PNG or a PDF. Five free PNGs a month, with no account and no watermark.

Paste your ChatGPT code