Troubleshooting
Claude artifacts not working?
Match your symptom
Jump straight to the fix
Fix 1
Blank or white screen
<div id="app">
<h1>Quarterly report</h1>
<script>
renderCharts( ← generation cut off mid-function<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
<link rel="stylesheet" href="./styles.css">
<img src="images/chart.png"><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
// 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 sandboxPaste the exact error back into Claude, or use the “Try fixing with Claude” button near the error. 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, and it works on every host), or publish the page somewhere that allows outside requests, where only the target API’s own CORS policy applies. On Pagelive that means a Solo, Team, or custom-domain page: free pages published now may only connect back to their own address, so a visitor’s input can’t be sent elsewhere.
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.
<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. As of October 2026, the usual reason is the account: Anthropic says “Everyone needs a Claude account. People without one can’t open a shared artifact, even with the link.” The exception is a legacy artifact (made in a chat before September 16, 2026) published with Publish. Also check the Share menu: artifacts that connect to your apps or use Claude can’t use “Anyone with the link”, and on Team and Enterprise an owner may have turned external sharing off.
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 link. The page is noindex by default (password-protectable on Solo and Team), and you can republish fixes without the link ever changing, so it doesn’t break again next week.
Troubleshooting FAQ
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.
Artifacts run in a strict sandbox, so many external requests are blocked inside Claude. The reliable fix is to inline the data into the HTML. Published elsewhere, fetch follows the host’s rules and the API’s own CORS policy; on Pagelive, free pages published now may only connect back to their own address, while Solo, Team, and custom-domain pages can call outside APIs.
Most often, the viewer has no Claude account. As of October 2026, Anthropic says: “Everyone needs a Claude account. People without one can’t open a shared artifact, even with the link.” The only exception is a legacy artifact published from a chat. Also, artifacts that connect to your apps or use Claude can’t use “Anyone with the link”, and on Team and Enterprise an owner may have turned external sharing off. For a client, publish a hosted link instead: it opens in any browser, with no Claude account needed.
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.
More guides: Claude artifacts: what they are, how to share and publish them · how to use Claude artifacts · how to publish an artifact. Once it works: plans and pricing.