Why is my Claude artifact showing a blank white screen?

A blank artifact almost always means the iframe loaded but its content was blocked or crashed. The fastest test: open claude.ai in incognito. If the artifact loads there, a browser extension is filtering the content in your normal browser. If it still fails in incognito, open the browser console (F12) — a JavaScript error will be waiting there pointing at the actual cause.

Why does Claude keep making code blocks instead of artifacts?

Claude uses the artifact panel for self-contained outputs. Partial snippets, files with external imports, and very short code fall back to code blocks. Ask explicitly for 'a single self-contained HTML file' or paste the code block back and ask Claude to render it as an artifact.

Why does the artifact work for me but not the person I shared it with?

The most common reason is that the artifact is AI-powered — it calls Claude's API at runtime and requires the viewer to be signed in. Standard HTML artifacts should load for anyone with the share link. If your static artifact is showing blank for a recipient, ask them to try incognito — if it works there, it's a browser extension on their end.

Do Claude artifacts work on mobile?

The Claude mobile app does not currently render artifacts — the panel does not appear on iOS or Android. Mobile web (Safari/Chrome on phone) shows artifacts with some restrictions. To review an artifact on mobile, publish it as a shared link or export the HTML and open it in a browser tab.

My artifact loaded yesterday but is blank today. What changed?

Browser updates, extension rule changes, and stale cached resources are the usual culprits. Start with a hard refresh (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows). If that does not work, clear site data for claude.ai in DevTools (F12 → Application → Clear Site Data) and reload.

How do I share a Claude artifact so anyone can view it without a Claude account?

For static HTML artifacts, the Publish button inside Claude generates a public URL that anyone can open in any browser — no account required. AI-powered artifacts are the exception: they require an active Claude session to run. If you want full control over hosting and the ability to collect feedback, export the HTML and host it on a static host or a collaborative canvas tool.

drafty

Claude artifacts not working — fixes that actually help

Your code is usually fine. The artifact renderer is an isolated iframe inside your browser, and anything that blocks iframes or inline scripts breaks it silently. Here is how to find out what is actually happening.

Quick answer

If the artifact panel is blank or missing, open an incognito window and try again. If it loads there, a browser extension is blocking the iframe. If it still fails, check Settings → Feature Preview and make sure Artifacts is toggled on. If the panel shows but nothing renders, open the browser console (F12) — there will be a JavaScript error pointing at the real cause.

Why artifacts fail silently

The artifact renderer is a sandboxed iframe, not a pop-up and not a tab. It loads on claudeusercontent.com, a separate origin from claude.ai. That cross-origin setup is what lets Claude isolate the rendered code safely — but it also means anything that blocks iframes, cross-origin scripts, or third-party storage will kill the preview without showing an obvious error message.

The failure is almost always browser-side, not a Claude outage. Before checking status.anthropic.com, do the incognito test first.

The three most common causes

1. A browser extension is blocking the iframe

Ad blockers, privacy extensions (uBlock Origin, Privacy Badger, NoScript), and some corporate security tools block cross-origin iframes or inline scripts. The artifact panel may appear — just blank or gray — because the shell loads but the content is filtered.

The test: Open claude.ai in an incognito window. Incognito disables extensions by default. If the artifact loads there, you have your answer. Go back to your normal browser and disable extensions one at a time until the artifact reappears. The culprit is usually the first privacy or ad-blocking extension you installed.

If you use Chrome: open chrome://extensions, toggle extensions off individually, reload Claude, and test. You do not need to uninstall anything — just identify the one causing the conflict and either whitelist claude.ai + claudeusercontent.com in its settings, or keep it off while using artifacts.

2. The feature toggle is off

Artifacts is listed under Settings → Feature Preview (or Settings → Capabilities depending on your plan). If it was never enabled, or if it reset after an account change, the artifact panel never appears — Claude just outputs code blocks instead.

The fix: Click your initials (bottom left of the sidebar) → Settings → Feature Preview → enable Artifacts. If you do not see the toggle, your account may not yet have access or your plan may need a refresh. Logging out and back in sometimes surfaces it.

3. A JavaScript error in the generated code

When the panel appears but shows a blank white or gray rectangle, the renderer loaded but the code inside it failed. React components that reference undefined variables, CDN libraries that fail to load (Chart.js, Google Fonts), or code that tries to read localStorage will all silently crash — the sandbox blocks localStorage and sessionStorage by design.

The test: Open the browser console (F12 → Console) while the blank artifact is visible. You will see a red error. The message tells you exactly what failed. Common patterns:

ReferenceError: X is not defined — Claude referenced a library that is not loaded. Ask Claude to inline all dependencies into the HTML file.
Failed to load resource — a CDN import is being blocked. Ask Claude to switch to a self-contained version without external imports.
No console error at all — a hard refresh (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows) clears cached resources and resolves this for about half of persistent blank-screen cases.

If you see the "Try fixing with Claude" button in the artifact panel, click it — Claude detects the runtime error and usually repairs it in one pass.

Less common causes worth checking

Stale page cache. Browser updates and extension rule changes sometimes leave Claude's renderer in a broken state. A hard refresh (Cmd+Shift+R / Ctrl+Shift+R) or clearing site data for claude.ai in DevTools (F12 → Application → Clear Site Data) fixes this.

The artifact requires you to be signed in. Some artifacts call Claude's API at runtime — those are AI-powered artifacts, not static HTML previews. If someone shares an artifact link and you see a sign-in prompt, the artifact itself requires an active Claude session to work. This is expected behavior, not a bug.

Platform-specific limits. The Claude mobile app does not currently render artifacts — the panel does not appear on iOS or Android. The mobile web browser shows artifacts with some restrictions. If you need to review an artifact on mobile, publish it as a shared link first.

ChromeOS and some Edge configurations. Strict security policies on ChromeOS can block the sandboxed iframe. Try the Chrome browser in a Linux container, or the Android app version of Claude. On Edge, resetting Edge settings (Settings → Reset settings) resolves most artifact-blocking issues.

What to do when Claude generates a code block instead of an artifact

Claude decides whether to use the artifact panel based on whether the output is self-contained. Short code snippets, partial components, and files with external dependencies often render as code blocks instead.

To push Claude toward the artifact panel, be explicit: ask for "a single self-contained HTML file" or "a complete React component with all imports inline." Self-contained is the key phrase — if the code has external imports Claude cannot bundle, it may fall back to a code block rather than risk a blank artifact.

You can also paste a code block back in and ask: "Render this as an artifact." That prompt forces the panel open even if Claude defaulted to a code block.

When the artifact works for you but not the person you shared it with

The artifact's built-in share link (via the Publish button) makes a static URL on claude.ai. For most HTML artifacts this works fine — anyone with the link can view it in any browser. The exception: AI-powered artifacts that call the Claude API at runtime require the viewer to sign in.

If the person you shared it with sees a blank screen or a login prompt:

Check whether the artifact is static HTML or AI-powered. A static artifact should load without a Claude account. If it does not, try opening the shared URL in an incognito window yourself — if that works, the problem is the viewer's browser or network, not the share link.
If the share link is genuinely broken, copy the artifact's HTML and publish it independently via a static host (Netlify, Vercel, or Drafty). That removes the dependency on Claude's sharing infrastructure entirely.

Where Drafty fits

If you have an artifact you want to share for feedback — not just view — Drafty is a way to turn it into a commentable link. Paste the HTML into a canvas, share the drafty.im URL, and collaborators can click the exact element they mean and leave an anchored comment. No Claude account required on their end. Your agent can read the comments and push an updated version to the same link, with version history. It works on artifacts from any tool, not just Claude.

Ruling out a Claude outage

Before spending time troubleshooting locally, check status.anthropic.com for active incidents. Artifact-specific outages do happen — there was a documented incident in September 2025 where artifact loading failed platform-wide. During an outage, no amount of extension-toggling or cache-clearing will help. If the status page shows degraded service, wait it out.

If the status page is all-green and the incognito test still fails, the issue is local to your browser or network.

Claude artifacts FAQ

Why is my Claude artifact showing a blank white screen?: A blank artifact almost always means the iframe loaded but its content was blocked or crashed. The fastest test: open claude.ai in incognito. If the artifact loads there, a browser extension is filtering the content in your normal browser. If it still fails in incognito, open the browser console (F12) — a JavaScript error will be waiting there pointing at the actual cause.
Why does Claude keep making code blocks instead of artifacts?: Claude uses the artifact panel for self-contained outputs. Partial snippets, files with external imports, and very short code fall back to code blocks. Ask explicitly for 'a single self-contained HTML file' or paste the code block back and ask Claude to render it as an artifact.
Why does the artifact work for me but not the person I shared it with?: The most common reason is that the artifact is AI-powered — it calls Claude's API at runtime and requires the viewer to be signed in. Standard HTML artifacts should load for anyone with the share link. If your static artifact is showing blank for a recipient, ask them to try incognito — if it works there, it's a browser extension on their end.
Do Claude artifacts work on mobile?: The Claude mobile app does not currently render artifacts — the panel does not appear on iOS or Android. Mobile web (Safari/Chrome on phone) shows artifacts with some restrictions. To review an artifact on mobile, publish it as a shared link or export the HTML and open it in a browser tab.
My artifact loaded yesterday but is blank today. What changed?: Browser updates, extension rule changes, and stale cached resources are the usual culprits. Start with a hard refresh (Cmd+Shift+R on Mac, Ctrl+Shift+R on Windows). If that does not work, clear site data for claude.ai in DevTools (F12 → Application → Clear Site Data) and reload.
How do I share a Claude artifact so anyone can view it without a Claude account?: For static HTML artifacts, the Publish button inside Claude generates a public URL that anyone can open in any browser — no account required. AI-powered artifacts are the exception: they require an active Claude session to run. If you want full control over hosting and the ability to collect feedback, export the HTML and host it on a static host or a collaborative canvas tool.