You ask Claude to build a React component or a small HTML page, the artifact pane opens on the right, and it is completely white. No error, no spinner. The “Preview” tab is blank but the “Code” tab shows the full source. This is almost always a runtime error inside the sandboxed iframe that Claude’s main UI never surfaces, or a stale/revoked blob frame.
Fastest fix (works in ~90% of cases): hard-refresh once (Cmd-Shift-R / Ctrl-Shift-F5). If still blank, open DevTools, switch the Console to the artifact iframe, copy the first red error verbatim, and paste it back to Claude with “the preview is blank, here is the iframe console error, please fix and re-emit.” Claude fixes it on the first try the moment it sees the real error string.
Which bucket are you in?
Pin down the bucket before you start changing things.
| What you see | Most likely cause | Jump to |
|---|---|---|
| Blank after a regenerate/edit, refresh fixes it | Stale or revoked blob frame | Step 1 |
| Red error in the iframe console | Uncaught JS error (missing import, typo) | Steps 2-3 |
Console mentions localStorage, sessionStorage, or Access is denied | Browser-storage call inside the sandbox | Step 4 |
404 / text/html on a script row in Network | CDN not on the allowlist | Step 5 |
| React mounted but page is visually empty | Tailwind/CSS not loaded, or return null branch | Steps 6-7 |
Blank only on a shared claude.ai/public/artifacts/... link | Published-artifact origin bug | Step 8 |
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 context dropdown at the top of the Console. Red errors there are the smoking gun.
2. Browser-storage access inside the sandbox
This is the most-missed cause as of June 2026. Claude’s preview iframe is sandboxed without allow-same-origin, so any call to localStorage, sessionStorage, or indexedDB throws immediately and aborts the render. Claude regularly writes localStorage.getItem(...) for “remember my settings” features without realizing the sandbox forbids it.
How to judge: the iframe console shows, verbatim:
Uncaught SecurityError: Failed to read the 'localStorage' property from 'Window': Access is denied for this document.3. Import from a CDN that is not on Claude’s allowlist
Claude’s artifact sandbox only loads external scripts from https://cdnjs.cloudflare.com. React, Tailwind, Recharts, shadcn/ui, and lucide-react are already pre-loaded, so you should import those directly without a CDN tag. If Claude emits an esm.sh, unpkg.com, or cdn.jsdelivr.net URL for some other package, the request is blocked or 404s and the import never executes.
How to judge: DevTools Network panel scoped to the artifact iframe; look for 404 / 503 / Content-Type: text/html on JS rows, or a CSP Refused to load the script line in the console for any host other than cdnjs.cloudflare.com.
4. 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.
5. Tailwind classes referenced but Tailwind not active
Most React artifacts get Tailwind for free. But in raw HTML artifacts Claude sometimes emits className="bg-blue-500 p-4" with no Tailwind in the document. Layout collapses to zero-height containers and the page looks blank even though the tree mounted.
How to judge: DevTools → Elements on the iframe → the <div> is present but has width: 0 or height: 0. Or there is no Tailwind in the document <head>.
6. 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 (for example 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.
7. Published-artifact origin bug (shared /public/artifacts/ links)
Distinct from the editor preview: a regression that began around April 1, 2026 made some published artifacts served from claudeusercontent.com render blank when opened via a claude.ai/public/artifacts/... share link, because of a postMessage target-origin mismatch. The editor preview inside your own chat is unaffected.
How to judge: the published page’s console shows, verbatim, one of:
Failed to execute 'postMessage' on 'Window': Invalid target origin 'app://localhost' in a call to 'postMessage'.The target origin provided ('https://www.claudeusercontent.com') does not match the recipient window's origin ('https://claude.ai').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, ad blockers (uBlock, Privacy Badger), and cache in one move.
- Keep the current conversation open. You will need its artifact and the 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, corporate proxy/VPN that injects CSP).
- 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. A large share 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 context dropdown at the top of the Console tab (it usually says “top”). Pick the iframe whose path looks like claude.site or claudeusercontent.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: If the error mentions storage, remove the storage call
If the console shows the localStorage / sessionStorage Access is denied SecurityError above, the artifact cannot use browser storage at all in this sandbox. Reply:
This artifact uses localStorage, which is blocked in the
artifact sandbox. Rewrite all persisted state to use React
state (useState/useReducer) or in-memory variables instead.The same applies to sessionStorage and indexedDB. There is no flag to enable them in the preview — in-memory state is the only fix.
Step 5: Check imports against the cdnjs allowlist
If the console is clean but the pane is still blank, open the Network tab inside the iframe and filter by js. Any 404 row, or a console line like Refused to load the script ... because it violates the Content Security Policy, is your culprit. The sandbox only allows external scripts from cdnjs.cloudflare.com.
| What you see | Cause | Fix |
|---|---|---|
esm.sh/... or unpkg.com/... blocked or 404 | host not on allowlist | Ask Claude to use the pre-loaded package or a cdnjs.cloudflare.com URL |
cdn.jsdelivr.net/... refused by CSP | host not on allowlist | Switch to cdnjs.cloudflare.com |
cdn.tailwindcss.com not applying | not needed in React artifacts | Use the built-in Tailwind; for HTML, load Tailwind via cdnjs |
Prompt template:
That import is blocked by the artifact sandbox, which only
allows cdnjs.cloudflare.com. Use the pre-loaded library if one
exists (React, Tailwind, Recharts, shadcn/ui, lucide-react),
otherwise load it from cdnjs.cloudflare.com.Step 6: Verify Tailwind / CSS is actually active
If the tree mounted but the page is visually empty in a raw HTML artifact, view the iframe source and confirm Tailwind is present. For HTML artifacts, prompt Claude:
Load Tailwind from cdnjs.cloudflare.com (the artifact sandbox
blocks other CDNs) so the utility classes actually apply,
or inline the styles instead.React artifacts already have Tailwind, so if a React preview is unstyled, look for a return null branch instead.
Step 7: 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 8: For shared/published links, suspend judgment on your code
If the blank only happens on a claude.ai/public/artifacts/... link you shared, and the console shows the app://localhost / claudeusercontent.com postMessage error, your artifact code is fine — this is the server-side published-artifact regression. Re-open the artifact inside your own chat (editor preview) to confirm it renders, check status.anthropic.com, and watch the tracking issue (anthropics/claude-code#42064). Re-publishing the artifact sometimes mints a fresh working link.
Step 9: 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.
How to confirm it’s fixed
- Reload the conversation in a fresh tab and confirm the artifact renders without DevTools open.
- 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 — no new red errors.
Long-term prevention
- For non-trivial artifacts, ask Claude up front to “wrap the root in an error boundary and log mount.”
- Never ask for
localStorage/sessionStorage/indexedDBin an artifact — it is blocked by the sandbox; use in-memory or React state. - Stick to the pre-loaded libraries (React, Tailwind, Recharts, shadcn/ui, lucide-react); any other dependency must come from
cdnjs.cloudflare.com. - Keep DevTools open while iterating — 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.com and 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 blocked import or a storage call.
- Telling Claude to add
localStoragefor persistence; it cannot work in the preview and will blank the pane every time. - Editing the artifact 10 times to fix a typo; better to ask for a full rewrite once.
- 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, so a fatal runtime error just looks like a white pane.
- Why does my artifact work in the editor but go blank when I share the link? That is the published-artifact origin bug (Step 8), a server-side
postMessagemismatch onclaudeusercontent.com, not your code. - Can artifacts use localStorage at all? No.
localStorage,sessionStorage, andindexedDBall throwAccess is deniedin the sandbox. Use React state or in-memory variables; for real persistence, host the app yourself. - Which libraries can an artifact import? React, Tailwind, Recharts, shadcn/ui, and lucide-react are pre-loaded. Anything else must load from
cdnjs.cloudflare.com—esm.sh,unpkg, andjsdelivrare not on the allowlist. - Does a blank pane ever mean my account is throttled? No. Throttling surfaces as a rate-limit banner, not a blank artifact.
- Can I download the broken artifact and run it locally? Yes, the Code tab still works. Save the source, install dependencies, and run it with vite — local environments have no sandbox restrictions, so storage and any CDN work there.