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 and instructions. 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, and more
- React components — with a live Preview tab that renders the component
- Complete HTML pages — with browser preview showing the rendered page
- SVG graphics — rendered as visual output, not just markup text
- Markdown documents — formatted reports, READMEs, technical documentation
- Structured data — tables, JSON configs, YAML files
- Long-form documents — essays, plans, outlines that exceed a certain length threshold
Short conversational replies, brief code snippets used as inline examples, and single-paragraph explanations stay in the chat.
Step-by-Step: How to Work With Artifacts
Step 1: Trigger an Artifact
Ask Claude for any code, document, or structured content. The Artifact panel opens on the right side of the screen automatically. If it does not appear, you can explicitly request it:
- "Write a Python function to parse CSV files and put it in an artifact."
- "Create an HTML landing page for a SaaS product."
- "Build a React component for a navigation menu with dropdown support."
Step 2: Review the Output in the Panel
The Artifact panel displays your output with syntax highlighting for code. For long outputs, use the scroll bar inside the panel. The panel is resizable — drag the divider between the chat and panel to adjust how much screen space each gets.
Step 3: Use the Preview Tab for Visual Content
For React and HTML artifacts, a Preview tab appears at the top of the panel. Click it to render the code and see the visual output. Toggle between Code and Preview to inspect markup and see the rendered result side by side. This is one of Claude's most powerful features for rapid UI prototyping — you see a rendered component without leaving Claude.ai.
Step 4: Edit Directly for Small Changes
Click inside the Artifact panel to place your cursor. You can type, delete, and edit directly. Good uses for direct editing:
- Fix typos in generated documents
- Rename a variable throughout the code
- Adjust heading levels or formatting
- Add a comment to a code block
For structural changes — new sections, refactored logic, different architecture — describe the change in chat and let Claude update the artifact.
Step 5: Iterate Through Chat
Reference the artifact in follow-up messages to refine it:
- "Add error handling to the function in the artifact."
- "Change the button color in the HTML preview to dark blue."
- "Add a loading spinner to the React component."
- "Extend the SQL query to also return the count of orders per customer."
Claude updates the artifact in place — the panel shows the new version without you scrolling back through chat to find the previous one.
Step 6: Copy and Use the Output
Click the copy icon in the top-right corner of the Artifact panel to copy the entire content. Paste it into:
- Your code editor (VS Code, Cursor, JetBrains IDEs)
- A document tool (Notion, Google Docs, Confluence)
- A new file in your project
- GitHub or a code-sharing platform like a Gist
Why This Happens: The Design Logic Behind Artifacts
Claude uses the Artifact panel when it detects that the output is a standalone deliverable — something you will use or run outside the conversation, not just read in context. The threshold is roughly: if it makes more sense to view the output in isolation than embedded in a chat reply, it becomes an artifact.
This is why a one-line code example stays in chat (you read it in context) but a complete function or component opens in the panel (you need to copy and run it). If Claude misjudges, you can always ask it to move content to or from the panel.
Practical Workflows Using Artifacts
Rapid UI prototyping: "Build a React login form with email, password, a submit button, and basic input validation. Show me a preview." Claude creates the component in an Artifact. Click Preview to see it rendered. Ask for changes ("add a 'show password' toggle"). Iterate without leaving the chat.
Document drafting: "Write a project proposal for a mobile app redesign. Use professional formatting with sections for Overview, Scope, Timeline, and Budget Estimate." Claude writes a formatted markdown document in the Artifact. Edit sections directly or ask Claude to expand specific parts.
Code generation and review: "Write a Python function that reads a CSV file and returns a list of dictionaries, with error handling for missing files and malformed rows." Claude writes the function in an Artifact. Ask follow-up: "Add type hints and a docstring." The artifact updates cleanly.
SQL queries: "Write a SQL query that joins the orders and customers tables and returns total spend per customer for the last 30 days, sorted by spend descending." Claude writes the query in an Artifact. Copy directly into your database client or query tool.
Data transformation scripts: "Write a JavaScript function that takes an array of user objects and returns them grouped by their subscription tier." Claude writes the function in the Artifact. Preview it, then copy into your project.
Common Mistakes to Avoid
-
Re-asking from scratch for small changes — If you want a minor fix, reference the artifact in your message: "In the artifact, rename
getUserDatatofetchUser." Claude updates it rather than generating a new version from scratch, keeping the artifact history clean. -
Not using Preview for visual content — If Claude generates a React component or HTML page, click Preview before copying. You catch rendering bugs immediately rather than discovering them in your own environment after pasting.
-
Ignoring the direct edit option — For tiny fixes like a typo or renamed variable, click and edit directly in the panel. You do not need to ask Claude for every small change.
-
Expecting server-side code to run in Preview — Preview works for browser-side code only: React, HTML, plain JavaScript. Python, Go, Ruby, and other server-side languages do not execute in the panel. Copy them 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 marker. You do not need to ask Claude to regenerate them; the original is still there.
-
Starting a new chat when you want to continue an artifact — Stay in the same conversation to iterate on an artifact. Switching to a new chat means starting the artifact from scratch, losing all previous iterations.
Supported Artifact Types at a Glance
| Type | Preview available | Run in panel | |------|------------------|--------------| | React components | Yes | Yes (browser sandbox) | | HTML pages | Yes | Yes (browser sandbox) | | SVG graphics | Yes | Yes (rendered visually) | | JavaScript | Limited | Partial | | Python, SQL, shell | No | No — copy and run locally | | Markdown documents | Formatted view | N/A | | JSON / YAML | Syntax highlight | No |