Artifacts: stop copy-pasting code out of the chat

You asked Claude for a landing page draft. It gave you a thirty-line block of HTML buried inside the chat, which you then copied, pasted into a separate editor, and squinted at to see if the hero section actually looked right. A minute later you realised you wanted the button a different colour, so you scrolled back up the chat, asked Claude to modify the code, and repeated the whole copy-paste dance. This is exactly the friction Artifacts were built to remove.

An artifact is a standalone, interactive output that Claude creates in a dedicated window alongside your conversation. Instead of a block of code or text buried in the chat, you see your content rendered and ready to use — a working web page, an interactive chart, a document you can download in one click.

When Claude creates an artifact

Claude decides to create an artifact automatically when the content meets a few criteria. It has to be:

• Significant and self-contained — typically over about 15 lines.
• Something you are likely to edit, iterate on, or reuse.
• Complex enough to stand on its own without needing the surrounding conversation.
• Useful to reference or use later, not just a one-line answer.

You do not have to ask for an artifact — Claude will usually make that call for you. But if Claude replies in the chat when you expected an artifact, you can say "create this as an artifact" or "show me this in an artifact" and it will switch.

The types of artifact Claude can produce

Claude supports several distinct artifact types, each tuned to a different kind of work.

• Documents — markdown, plain text, Word (.docx), PDF, PowerPoint (.pptx), and Excel (.xlsx). Great for meeting notes, reports, project plans, blog posts, or anything text-heavy you will want to export and keep editing.
• Code snippets — working code in any language: Python, JavaScript, C++, Go, SQL, whatever. You can view it, copy it, or download it into your own project.
• HTML pages — complete web pages with HTML, CSS, and JavaScript in a single file. Perfect for landing pages, forms, interactive demos, or quick prototypes.
• SVG images — scalable vector graphics for logos, icons, and illustrations. They render directly in the artifact window so you see what you are getting.
• Mermaid diagrams — flowcharts, sequence diagrams, Gantt charts, org charts. You describe the relationships; Claude renders them as a diagram you can refine.
• React components — interactive UI elements with real logic: calculators, dashboards, small games, data visualisations. These are not mockups — they respond to user input.

The range matters because it changes how you brief Claude. Once you know what Claude can build, you can ask for the right thing instead of settling for a description of it. "Build me a budget tracker" can become "build me a React budget tracker where I can input expenses by category, see a pie chart breakdown, and get a warning when I'm over budget".

Creating your first artifact

Creating an artifact is just having a conversation. Describe what you want — the more specific the better — and Claude will decide on the right format. A few prompts that cleanly produce artifacts:

• "Create a flowchart showing our customer onboarding process."
• "Build an interactive dashboard that lets me input monthly expenses and see a breakdown."
• "Design a landing page for a productivity app with a hero section and feature list."
• "Write a project brief template I can reuse for new initiatives."

When Claude generates an artifact, it appears in a dedicated panel to the right of the conversation. From there you can:

• Toggle between views — see the rendered preview and the underlying code or markdown.
• Copy content — grab the content for use elsewhere.
• Download files — save as a file to your computer.
• Inspect the code — see exactly what Claude generated.

The artifact lives beside the chat, which means you can keep the conversation going — "make the hero darker", "swap the CTA copy", "add a second column" — and watch the artifact update in place.

Sharing and publishing

Once you have something useful, you have several options.

Copy or download — for personal use or sharing via other channels, click the copy or download button in the lower-right of the artifact.

Share within your organisation — Team and Enterprise users can share artifacts internally. The shared artifact stays inside your organisation and requires team authentication to view.

Publish publicly — Free, Pro, and Max users can publish an artifact to a public link. Anyone with the link can view and interact with it, and they can even remix it — open it in their own Claude conversation and build on it. Important caveats when you publish:

• Only the selected version becomes public; your chat stays private.
• Published artifacts are not indexed by search engines, so they will not show up in Google.
• You can unpublish at any time by returning to the artifact and removing public access.

Publishing is how one-off experiments turn into shareable tools. A quick calculator you built for yourself can be sent to a colleague as a link — no hosting, no deployment.

Tips for getting more out of artifacts

• Be specific about what you want. "Build a budget tracker" is the minimum. "Build a monthly budget tracker where I input expenses by category, see a pie chart breakdown, and get a warning when I'm over budget" is a real brief.
• Describe the end user. "This flowchart is for new employees" leads to a different result than "this flowchart is for the engineering team". Claude tunes the complexity and the vocabulary to who is looking at it.
• Iterate incrementally. Ask for one change at a time. That makes it easier to see what is working and catch problems early.
• Ask for an artifact when Claude gives you chat. If you expected an artifact and got a wall of code, just say "please create that as an artifact" and it will switch.

Before you move on

Look at the last five things you built manually in the last week — a deck, a spreadsheet, a diagram, a form, a mock-up. Pick one that you would have built faster if Claude had produced it as an artifact. That is the work you should try next.