Artifacts: Documents, Code, and SVGs on Demand

What Artifacts Are

When Claude generates something that is meant to stand on its own — a document, a code file, an SVG diagram, an HTML page — it places it in an Artifact: a separate panel to the right of the conversation that renders the output as a finished piece rather than raw text in the chat.

Artifacts solve a real problem. Before they existed, Claude would output a long block of text or code into the chat window. You would have to copy it, paste it into another tool, and then figure out whether it looked right. With Artifacts, the rendered output appears immediately. You can see a document with proper formatting, a working piece of code, or a rendered SVG diagram without leaving Claude.ai.

Types of Artifacts

Claude generates four main types of Artifacts:

• Documents — Formatted text output: reports, memos, emails, essays, cover letters. Rendered with proper headings, bullet points, and spacing.
• Code — Any programming language. Syntax-highlighted and formatted. Can be downloaded directly.
• SVG graphics — Scalable vector diagrams rendered visually. Great for simple icons, logos, org charts, and flowcharts.
• React components — Interactive UI components that render and run in the Artifact panel. Allows you to see and interact with a working UI prototype.

Claude decides automatically when to use an Artifact versus inline text, based on the length and type of the content. You can also explicitly ask for an Artifact: "Write this as an Artifact document" or "Create this as a downloadable code file."

Iterating on Artifacts

The key advantage of Artifacts is that you can iterate on them in the same conversation. After Claude generates an Artifact, you can:

• Ask for revisions — "Make the tone more conversational" or "Add a section on X" — Claude updates the same Artifact
• Request changes to specific sections — "Change only the second paragraph to focus on cost savings"
• Switch formats — "Turn this document into bullet points" or "Convert this Python code to JavaScript"

Each revision updates the Artifact in place — you're always looking at the current version, and you can compare it to the chat history to see what changed.

Practical Uses for Artifacts

The best use cases for each Artifact type:

• Documents — First drafts of reports, emails, proposals, and any writing that needs to be clean and formatted from the start
• Code — Scripts, functions, templates, configuration files — anything you plan to copy into a code editor or use directly
• SVG — Simple icons, flowcharts, organizational diagrams, and visual representations that would be tedious to create manually
• React components — Rapid UI prototyping, building interactive forms or calculators, and presenting design concepts for review

Downloading and Sharing

Every Artifact has a download button. Documents download as text files. Code downloads as the appropriate file type (.py, .js, .html, etc.). SVGs download as .svg files you can open in any vector editor. React components download as .jsx files.

Artifacts are also shareable: click the share button on any Artifact to get a public link that anyone can view without a Claude account. This is useful for quickly sharing a draft document or code sample with someone who doesn't use Claude.

Try This Now

Ask Claude to create an Artifact for each of the following — one at a time — and practice iterating on each before moving to the next:

• A one-page project brief for a hypothetical app you want to build
• A simple Python function that sorts a list of names alphabetically
• An SVG flowchart showing the steps to make a cup of coffee

For each one, make at least two revision requests after the first generation. Pay attention to how Claude updates the Artifact in response to your specific instructions.