Claude ChatLesson 5 of 12

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, edit, and export from that 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.

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.

CopyDownloadEdit

Chat on the left; preview or code on the right

Types of Artifacts

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

Type	What it is	Example
Code	Python, JavaScript, SQL, and other languages — syntax-highlighted and ready to copy.	A Python script to parse a CSV file
Documents	Long-form text like reports, essays, emails, or markdown kept separate from the chat.	A project proposal or meeting agenda
HTML	Web pages rendered live in the preview panel.	A landing page, form, or layout
React components	UI components rendered in the preview panel.	A todo list or simple dashboard widget

Claude usually creates an Artifact when the output is long or self-contained — a full script, document, web page, or interactive component. Short snippets may stay inline in the chat.

Creating Artifacts

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

Type	Example 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

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

Claude creates the initial Artifact based on your prompt.
Review the Preview or Code tab in the Artifact panel.
Send a follow-up in chat — “add a dark mode”, “fix the button colour”, “make it shorter”.
Claude updates the Artifact. The panel refreshes with the new version.
Repeat until you are satisfied, then copy or download the final result.

Each follow-up updates the same Artifact 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 appear in the preview.

Refining a component across several messages

Downloading or copying

When your Artifact is ready, use the action buttons at the top of the Artifact panel.

Action	When to use it
Copy	Copies the full content to your clipboard. Paste into an editor or document.
Download	Saves as a file — `.html`, `.py`, `.jsx`, or `.md` depending on type.

generate_report.py

CopyDownload

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

Copy to clipboard or download as a file

Build and iterate inside Claude, then download the final version for your project. For HTML and React Artifacts, open the file locally to test it.

Before you continue

Artifacts hold code, documents, HTML, and React components in a side panel.
Ask Claude to build something substantial — it creates an Artifact when needed.
Follow-up messages update the same Artifact in place.
Use Copy or Download when the result is ready.
Next lesson: Projects — group chats and shared context.

What's Next

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

← PREVIOUS

Web Search

Projects