Tools

Artifacts

A side-panel canvas where Claude builds interactive things you can see, use, iterate on, and share. Not a description of what it could build. The actual thing, running in your browser.

When you ask Claude for something substantial (a web page, a chart, a document, a diagram, a small application), it can render the output in a dedicated panel next to the chat rather than dumping it as text. You can interact with it, request changes, flip between versions, and publish it with a shareable link. This is what Artifacts are.

Six types of artifact

Click between the tabs to see what each type looks like and when to use it.

The artifact gallery

HTML artifacts. Complete web pages with CSS and JavaScript. Animations, forms, user input, complex layouts. The most flexible type. Best for: landing page prototypes, calculators, interactive tools, anything you would otherwise need a developer for.

Example

"Build me a simple expense tracker. Two columns: category and amount. A running total at the bottom. A button to add a row and a button to export as CSV."

React components. JSX-based interactive UIs with state management, styled with Tailwind CSS. Best for: dashboards, interactive data displays, multi-step forms, anything with complex interactivity that benefits from component structure.

Example

"Build a dashboard showing our quarterly metrics. Three cards at the top (revenue, costs, margin), a chart below, and a date range picker that filters everything."

SVG graphics. Precise vector illustrations, icons, diagrams, technical drawings. Resolution-independent, crisp at any size. Best for: diagrams you want to use in a presentation, custom icons, architecture visuals, anything where pixel precision matters.

Example

"Draw a network diagram showing our three services, the database, and the message queue between them. Use a clean line style with rounded corners."

Mermaid diagrams. Flowcharts, sequence diagrams, Gantt charts, entity-relationship diagrams, generated from a simple text syntax and rendered visually. Best for: process flows, system architecture, project timelines, database schemas.

Example

"Draw a flowchart of our customer onboarding process. Start with 'Sign contract', end with 'First QBR'. Include the decision point where we check if they need custom integration."

Markdown documents. Standalone written content: reports, proposals, documentation, policies. Renders with proper headings, lists, and formatting. Best for: any long-form document you want to iterate on as a discrete deliverable rather than as chat text.

Example

"Draft a one-page project brief for the CRM migration. Use the structure from our template: background, objectives, scope, timeline, risks."

PDF artifacts. Formal documents, certificates, print-ready materials. Rendered in the UI and downloadable as a real PDF file. Best for: anything that needs to look professional on paper: proposals, certificates, formal reports.

Example

"Create a certificate of completion for our training programme. Include: participant name (leave as a placeholder), date, programme title, and a professional layout with our company colours."

How to iterate

The real power of artifacts is not the first version. It is the conversation you have with Claude about the first version. "Make the header sticky." "Change the colour of the chart to match our brand." "Add a download button." "The table should sort when I click a column header." Each request updates the artifact in place, and you can flip between versions using the version selector at the top of the panel.

Asking for a chart in text vs as an artifact

YouCan you make me a bar chart showing Q1 through Q4 revenue?

What you get

A text description of what the chart would look like ("Q1 would be the tallest bar at..."), or a block of code you would need to copy into a code editor, run, and debug. Neither is immediately useful.

YouCreate an SVG bar chart showing quarterly revenue: Q1 £3.2m, Q2 £3.8m, Q3 £3.1m, Q4 £4.1m. Use a clean style with rounded bars. Label each bar with the value. Highlight Q4 in a different colour because it is the recovery quarter.

What you get

A rendered bar chart in the artifact panel. Four bars, labelled, Q4 highlighted. You can ask Claude to tweak colours, add a trend line, change the font, or convert it to a React component with hover tooltips. Each change updates the artifact live.

Publishing and sharing

Any artifact can be published with a shareable link. Click the "Publish" button on the artifact panel and anyone with the link can access it. Logged-in Claude users can create their own copy to modify. You can unpublish at any time to revoke access.

This means you can build a small interactive tool (a calculator, a dashboard, a form), publish it, and share it with your team without writing a line of code outside Claude, without deploying anything, and without asking engineering for help. The tool lives at a Claude URL and works as long as it is published.

What you can build

Four categories that cover most of what people actually use artifacts for.

Prototypes

Landing page mockups, onboarding flows, feature demos. Show stakeholders a working version in minutes instead of describing it in a doc.

Product managers, designers, marketers

Dashboards and tools

Expense trackers, budget calculators, project status boards, invoice generators. Custom to your workflow, not a generic template.

Finance, operations, anyone with a spreadsheet they hate

Visualisations

Charts, diagrams, flowcharts, architecture maps. Interactive where helpful, static where clean. Export as SVG for presentations.

Anyone preparing a deck or a document

Documents

Policies, proposals, certificates, training materials. Iterated as a discrete deliverable, versioned, downloadable as PDF.

HR, legal, leadership, anyone who writes formal documents

Limitations to know about

What artifacts cannot do

No backend. Artifacts run in a sandboxed browser environment. No server-side code, no database connections, no Node.js.
No external APIs. The sandbox blocks requests to external services. Data-driven components need their data pasted or pre-loaded, not fetched live.
No images. Artifacts cannot display raster images (photos, screenshots). SVG graphics work. This limits visual richness for some use cases.
No audio or video. Cannot create or play media content.
No hosting. Artifacts are previews inside Claude. You can publish them at a Claude URL, but you cannot deploy them to your own domain without copying the code to a real hosting environment.
No direct code editing. You cannot type into the artifact's code directly. You describe changes and Claude regenerates. For quick one-line fixes, this can feel slow.

Try it now

Build me a simple [TOOL TYPE] that does [WHAT IT DOES]. I want [SPECIFIC FEATURES: columns, buttons, interactions]. Use a clean, modern style. Light background, readable font. Include [ANY SPECIFIC DETAIL: company colours, export button, mobile-friendly]. Start simple. We will iterate from here.

Replace the brackets with your real inputs, paste into Claude, and see what appears in the artifact panel.

Artifacts turn Claude from a writing tool into a building tool. The things most people ask designers or developers for (a quick prototype, a calculator, a diagram, a formatted document) are now a conversation away.

Next: Connectors let Claude read your real data from Slack, Drive, GitHub, and more. Or go back to the Tools hub.