Claude ChatLesson 5

Artifacts

When Claude writes something long — a script, document, HTML page, or React component — it can open it in a side panel called an Artifact. Preview it, edit it, and export from the Artifact panel.

What are Artifacts?

When Claude generates something substantial — more than a short reply — it can place it in an Artifact instead of burying it in the chat thread. The Artifact opens in a panel beside your conversation, where you can switch between a live Preview and the raw Code.

This keeps your chat readable while giving the generated content its own space to grow, update, and be exported.

claude.ai
Chat
Build a simple landing page with a heading and a signup button.
C
I've created a landing page as an Artifact — preview it in the panel on the right.
📄landing-page.htmlHTML
PreviewCode
Welcome to My Product
The simplest way to get started. Sign up free today.
Sign up free
📋Copy
⬇️Download
✏️Edit
Artifacts appear in a side panel — chat on the left, live preview or code on the right

Types of Artifacts

Claude creates different Artifact types depending on what you ask for:

💻
Code

Python, JavaScript, SQL, and other languages — syntax-highlighted and ready to copy.

e.g. A Python script to parse a CSV file

📝
Documents

Long-form text like reports, essays, emails, or markdown documents kept separate from the chat.

e.g. A project proposal or meeting agenda

🌐
HTML

Web pages rendered live in the preview panel.

e.g. A landing page, form, or infographic layout

⚛️
React components

React UI components — buttons, charts, and dashboards — rendered in the preview panel.

e.g. A todo list app or data visualisation widget

When do Artifacts appear? Claude automatically creates an Artifact when the output is long or self-contained — a full script, a complete document, a web page, or an interactive component. Short code snippets may stay inline in the chat instead.

Creating Artifacts

You do not need a special command. Ask Claude to build something substantial and it will open an Artifact when appropriate.

Example prompts that create Artifacts

TypeExample prompt
HTML"Build a simple portfolio landing page with a hero section and contact form."
React"Create an interactive quiz component with 3 multiple-choice questions."
Code"Write a Python script that reads a CSV and prints the top 5 rows by revenue."
Document"Draft a one-page project brief for a mobile app redesign."

Editing and iterating on Artifacts

Artifacts are not one-shot outputs. You refine them through conversation — each follow-up message updates the same Artifact in place rather than creating a new one.

1

Claude creates the initial Artifact based on your prompt.

2

Review the Preview or Code tab in the Artifact panel.

3

Send a follow-up in chat — "add a dark mode", "fix the button colour", "make it shorter".

4

Claude updates the Artifact. The panel refreshes with the new version.

5

Repeat until you are satisfied, then copy or download the final result.

Iterating on an Artifact — each message updates the same panel
You
Create a React counter component with + and − buttons.
Claude
Artifact created: counter.jsx — preview in panel.
You
Make the buttons larger and add a reset button.
Claude
Updated the Artifact — changes are reflected in the preview.
Example — refining a React component across multiple messages without starting over

Downloading or copying Artifact content

When your Artifact is ready, export it using the action buttons at the top of the Artifact panel.

📋
Copy

Copies the full Artifact content to your clipboard. Paste it into VS Code, a document, or any editor. Best for quick use without saving a file.

⬇️
Download

Saves the Artifact as a file — .html, .py, .jsx, or .md depending on the type.

generate_report.py
📋 Copy
⬇️ Download
import csv

def summarize_sales(filepath):
    total = 0
    with open(filepath) as f:
        for row in csv.DictReader(f):
            total += float(row["amount"])
    return total
Use Copy to paste into your editor, or Download to save the file directly
Workflow tip: Build and iterate inside Claude, then download the final version and drop it into your project. For HTML and React Artifacts, open the downloaded file in a browser or your dev environment to test it locally.
Summary:
  • Artifacts are code, documents, HTML, and React components rendered in a side panel.
  • Ask Claude to build something substantial — it creates an Artifact automatically.
  • Refine through conversation; each follow-up updates the same Artifact in place.
  • Use Copy for the clipboard or Download to save as a file.

What's Next

Projects — group chats, keep files and instructions in one place, and share work with a team.