2-2-artifacts

--- title: "Artifacts: Claude's Canvas for Creating Interactive Content" description: "Claude can generate much more than text. With Artifacts you create HTML pages, charts, React components, diagrams and structured documents — directly in the chat." slug: "2-2-artifacts" enslug: "2-2-claude-artifacts" accesslevel: registered status: published visible: true featured: false priority: 22 date: 2026-04-22 updated: 2026-04-22 author: "Dario Santocanale" reading_time: "7 min" prerequisites: - Having completed the Projects tutorial tags: [claude, artifacts, canvas, html, react, visualization, advanced] ---

Most people use Claude only for text. But there's an entire world of visual and interactive outputs that very few explore. Artifacts are that feature.

---

What is an Artifact

When you ask Claude for something that produces "visual" or "structured" output, instead of dumping code in the chat, Claude opens a side panel — the Artifact — where the content is rendered in real time.

Types of Artifacts Claude can create:

• HTML/CSS/JS: complete web pages, UI components, landing page mockups
• SVG: vector graphics, icons, simple illustrations
• Mermaid: flowcharts, ER diagrams, sequence diagrams, Gantt charts
• React: interactive components with state
• Markdown: formatted documents (with preview)
• Code: any language, with syntax highlighting

---

How to activate and use Artifacts

Artifacts activate automatically when Claude generates the right type of content. There's no button to click — just ask in the right way.

Prompts that trigger Artifacts:

• "Create an HTML page with..."
• "Generate a bar chart with this data:..."
• "Draw me a flowchart of process X"
• "Build a React component that..."
• "Visualize this SVG:..."

Iteration in chat: Once an Artifact is created, you can keep modifying it with natural language messages:

• "Change the title color to blue"
• "Add a third item to the list"
• "Make the button bigger"

Claude updates the Artifact without rewriting everything from scratch.

---

Practical example: data dashboard

Imagine you have this sales data:

January: $45,000
February: $52,000
March: $48,000
April: $61,000
May: $58,000

Prompt:

Create a line chart in HTML+CSS with this monthly sales data. 
Dark style, neon green for the line, show values on data points.

Claude generates an HTML Artifact with the rendered chart. Then you can refine it:

• "Add a dashed line with the average"
• "Add hover tooltips with exact values"
• "Make the background fully transparent"

---

Diagrams with Mermaid

Mermaid is a text-based language for drawing diagrams. Claude is very good at generating them.

Flowchart:

Draw a flowchart of a new client onboarding process,
with these steps: contact request → discovery call →
proposal → contract → kickoff → delivery

ER diagram (database):

Generate an Entity-Relationship diagram for an e-commerce
with entities: User, Order, Product, Category, Address

Gantt for project:

Create a Gantt chart for a website launch
with these phases: brief (1 week), design (2 weeks),
development (3 weeks), testing (1 week), launch (3 days)

---

Interactive React components

This is the most powerful feature for web developers.

Example — form with validation:

Create a React component for a contact form with:
- Name, email, message fields
- Inline validation (empty field → red border)
- Character counter for message (max 500)
- Modern dark styling

Claude generates a working component you can preview in the panel and then copy into your project.

Example — calculator widget:

Build a React component to calculate ROI for an investment.
Input: initial cost, annual return %, years.
Output: final value and total gain, updated in real time.

---

How to export the content

From an Artifact you can:

1. Copy the code → "Copy" button in the Artifact header
2. Download as file → available for some types (HTML, SVG)
3. Open in new window → to view the full HTML page
4. Share → Claude.ai allows sharing conversations with Artifacts

---

When to use Artifacts vs plain text

Task	Better as Artifact	Better as text
Chart/data visualization	✅
HTML page/UI mockup	✅
Flowchart	✅
Long formatted document	✅ (Markdown)
Answer to a question		✅
Text summary		✅
Conceptual analysis		✅
To-do list		✅ (faster)

Practical rule: if the result needs to be "seen" or "used" rather than just read, Artifact is the right choice.

---

Artifact limitations

• Can't access external data (no fetch API to real URLs)
• Charts are pure HTML — doesn't natively use libraries like D3 or Chart.js (but can generate their code)
• For React, uses a limited sandbox — some libraries aren't available
• Doesn't automatically save Artifacts outside the conversation

---

Up next →2-3-memoria-contesto