Using Claude

How to Use Claude Artifacts: Create, Edit, and Share

How to use Claude Artifacts to build, edit, and share code, documents, web apps, and graphics beside your chat — auto-create rules, enabling, Publish/Share, Live & AI artifacts.

🌐 This article was machine-translated and may contain inaccuracies. Refer to the Korean original if in doubt.

Artifacts let Claude show its output — code, documents, web pages, graphics, small apps — in a dedicated panel beside the chat, where you can preview, edit, and share it without copy-pasting anywhere else.

What you can build with Artifacts Code • scripts, many langs HTML app • web pages, games React • interactive UI Docs & files • Markdown docs • docx, pptx, xlsx, pdf Graphics • SVG, Mermaid diagrams Live dashboard • auto-refreshing data On all plans (incl. Free). Self-contained content over ~15 lines becomes an artifact automatically (May 2026).

When an artifact appears

Claude creates an artifact when the output is self-contained and usually over 15 lines (code, HTML, diagrams, documents). You can also just ask: "make this an artifact." It renders in a side panel to the right, and the preview updates instantly as Claude revises it.

Turning it on

Most accounts have it on by default (free accounts created after Feb 2026 automatically). If you don't see artifacts, enable them under Settings → Feature Preview. Available on all plans (Free, Pro, Max, Team, Enterprise).

Create & refine

  1. Describe what you want — e.g. "build a to-do tracker," "chart this data as bars."
  2. Check the Preview tab and refine with follow-up prompts ("change the colors," "add a button").
  3. For more control, open the Code tab to view and edit the HTML/CSS/JS directly.

Sharing

  • Publish — Free/Pro/Max: creates a public link. Recipients don't need a Claude account to view and interact, and signed-in users can remix (make their own editable copy).
  • Share — Team/Enterprise: available within your organization only (login required).

⚠️ A published artifact is public and may be indexed by search engines. Don't publish sensitive content. (The Share/Publish distinction and behavior can vary by plan and version.)

More powerful features

  • Live Artifacts: dashboards/trackers that refresh with current data each time you reopen them.
  • AI-powered artifacts: the artifact can call Claude's API directly, making smart apps rather than static screens.
  • Persistent storage: keep data across sessions (reported up to ~20MB per artifact).
  • MCP connections: integrate with external services like Calendar, Gmail, Slack (see the MCP guide).
  • Downloadable files: you can get docx/pptx/xlsx/pdf as artifacts too.

Tips

Editing and iterating is easier on web/desktop than mobile (the mobile app is mainly for viewing). For the broader feature set, see Projects, Artifacts & Memory.

Disclaimer: Artifact types, sharing, storage, and the toggle location vary by plan and version and may change (some figures are subject to change). This guide reflects Anthropic's official docs (support.claude.com) at the time of writing (May 2026). Check the official docs for the latest. This site is not affiliated with Anthropic.

Keep reading

Summarizing Long Documents with Claude: A 5-Step Workflow

A 5-step workflow to summarize long material like meeting notes, reports, and papers accurately with Claude: purpose, summary type, splitting, prompting, and verification.

How to Use Claude Projects: Knowledge & Instructions to Cut Repetition

Claude Projects is a workspace that keeps materials and instructions in one place. Learn the difference between knowledge and instructions, how they stack with profile settings, steps, and tips.

How to Write Prompts for Claude: 6 Core Principles from the Official Docs

Six practical prompting principles distilled from Anthropic's official documentation — clarity, context, examples, XML structure, roles, and long-context handling.

Claude Feature Guide: Using Projects, Artifacts, and Memory Right

The core features that take Claude beyond chat: Artifacts (output panel), Projects (context workspace), and Memory (cross-session recall) — how they work and how to use them.

Have a question or want to share how you use Claude?

Join the community to share tips with other users, or explore more guides.

Go to communityMore in Guides