Save your image in three steps

Open the viewer and paste your HTML, or select a file with Open.
Check the preview. On a small screen, select Preview or Both. If Live is off, press Run to show your latest edits.
Choose Download → PNG in the preview toolbar. Wait for the image to finish saving, then open the downloaded file to check it.

The PNG captures the rendered preview, including your document’s background. It leaves out the editor, toolbar and device frame.

Try an editable card

This card uses HTML, CSS and system fonts. There are no remote images to load. Change the headline, choose a preview width, and save your own version.

Open this example in the viewer →

View the HTML and CSS

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Studio update</title>
  <style>
    * { box-sizing: border-box; }
    html { background: #f1efe8; }
    body { margin: 0; min-height: 100vh; padding: 24px; background: #f1efe8;
      color: #202820; font: 16px/1.5 system-ui, sans-serif; }
    article { max-width: 560px; margin: auto; padding: 28px;
      border: 1px solid #c7cfc3; border-radius: 18px; background: #fff; }
    .label { margin: 0 0 12px; color: #466047; font-size: 14px; }
    h1 { margin: 0 0 12px; font-size: clamp(28px, 6vw, 42px);
      line-height: 1.1; letter-spacing: -.04em; }
    p { margin: 0; }
    footer { margin-top: 24px; padding-top: 16px;
      border-top: 1px solid #dde2d9; font-size: 14px; }
    @media (max-width: 420px) {
      body { padding: 16px; }
      article { padding: 20px; }
      .label { font-size: 12px; }
    }
  </style>
</head>
<body>
  <article>
    <p class="label">NORTH STUDIO · SEPTEMBER NOTES</p>
    <h1>A little less noise.<br>A little more space.</h1>
    <p>A simple card made with HTML and CSS. Edit the words,
      adjust the preview width, then save it as an image.</p>
    <footer>Made for a slower scroll.</footer>
  </article>
</body>
</html>

Open this example in the viewer →

Choose the layout before exporting

On a wide screen, use the phone, tablet or width controls to set the preview size. On a phone, the preview follows the available width. A narrower layout changes line breaks; it does not just shrink the same picture.

The export uses your device’s pixel ratio, so image pixels may outnumber the CSS pixels shown by the width control. Inspect the saved file’s dimensions before using it somewhere with an exact size requirement. There is no separate resolution or crop setting; trim any extra space in an image editor after downloading.

For a solid background, set a background color on body or html in your document. The viewer’s light/dark interface setting is separate from the document’s own styles.

Fix a missing or blurry export

An image appears in the preview but not the PNG: its host may allow display while blocking export. Use embedded image data or assets served with the appropriate cross-origin permissions. Switching to an HTTPS URL alone does not grant those permissions.
Local images are missing everywhere: opening one HTML file does not import its image folder. Follow the missing-images checklist.
Fonts look different: remote font files may fail to load or embed. Start with system fonts, as this example does, to isolate the issue.
Text looks soft: avoid enlarging the PNG after saving. Export the layout at the width you need and check its actual pixel dimensions.
A long page is incomplete, or saving fails: large documents can hit browser canvas or memory limits. Simplify the page, export a smaller document, or use PDF for a multi-page report. Scrollable panels and embedded content may not export as expected.

What the image keeps

A PNG is a still picture. It has no editable HTML, working buttons, clickable links or selectable text. Keep an HTML download too if you want to change the design later.

For a layout with animation, video, canvas content or an embedded page, inspect the output carefully. This is a browser-based rendering export, and it can differ from a screenshot taken by your operating system.

The viewer does not upload your HTML to our server to make the image. Your document’s remote assets can still make network requests.

Next steps

Check different widths with the responsive testing guide, or save a printable PDF. For the browser restriction behind some missing images, see MDN’s cross-origin image guidance.