You ask Claude to build a React component or a small HTML page, it opens the artifact pane on the right, and the pane is completely empty. No error, no spinner, just white. The “Preview” tab is blank but the “Code” tab shows the source. This is almost always a runtime error inside the sandboxed iframe that Claude’s UI never surfaces, or a stale browser cache holding the old artifact frame. The fix is to open DevTools, read the iframe console, and tell Claude exactly what broke.
Common causes
Ordered by hit rate, highest first.
1. Uncaught JavaScript error inside the sandboxed iframe
Artifact previews render in a sandboxed <iframe> with its own JS context. A ReferenceError, SyntaxError, or TypeError at top level prevents the React tree from mounting, but the parent Claude UI does not display that error.
How to judge: Open DevTools, right-click the blank pane, choose “Inspect frame” or pick the iframe in the dropdown at the top of the Console. Red errors there are the smoking gun.
2. Import from a CDN URL that returned 404 or HTML
Artifacts pull React, Tailwind, lucide-react, etc. from esm.sh / unpkg / cdn.jsdelivr.net. If the version pin is bad or the CDN returned a redirect HTML page, the import resolves but never executes.
How to judge: DevTools Network panel filtered to the artifact iframe, look for 404 / 503 / Content-Type: text/html on JS asset rows.
3. Stale browser cache holding an empty frame
You regenerated the artifact but the iframe is still wired to the previous blob URL, which has since been revoked. Subsequent renders pull about:blank.
How to judge: Hard refresh (Cmd-Shift-R / Ctrl-Shift-F5). If the artifact appears after refresh, it was a cache or revoked-blob issue.
4. Tailwind classes referenced but no Tailwind script included
Claude sometimes emits className="bg-blue-500 p-4" without the Tailwind CDN script in the HTML head. Layout collapses to zero-height containers and the page looks blank even though the React tree mounted.
How to judge: DevTools → Elements on the iframe → the <div> is present but has width: 0 or height: 0. Or no <script src="...tailwindcss..."> in <head>.
5. Component default-exports a function that returns null
A common Claude mistake: the artifact wraps the demo in a default export that returns null for one branch and the preview happens to hit that branch (e.g. if (!data) return null; with no initial data).
How to judge: Code tab → search for return null. If present, ask Claude to add a loading state or seed initial state.
Before you start
- Note whether the blank shows on every Claude conversation or just this one; if only one, the issue is the artifact code itself.
- Try the same artifact in an incognito window and on a second browser — that isolates extensions and cache.
- Keep the current conversation open. You will need its artifact ID and Claude turn to ask for a fix.
Information to collect
- Exact iframe console output (copy red text verbatim, do not paraphrase).
- Whether the Code tab is also blank or only Preview is blank.
- Browser + version, OS, whether any blockers are installed (uBlock, Brave Shields, MDM profiles).
- The artifact type: React, HTML, SVG, Mermaid, or code-only.
- Whether other artifacts in the same conversation render fine.
Step-by-step fix
Step 1: Hard refresh, then retry
Cmd-Shift-R on Mac, Ctrl-Shift-F5 on Windows. About 30% of blank panes are revoked-blob staleness and refresh alone fixes them. If the artifact reappears, you are done.
Step 2: Open the iframe console
In DevTools, click the dropdown at the top of the Console tab (it usually says “top”). Pick the iframe whose path looks like claude.site or artifacts.anthropic.com. Re-run the artifact. Read the first red error — that is the actual failure.
Uncaught ReferenceError: useEffect is not defined
at Component (index.js:14)Step 3: Paste the error back to Claude
Copy the iframe error line for line and reply:
The artifact preview is blank. Iframe console shows:
Uncaught ReferenceError: useEffect is not defined at index.js:14
Please fix and re-emit the artifact.Claude almost always fixes it on the first try once given the actual error.
Step 4: Check CDN imports if no console error
If the iframe console is empty but the pane is still blank, look at the Network tab inside the iframe. Filter by js. Any 404 row is your culprit. Common offenders:
| URL pattern | Symptom | Fix |
|---|---|---|
esm.sh/react@18 | 404 on minor version | Ask Claude to pin major only: esm.sh/react@18 |
unpkg.com/...?module | redirects to HTML | Switch to esm.sh |
cdn.tailwindcss.com | blocked by CSP | Ask Claude to inline styles instead |
Step 5: Verify Tailwind / CSS is actually included
If the React tree mounted but the page is visually empty, view the iframe HTML source. Confirm one of:
<script src="https://cdn.tailwindcss.com"></script>or inline <style> rules. If both are missing, prompt Claude:
Add the Tailwind CDN script tag to the artifact head so the
utility classes actually apply.Step 6: Ask Claude to add an error boundary
For React artifacts, request:
Wrap the root component in a React error boundary that
renders the error message inline. That way blank renders
become visible errors.This makes future blank-pane issues self-diagnosing.
Step 7: As a last resort, regenerate from scratch
If the artifact has been edited 5+ times and is now too tangled to fix, ask Claude to “rewrite this artifact from scratch in one pass, no edits.” A clean regeneration sidesteps accumulated diff drift.
Verify
- Reload the conversation in a fresh tab and confirm the artifact renders without DevTools.
- Open the artifact in another browser (Safari if you were on Chrome) — should render the same.
- Click between Code and Preview tabs; switching should not blank the pane.
- If the artifact is interactive, exercise one control (button, input) and confirm the iframe console stays clean.
Long-term prevention
- For non-trivial artifacts, ask Claude up front to “wrap the root in an error boundary and log mount.”
- Pin CDN imports with major version only; avoid pinning patch versions that may have been pulled.
- Keep DevTools open while iterating on artifacts — catch iframe errors as they happen, not three turns later.
- When an artifact gets long, split it: one for data layer, one for UI. Smaller artifacts have fewer blank failure modes.
- Bookmark
status.anthropic.comand check it before debugging — sometimes the artifact service itself is degraded.
Common pitfalls
- Reading the parent page console instead of the iframe console — you will see nothing.
- Assuming “blank Preview means broken Claude” — almost always it is one missing import.
- Editing the artifact 10 times to fix a typo; better to ask for a full rewrite once.
- Forgetting that Tailwind classes do nothing without the Tailwind script — Claude regularly forgets this.
- Disabling extensions one at a time when an incognito test would tell you in 5 seconds.
FAQ
- Why does Claude not show the iframe error in its own UI? The artifact sandbox is intentionally isolated; the parent UI cannot read inside the iframe by design.
- Does the blank-pane issue ever mean my account is throttled? No — throttling surfaces as a rate-limit banner, not a blank artifact.
- Should I report this to Anthropic? Only if multiple distinct artifacts blank in the same session with no iframe error; that suggests a service-side issue.
- Can I download the broken artifact and run it locally? Yes, the Code tab still works. Save the source, install dependencies, run with vite.