Skip to main content

Creating with artifacts

📖 Lesson content

By the end of this lesson, you will be able to:

  • Explain what artifacts are and when Claude creates them
  • Share artifacts with colleagues and publish them publicly
  • Troubleshoot common artifact issues

Estimated time: 20 minutes

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's a working website, an interactive chart, or a document you can immediately download.

Claude automatically creates an artifact when content meets certain criteria:

  • It's significant and self-contained, typically over 15 lines
  • It's something you're likely to want to edit, iterate on, or reuse
  • It represents complex content that stands on its own without needing the surrounding conversation
  • It's content you'll want to reference or use later

Common artifact types

Claude can create different of artifacts, each suited to different needs:

  • Documents (including markdown, plain text, Word docs, PDFs, PowerPoint, and Excel): Great for anything text-heavy that you'll want to export or continue editing — like meeting notes, reports, project plans, blog posts, and other written content.
  • Code snippets: Working code in any programming language—Python, JavaScript, C++, and more. You can view the code, copy it, or download it to use in your own projects.
  • 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, illustrations, and other visual elements. These render directly in the artifact window so you can see exactly what you're getting.
  • Mermaid diagrams: Flowcharts, sequence diagrams, Gantt charts, org charts, and more. Describe the relationships you want to visualize, and Claude will create a diagram you can refine.
  • React components: Interactive UI elements with real functionality—calculators, dashboards, games, data visualizations. These aren't just mockups; they include actual logic and respond to user input.

Creating your first artifact

Creating an artifact is as simple as having a conversation. Just describe what you want, and Claude will determine whether to present it as an artifact.

For example, you might say:

  • "Create a flowchart showing our customer onboarding process (Note: Claude may now generate visual diagrams like flowcharts as HTML using Imagine, in addition to code-based artifacts.)"
  • "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"

If Claude doesn't automatically create an artifact when you expect one, you can explicitly ask: "Create this as an artifact" or "Show me this in an artifact."

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

  • View different formats: Toggle between a preview (how it looks) and the underlying code
  • Copy content: Click the copy icon to grab the content for use elsewhere
  • Download files: Save the artifact as a file to your computer
  • View code: See exactly what Claude generated under the hood

Sharing and publishing artifacts

Once you've created something useful, you have several options for sharing it.

Copy or download: For personal use or sharing via other channels, use the copy or download buttons in the lower right corner of the artifact window.

Share within your organization (Claude for Work): Team and Enterprise users can share artifacts internally with colleagues. The shared artifact stays within your organization and requires team authentication to access.

Publish publicly: For free, Pro, and Max users, you can publish artifacts to make them accessible to anyone with the link. When you publish:

  • Only the selected version becomes public (your chat remains private)
  • Anyone can view and interact with the artifact without a Claude account
  • Others can "remix" your artifact—opening it in their own Claude conversation to modify and build upon it

To publish, click the "Share" or "Publish" button in the upper right corner of the artifact. You can unpublish at any time by returning to that artifact and removing public access. Note: When you publish an artifact, it is publicly accessible via its link — anyone can view it, even without a Claude account. Published artifacts are not indexed by search engines, so they won't appear in Google results.

Tips for getting the most from artifacts

Be specific about what you want. "Build a budget tracker" is good, but "Build a monthly budget tracker where I can input expenses by category, see a pie chart breakdown, and get a warning when I'm over budget" is better.

Describe the end user. Telling Claude who will use the artifact helps it make appropriate design choices. "This flowchart is for new employees" leads to different results than "This flowchart is for the engineering team."

Iterate incrementally. Ask Claude to add one feature or make one change at a time. This makes it easier to identify what's working and catch issues early.

Request artifacts when needed. If you ask for something substantial and Claude responds in the chat instead of creating an artifact, just say "Please create that as an artifact."

Lesson reflection

Before moving on, consider:

  • What recurring work could benefit from having an interactive artifact you can reuse?
  • Are there processes in your work that would be clearer as a flowchart or diagram?
  • What prototype or tool would help you test an idea quickly?

What's next

In the next lesson, you'll learn about Skills — reusable instruction sets that teach Claude specialized workflows.

Feedback

As you progress through the course, we'd love to hear from you about how you are using concepts from the course in your work and any feedback you may have. Share your feedback here.

🔁 Related lessons

📚 Source & attribution

Was this lesson helpful?

Feedback / ReportSpotted an issue or have an improvement idea?