Module 2Lesson 6 of 13·20 min

Creating with Artifacts

Learn how Claude creates artifacts — standalone interactive outputs like web pages, diagrams, code snippets, and React components that you can share, publish, and iterate on.

What Are Artifacts?

Artifacts are standalone, interactive outputs that Claude creates in a dedicated window alongside your conversation. Instead of getting a long block of code or text buried in the chat, you see your content rendered and ready to use — whether that is a working website, an interactive chart, or a document you can immediately download.

Claude automatically creates an artifact when content is significant and self-contained (typically over 15 lines), something you are likely to edit or reuse, represents complex content that stands on its own, or content you will want to reference later.

Types of Artifacts

1

Documents (Markdown, Plain Text)

Great for text-heavy content you will export or continue editing — meeting notes, reports, project plans, blog posts.

2

Code Snippets

Working code in any programming language. View, copy, or download it to use in your own projects.

3

HTML Pages

Complete web pages with HTML, CSS, and JavaScript. Perfect for landing pages, forms, interactive demos, or quick prototypes.

4

SVG Images

Scalable vector graphics for logos, icons, and illustrations that render directly in the artifact window.

5

Mermaid Diagrams

Flowcharts, sequence diagrams, Gantt charts, org charts, and more. Describe the relationships and Claude creates the visualization.

6

React Components

Interactive UI elements with real functionality — calculators, dashboards, games, data visualizations. These include actual logic and respond to user input.

Sharing and Publishing

  • Copy or download — use the buttons in the artifact window for personal use or sharing via other channels.
  • Share within your organization — Team and Enterprise users can share artifacts internally with team authentication.
  • Publish publicly — Free, Pro, and Max users can publish artifacts with a shareable link. Others can view, interact with, and remix your artifact.

Getting Better Artifacts

Be specific about what you want ("Build a monthly budget tracker where I can input expenses by category, see a pie chart breakdown, and get a warning when over budget"), describe the end user, and iterate incrementally — add one feature at a time.

Key Takeaways

  • 01Artifacts are standalone interactive outputs rendered in a dedicated window alongside your chat.
  • 02Claude creates documents, code, HTML pages, SVGs, diagrams, and React components as artifacts.
  • 03Artifacts can be copied, downloaded, shared within your org, or published publicly with a shareable link.
  • 04Iterate incrementally for best results — add one feature or make one change at a time.