You ask Claude to build a small React component as an artifact — a chart, a form, a card grid. The code looks reasonable, you click Preview, and the preview pane is just empty. White space. No spinner, no error banner, no red stack trace, nothing. You scroll the preview, you resize it, you click the refresh icon — still blank. Switching back to Code view shows the JSX intact. You ask Claude “why is it blank?” and Claude confidently rewrites the same component with a slight variation that also renders blank. This pattern is almost always a runtime error suppressed by the artifact sandbox — a prop type mismatch, an undefined import, a missing default export, or a hydration crash that the sandbox catches but never surfaces to the UI.
Common causes
Ordered by what we observe most often in real artifact debugging.
1. Component expects a prop that the artifact harness does not pass
Claude writes export default function Card({ title, items }) { ... } then calls it as <Card /> with no props. items.map(...) throws on undefined. The sandbox catches the error and silently renders nothing.
How to spot it: Open the Code view. Find every props.something.map, props.something.length, or destructured prop. If the parent invocation does not pass it, this is your error.
2. Default export missing or named export misnamed
The artifact harness imports the top-level default export. If Claude wrote export function Component() without default, the harness gets undefined and renders nothing. Same for typos: export defalut function.
How to spot it: Search the code for exactly export default. There should be exactly one. If there is export function and zero export default, this is it.
3. Import statement references a package the artifact runtime does not provide
Claude wrote import { LineChart } from 'recharts' but the artifact runtime in your account / region does not have recharts whitelisted. The import resolves to undefined, the component fails to construct, the sandbox renders nothing.
How to spot it: Look at all import lines. The artifact runtime allow-listed libraries are roughly: react, react-dom, lucide-react, recharts (sometimes), shadcn/ui components. Anything else is suspect.
4. JSX syntax error that the parser swallows
A stray < or > in prose JSX that Claude generated. The build step parses it, fails, and reports the failure as a build error that the preview pane sometimes does not display prominently.
How to spot it: Look for any JSX expression that is not wrapped in curly braces but contains < or >, e.g. <p>1 < 2</p> instead of <p>{'1 < 2'}</p>.
5. Hooks called conditionally or after an early return
React’s rules of hooks. If Claude wrote if (!data) return null; then later const [state, setState] = useState(...), the next render call sees a different hook count and throws. The throw is silent in the artifact runtime.
How to spot it: Trace the function body top to bottom. Every useState, useEffect, useMemo must run on every render path. If any are conditional, that is the bug.
6. Tailwind class name typo causes the component to render with zero dimensions
Claude wrote class="w-0 h-0 ..." or used a Tailwind utility that does not exist (e.g. text-9.5xl), and the resulting box collapses to zero. The component is technically rendered but invisible.
How to spot it: Open browser DevTools on the preview iframe (right-click → Inspect Element). If the DOM has your component but with width: 0 / height: 0, you found it.
Before you start
- Take a screenshot of the empty preview pane plus the Code tab open side by side.
- Note whether the artifact ever rendered correctly even once in this conversation — if yes, Claude regressed it on a later turn.
- Identify whether you are on the web Claude or a desktop wrapper. Desktop wrappers sometimes have stricter sandbox CSP than web.
Information to collect
- The exact artifact code (copy-paste from the Code tab).
- The Claude model in use (Sonnet 4.6, Opus 4.7, etc.).
- Any error text that briefly flashed when you clicked Preview (often visible for < 1 second before disappearing).
- The list of imports at the top of the artifact.
- Your account plan — free tier artifacts sometimes have a smaller library allow-list.
- Browser DevTools console output (open before clicking Preview).
Step-by-step fix
Ordered by ROI. Cheapest checks first.
Step 1: Open DevTools console before previewing
The single most important step:
1. Right-click anywhere on the Claude page → Inspect.
2. Open the Console tab.
3. Click "Preserve log" so errors do not get cleared.
4. NOW click Preview on the artifact.The artifact iframe is sandboxed but it does emit errors to the parent console. You will see the real exception text — usually TypeError: Cannot read properties of undefined (reading 'map') or ReferenceError: SomePackage is not defined. That tells you exactly which fix to apply.
Step 2: Ask Claude to add a defensive wrapper
A one-line prompt that fixes most prop-related blanks:
The artifact preview is blank with no visible error. Wrap the
component in a try/catch error boundary and render the caught
error message visibly. Also add default values for every prop
that the component destructures.Claude will rewrite with const { title = 'Untitled', items = [] } = props and an ErrorBoundary that surfaces the error in the UI.
Step 3: Force a single default export
Tell Claude:
Refactor the component to have exactly one default export at the
bottom of the file: export default ComponentName. Remove any other
exports. Confirm the top-level invocation tag matches that name.This eliminates cause #2 in one shot.
Step 4: Replace exotic imports with allowed ones
If your imports include something past react / recharts / lucide-react / shadcn primitives, ask:
Rewrite the component using only these libraries: react, recharts,
lucide-react. If you need a UI primitive not in those, build it
inline with Tailwind.This eliminates cause #3.
Step 5: Use a known-good minimal template
Reset the artifact to a known-working starting point:
import React, { useState } from 'react';
export default function App() {
const [count, setCount] = useState(0);
return (
<div className="p-6">
<h1 className="text-2xl font-bold">Hello</h1>
<button onClick={() => setCount(count + 1)}>{count}</button>
</div>
);
}If this renders, the sandbox itself is fine and the issue is in Claude’s generated code. If even this is blank, the sandbox is broken — file a support ticket. See also Claude artifact renders blank.
Step 6: Inspect the rendered DOM for zero-dimension elements
If DevTools shows your component in the DOM but the preview is visually empty:
1. DevTools → Elements tab.
2. Find your top-level component div.
3. Check Computed → width / height.
4. If 0px, the parent container collapsed. Add an explicit
minHeight or remove the conflicting Tailwind class.This catches cause #6.
Verify
- After your fix, click Preview again with DevTools console open.
- Console should be free of red errors (warnings about keys are fine).
- The component should be visible with non-zero dimensions in the Elements panel.
- Interact with the component (click, type) — interactions should not throw further errors.
Long-term prevention
- Always default-prop everything Claude generates:
{ title = '', items = [] }. - Ask Claude to wrap every artifact in an ErrorBoundary that renders caught errors in the UI by default.
- Keep a “known-good minimal template” snippet to paste-and-iterate from, instead of starting from a complex spec.
- Pin your artifact dependencies in the prompt: “Use only react, recharts, lucide-react. No other libraries.”
- When asking Claude to iterate on an existing artifact, paste the current code back in — Claude regenerates from scratch otherwise and loses your context.
Common pitfalls
- Trusting that an “empty” preview means “no code yet” — usually it means “code threw, no surface”. Always check the console.
- Asking Claude “why is it blank” without giving it the console error — Claude has no visibility into the iframe console and will guess wrong.
- Iterating on a broken artifact 10 times. After 3 failures, reset to the minimal template and rebuild step by step.
- Assuming a working component on Sonnet will work identically on Opus — the libraries each model assumes available can differ subtly.
- Using
dangerouslySetInnerHTMLin artifacts — the sandbox sometimes strips it, the component appears blank.
FAQ
Q: The Console shows “ChunkLoadError” — what now?
The artifact runtime tried to lazy-load a chunk and failed (often network or CSP). Hard refresh the Claude page. If it persists, your imports include a library that triggers a dynamic import the sandbox blocks. Switch to a statically importable alternative.
Q: My artifact works in Claude but not when I copy the code to my own React project. Why?
The artifact runtime auto-injects React, sometimes Tailwind, and shims for shadcn primitives. Your own project needs those installed and configured. Run npm install react react-dom recharts lucide-react and set up Tailwind before pasting.
Q: Can I see the actual error text the artifact sandbox is catching?
Yes — via the DevTools console of the parent page (see Step 1). The sandbox swallows the visual error banner but the error does propagate to the parent window’s console.
Q: Why does the same prompt work for Claude but blank for me?
Likely a model or plan difference. Free-tier artifact runtimes have a tighter allow-list. Pro / Team artifacts can import more libraries. If a tutorial works for the author, check what plan they were on.