What Artifacts Are
Artifacts are Claude's way of separating the conversation from the deliverable. When Claude generates a piece of code, a formatted document, or an HTML page, that output appears in a dedicated right-hand panel — the Artifact panel — rather than embedded in the chat text.
This solves a practical problem: long code blocks and structured documents are hard to read inside a chat stream. The Artifact panel gives them a dedicated space where you can view, edit, copy, and preview them cleanly.
The chat stays focused on discussion. The Artifact panel holds the output. Both update in sync as the conversation continues.
What Triggers an Artifact
Claude opens the Artifact panel automatically for:
- Any code — Python, JavaScript, TypeScript, SQL, HTML, CSS, shell scripts
- React components — with live preview in the panel
- Complete HTML pages — with browser preview
- SVG graphics — rendered visually
- Markdown documents — formatted reports, READMEs, documentation
- Structured data — tables, JSON, YAML configurations
- Long-form documents — essays, plans, outlines over a certain length
Short conversational replies, brief code snippets used as inline examples, and explanations stay in the chat.
How to Work With Artifacts Effectively
Viewing and Navigating
The Artifact panel opens on the right. For long code files, use the scroll bar inside the panel. The panel is resizable — drag the divider between chat and panel to adjust how much screen space each gets.
Editing Directly
Click inside the Artifact panel to place your cursor. You can type, delete, and edit directly. This is good for:
- Fixing typos in generated documents
- Changing variable names
- Adjusting formatting
- Adding comments to code
For structural changes, it is usually better to describe the change in chat and let Claude regenerate.
Using the Preview Tab
For React and HTML artifacts, click the Preview tab at the top of the panel. This renders the code and shows the visual output. Toggle between Code and Preview to inspect and interact with the result. This is one of Claude's most powerful features for rapid UI prototyping — you can see a component rendered without leaving Claude.
Iterating on Artifacts
Reference the artifact directly in your follow-up messages:
- "Add error handling to the function in the artifact"
- "Change the heading color in the HTML to dark blue"
- "Add a loading state to the React component"
Claude updates the artifact in place — you see the new version in the panel without scrolling back through the chat to find the original.
Copying and Using the Output
Click the copy icon (top-right of the Artifact panel) to copy the entire content. Paste it into:
- Your code editor (VS Code, Cursor, JetBrains)
- A document editor (Notion, Google Docs, Word)
- A file on your computer
- GitHub or a code-sharing tool
Practical Workflows Using Artifacts
Rapid prototyping: "Build a React login form with email, password, a submit button, and basic validation. Show me a preview." → Claude creates the component in an Artifact. Click Preview to see it rendered. Ask for changes. Iterate without leaving the chat.
Document drafting: "Write a project proposal document for a mobile app redesign. Use professional formatting with sections for Overview, Scope, Timeline, and Budget." → Claude writes a formatted markdown document in the Artifact. Edit sections directly or ask Claude to adjust specific parts.
Code generation and review: "Write a Python function that parses a CSV file and returns a list of dicts." → Claude writes the function in an Artifact. Ask follow-up: "Add type hints and error handling." The artifact updates.
SQL queries: "Write a SQL query that joins the orders and customers tables and returns total spend per customer for the last 30 days." → Claude writes the query in an Artifact. Copy directly into your database client.
Common Mistakes to Avoid
- Re-asking from scratch when you want a small change — Reference the artifact in your message: "In the artifact, change X to Y." Claude updates it rather than starting over.
- Not using Preview for visual content — If Claude generates a React component or HTML and you want to check it, click Preview before copying. Saves time debugging rendering issues in your own environment.
- Ignoring the direct edit option — For tiny fixes (a typo, a renamed variable), just click and edit in the panel. You do not need to ask Claude every time.
- Expecting server-side code to run in Preview — Preview only works for browser-side code (React, HTML, JavaScript). Python, Go, and other backend languages need to be copied and run locally.
- Scrolling through chat to find old artifacts — Artifacts from earlier in the conversation are accessible by scrolling up in the chat and clicking on the artifact reference. You do not have to re-ask Claude to regenerate them.