Claude Artifact Renders Blank or Wrong? Every Cause and Its Fix

A Claude artifact renders blank or wrong when the exported copy cannot do something it did inside Claude: run React component code, draw its charts in time, reach data that lives on claude.ai, or show the same width, theme and tab you were looking at. The quickest test is to open the artifact's .html file in your own browser. Blank there too? The file is the problem, and the fix is a request to Claude. Fine there but wrong in the render? It is a timing, width or theme difference, and the fixes are below.

Which symptom do you have?

Why do I see code, or a notice about React, instead of the page?

Because what you copied is a React component, not a web page. Many chat artifacts are written as React code that starts with import lines. Claude's viewer supplies everything that code needs to run; a browser opening it on its own cannot. Paste it into the Claude Artifact to PNG tool and it recognises component code and shows a ready-made prompt instead of rendering it. Send this to the same chat:

Turn this artifact into a single standalone HTML file that opens directly in a browser. Load React and any libraries from cdnjs, inline everything else, and give me the whole file.

Then paste the HTML Claude gives you. The same prompt works for React previews in ChatGPT code blocks.

Why is the page completely white?

Usually a script failed, so nothing was drawn. Claude artifacts load libraries such as React, Chart.js or D3 from a few public CDNs (cdnjs, unpkg, jsDelivr, and the Tailwind and jQuery CDNs), and those load fine in browsers and renderers alike. Trouble starts when the HTML points to something that is not in the file: a separate style.css or app.js, a library on a host that is down, or code written for a developer build tool. Pages built across several files, which coding tools sometimes produce, break this way.

Give me this page as one standalone HTML file: all CSS and JavaScript inline, libraries loaded from cdnjs, images embedded.

If the page genuinely needs several files, put them in one folder, zip it, and drop the .zip instead. And check what you pasted: copying the artifact's visible text rather than its code gives a renderer nothing to draw.

Why are the charts or sections empty?

Because they had not finished drawing when the capture was taken. Chart libraries draw after the page loads, often with an animation that grows each bar or line over a second or so, and React pages build their content a moment after opening. Renda waits for charts and React to finish before capturing, but a slow animation or a page that loads in stages can still be caught halfway.

The free fix is to remove the wait: ask Claude to "turn off all chart animations in this artifact" and export again. In Chart.js that is a one-line setting, and the finished chart appears at once. On Pro or with a Render Pack you can instead type "wait longer" in the chat under the result, and the render updates. For a browser capture, wait a few seconds after the page opens before capturing.

Why are the live numbers missing?

Because the data never lived in the file. Some artifacts fetch their numbers each time they open. Claude Code pages can pull live data through MCP connectors, which claude.ai calls on each viewer's behalf, and other pages request data from an outside service. A copy outside claude.ai has no connection to those sources, and renderers usually block a page's own data requests to other sites for safety (the artifact tool does), so those sections stay empty. The guide to downloading a Claude Code artifact covers this for connector pages. Ask Claude to freeze the data:

Replace every live data call in this artifact with the current data written into the page as fixed values, so it renders without any connection.

The export is then a snapshot of that moment, which is usually what you want in a report or a post anyway.

Why did the colours flip to dark, or to light?

Because the page follows your device's theme. Many artifacts include a light and a dark version and pick one from your system setting. If your computer is in dark mode, Claude shows you the dark version, while a renderer or a colleague's browser in light mode shows the other one. Decide which you want and make it the only one:

Use only the light theme in this artifact. Remove the dark mode, so it looks the same on every device.

Swap light for dark if the dark version is the one you liked. On Pro or with a Render Pack, typing "keep it light" in the result chat also works, without touching the HTML.

Why does only the first tab, slide or filter show?

Because a capture shows the page as it first loads. Clicking a tab, moving a slider or picking a filter changes the page in your browser only; none of it is saved in the HTML, so every capture starts from the default view. Ask Claude for an export version with everything visible:

Make a static version of this artifact for export: show every tab's content one after another, expand all collapsed sections, and remove buttons, sliders and filters.

For a slide-style artifact, ask for every slide stacked down the page, or one file per slide. Printing from your own browser is the exception: print takes the page as it is on screen, so you can click to the view you want first.

Why is the edge or the bottom cut off?

There are three causes. A page with no width of its own is captured 1280 pixels wide, so a wide table or a long row of cards can run past the right edge; ask Claude to "make the page 1440 pixels wide and keep everything inside it". A section with its own scroll bar shows only the part visible in its box, in any capture; ask Claude to "let every section grow to its full height, with no inner scroll bars".

And full-page captures stop at 8192 pixels tall, with a note on the result, while pages over 4096 pixels tall drop from 2x to 1x and look a little softer. For a very long report, ask Claude for it in two parts, or print it to PDF across several pages, as the artifact to PDF guide explains.

Why are images missing or the font wrong?

Inside Claude, images are usually embedded in the file itself, because Claude's viewer blocks every outside image, so they survive any export. Gaps appear when the HTML points to a file on your computer or a relative path such as images/logo.png, which no other machine can see. Ask Claude to embed the image in the page, or to link it from an https address, which the artifact tool loads.

Fonts follow the same logic. Google Fonts and fonts embedded in the file come through; a font loaded from any other host falls back to a system font, which changes spacing and line breaks. Ask Claude to use a Google Fonts typeface, or to embed the font in the file.

Frequently asked questions