Troubleshooting
Claude artifacts not working?
Most broken artifacts come down to a handful of causes: truncated generation, sandbox restrictions, or assets that only exist outside the file. Match your symptom below and jump straight to the fix.
Fix 1
Blank or white screen
The most common cause is a truncated generation — Claude hit its output limit mid-file, leaving unclosed tags or a half-written script that stops the browser from rendering anything. Ask Claude to continue or regenerate the artifact, and for long pages ask it to keep scripts short or split sections.
Broken — cut off mid-file
<div id="app">
<h1>Quarterly report</h1>
<script>
renderCharts( ← generation cut off mid-functionFixed — complete and closed
<div id="app"> <h1>Quarterly report</h1> </div> <script> renderCharts(); ← complete, tags closed </script>
Quick test: paste the artifact’s HTML into the free HTML viewer. Blank there too? The code is incomplete — it’s not Claude’s preview acting up.
Fix 2
CSS or images missing
An artifact is a single file — there is no ./styles.css or images/ folder sitting next to it. Relative paths point at files that don’t exist, so styles vanish and images break. Inline the CSS, and use absolute URLs, data URIs, or inline SVG for images.
Broken — relative paths
<link rel="stylesheet" href="./styles.css"> <img src="images/chart.png">
Fixed — self-contained
<style>/* styles inlined in the same file */</style> <img src="https://example.com/chart.png"> <!-- or a data: URI, or an inline SVG -->
Tell Claude directly: “make this a single self-contained HTML file — inline all CSS, no external files.” It will rebuild the artifact that way.
Fix 3
JavaScript not running
If the layout renders but nothing interactive works, open your browser’s console — the first red error usually names the culprit. The classics: a library referenced but never loaded, a script truncated mid-function, or an API the artifact sandbox doesn’t allow.
Console check
// Open DevTools (F12) → Console. Typical artifact errors: // "ReferenceError: React is not defined" → missing CDN <script> tag // "Uncaught SyntaxError: Unexpected end" → truncated generation // "localStorage is not available" → blocked in the artifact sandbox
Paste the exact error back into Claude — it fixes its own errors well when it can see them. If the error mentions a blocked browser feature, that’s a sandbox limit, not broken code: the same page often works fine once published as a normal hosted page.
Fix 4
External data won’t load (CORS)
Artifacts run in a deliberately strict sandbox — that’s a safety feature, and it means many requests to outside APIs and resources are blocked inside Claude’s preview. A fetch that fails in the artifact window isn’t necessarily wrong.
Two honest workarounds: inline the data — paste the numbers into the chat and let Claude bake them into the HTML (best for reports and dashboards) — or publish the page, where fetch follows normal browser rules and only the target API’s own CORS policy applies.
Fix 5
Broken on mobile
Looks great on your laptop, unreadable on the client’s phone — usually a missing viewport meta tag, fixed pixel widths, or overflow from a wide table or chart. Most recipients open links on mobile first, so this one is worth the two-minute fix.
Ask Claude to “make this responsive — mobile-first, no fixed widths” and check the result in a narrow browser window before sending.
The one tag to check first
<meta name="viewport"
content="width=device-width, initial-scale=1"> Without it, phones render the page at desktop width and shrink it to fit.
Fix 6
Shared artifact link won’t open
If someone says your artifact link doesn’t work for them, the artifact itself is probably fine — the sharing route is the weak point. Native links depend on how the artifact was published, and they can stop working if the source chat or published page changes.
For anything going to a client, publish a stable hosted link instead: it opens in any browser, needs no Claude account, and you can update the page without the URL ever changing. Share artifacts without a login →
The reliable fix
Preview it, then publish a version that won’t break
Once the artifact works, take it out of the fragile zone: verify it renders in the HTML viewer, then publish it as a stable, tracked link. The page is noindex by default, password-protectable, and you can republish fixes without the link ever changing — so it doesn’t break again next week.
How to publish a Claude artifact (3 ways) →Troubleshooting FAQ
Why is my Claude artifact blank? +
Usually one of three things: the generation was cut off mid-file (ask Claude to continue or regenerate), an unclosed tag is swallowing the rest of the page, or a JavaScript error stopped rendering before anything was drawn. Paste the HTML into a standalone viewer — if it’s blank there too, the code itself is incomplete.
Why won’t my artifact load external data or APIs? +
Artifacts run in a strict sandbox, so many external requests are blocked inside Claude. Either inline the data into the HTML, or publish the page to a real host — on a published page, fetch follows normal browser rules and the API’s own CORS policy.
Why does my shared artifact link not open for someone else? +
Native artifact links depend on how (and whether) the artifact was published, and they can break if the source chat or published page changes. For anything you send to a client, publish a stable hosted link instead — it opens in any browser, with no Claude account needed.
How do I test the HTML outside Claude? +
Copy the artifact’s code and paste it into a standalone HTML viewer. Rendering it outside Claude’s sandbox is the fastest way to tell a code problem from a sandbox restriction.
Got it working? Make it stay working.
Preview the HTML, then publish a stable, tracked link — free to start, no credit card.