Feature Guide
Build Apps, Charts, and Reports Inside Claude
Rendered outputs you can see, interact with, and share
Artifacts are Claude's way of creating standalone outputs alongside a conversation — React apps, HTML pages, charts, reports, and code files that render live in a sidebar panel. Instead of generating text and hoping it works, you see the result immediately and can ask Claude to refine it.
The Basics
What makes Artifacts different
When Claude creates an artifact, it appears in a panel next to the conversation — rendered and interactive. A React calculator actually calculates. An HTML page actually looks like a web page. A chart actually shows the data. You don't need to copy code into a separate environment to see if it works.
The artifact persists across the conversation. You can say "make the header blue", "add a reset button", or "change the chart to a pie chart" and Claude updates the artifact in place. This back-and-forth loop collapses what used to be a 30-minute design-build-test cycle into a 3-minute conversation.
Claude.ai lets you share any artifact with a public link. This turns Artifacts into a lightweight deployment tool for prototypes, mockups, demos, and internal tools. Share the link in Slack; your stakeholder can interact with the artifact without signing up.
Types
Six kinds of Artifacts Claude can create
Claude builds fully interactive React apps — forms, dashboards, calculators, games — that render live in the sidebar. You can see the UI, interact with it, and ask Claude to iterate.
"Build a mortgage calculator with amortization schedule"
Full HTML/CSS/JS web pages that render in the browser. Useful for landing page mockups, email templates, and interactive demos that don't need React.
"Create an HTML landing page for my SaaS product"
Markdown documents, research reports, and structured writing that can be exported, shared, or used directly. Claude keeps it separate from the conversation thread.
"Write a competitive analysis report in Markdown"
Charts, graphs, and dashboards built with libraries like Recharts or Chart.js. Paste in a CSV and Claude builds the visualization interactively.
"Visualize this sales data as an interactive bar chart"
Claude can generate SVG diagrams, flowcharts, logos, and illustrations. Useful for architecture diagrams, UI mockups, and simple graphics without Figma.
"Draw a system architecture diagram as SVG"
Python scripts, SQL queries, shell scripts, JSON configs — Claude creates these as artifacts so they stay formatted, syntaxhighlighted, and easy to copy or download.
"Write a Python script to batch rename files"
Pro Tips
How to get the most from Artifacts
"Change the chart colors to match our brand" or "add a dark mode toggle" — Claude updates the existing artifact in place. You don't need to regenerate from scratch. This iterative loop is where Artifacts shine.
Use the conversation to explain your requirements and the artifact to hold the output. "I want a quiz app. Make it 5 questions, multiple choice, and show the score at the end." Claude builds the app as an artifact; you test it in the sidebar.
Claude.ai lets you share artifacts with a public link. This makes Artifacts useful for quick prototypes, mockups, and demos — send the link to a stakeholder without needing to deploy anything.
If you want a polished output that will leave the conversation — a report, a component, a script — ask for an artifact explicitly. If you just want a quick answer or snippet, the conversation thread is fine.
Practice with real Claude exercises
Free interactive lessons — including Artifact workflows.