CHECK 04 6 MIN · HANDS-ON

HTML / PDF preview

What you’ll know by the end of this check

  • What “preview in place” changes about how you work with artifacts
  • Why this is the feature that makes artifact-first workflows actually viable
  • Three workflows that only become worth doing now

The shortest possible answer

Claude Code desktop can now render HTML and PDF artifacts inline, in the same window as the conversation. No export, no open-in-browser, no switching tabs to see what Claude made.

The shift: artifacts went from “attachments you check on” to “things you iterate on in real time.”

Why artifact-first workflows finally work

Before preview: Claude generates an HTML mockup. You export it. Open it in a browser. Switch back. Describe what’s wrong. Claude regenerates. Export. Open. Switch. Repeat. Each loop costs 15–30 seconds of pure context-switch.

After preview: Claude generates. You see it. You say “make the header bigger.” Claude regenerates. You see it. Two-second loop.

Three artifacts this changes fundamentally:

  1. HTML mockups / prototypes — design iterations, landing page drafts, email templates
  2. PDF reports — drafted docs you can skim before approving the text version
  3. Data visualizations — charts that render, not data tables you have to interpret

The workflows that start making sense

Design iteration. Claude drafts an HTML component. You see it. Tweak via conversation. No designer tool needed for first-pass. Only jump to Figma once the shape is right.

Email drafting with render. “Draft the release email and show me what it renders as.” Preview shows the actual formatted output, not markdown. You catch visual issues before approving.

Report drafting. Claude drafts a stakeholder-facing PDF. Preview renders it. You see page breaks, tables, figures. Cut issues in the preview, approve when it looks like the shipping artifact.

Component generation. “Generate five variants of this card component as HTML.” See all five rendered side-by-side. Pick one. Iterate.

What this isn’t

  • Not a full browser. No DevTools, no JS console, no network panel. For that you’ll still want a real browser.
  • Not a replacement for Figma / Linear / whatever. Prototype-in-Claude is the drafting stage, not the final environment.
  • Not a substitute for actually running your code. An HTML mockup Claude generated renders. The component in your actual app may not, for real-app reasons.

Preview is the in-session render loop, not the ship environment.

Things to try right now (6 minutes)

  1. In Claude Code desktop, ask Claude to draft a single-page HTML mockup of a landing page with three sections (hero, features, footer).
  2. View the preview inline.
  3. Say “make the hero darker, add an amber accent color.”
  4. See it update without leaving the window.
  5. Repeat once more. Note how much faster this is than previous export-and-view loops.

The canonical version

Verify behavior against Anthropic’s official release notes.

Ready to verify this check?

You’ve iterated on an HTML artifact inline. You know where preview belongs in your workflow and where real tools take over. Mark it cleared.