> ## Documentation Index
> Fetch the complete documentation index at: https://docs.plannotator.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Claude Artifacts: Examples and How to Use Them
> Learn what Claude Artifacts are, how to create and share them, which forms they support, and how to review exported HTML or Markdown.
**Claude Artifacts** are substantial, standalone outputs that Claude opens in a dedicated pane beside a conversation. An artifact can be a Markdown document, code snippet, single-page HTML site, SVG image, diagram, flowchart, or interactive React component. You can revise it, switch between versions, inspect or download its source, and publish or share the version you choose. Anthropic documents the current behavior in [What are artifacts and how do I use them?](https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them).
*Last reviewed July 19, 2026. Maintained by the Plannotator project.*
Claude uses the Artifacts name in Claude, Claude Desktop, and Claude Code. This guide starts with the artifact pane in Claude and Claude Desktop. Claude Code artifacts are live pages published from a coding session, with different file, version, and sharing rules described below.
## How to use Claude Artifacts
1. **Enable the required capability.** Claude currently requires **Code execution and file creation** under **Settings > Capabilities**. Team and Enterprise owners manage the capability for their organization.
2. **Ask for a standalone result.** Describe the object you need, such as a comparison dashboard, implementation plan, diagram, calculator, prototype, or code walkthrough. Claude may also create an artifact without an explicit request when the output is substantial and self-contained.
3. **Revise the artifact in conversation.** Ask Claude to change it. Markdown artifacts also support selecting text and choosing **Edit with Claude**. Use the version selector to return to an earlier result.
4. **Inspect or export it.** The artifact controls let you view the underlying code, copy the content, or download the file for use outside the conversation.
5. **Publish or share the intended version.** Access rules depend on your plan and on whether the artifact came from Claude or Claude Code. Check the version and audience before copying the link.
Anthropic says Claude generally creates an artifact when the content is significant, self-contained, likely to be edited or reused, and able to stand without the rest of the conversation. Its help article describes “typically over 15 lines” as a signal, not a minimum that every useful artifact must meet.
## Claude Artifacts examples and supported forms
The supported forms describe what Claude can place in the artifact pane. The examples below are representative uses, not a fixed gallery or a claim that one format is best for every task.
| Supported form | Example | What to verify |
| ------------------------------- | --------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
| Markdown or plain-text document | Research brief, plan, checklist, report, or operating guide | Sources, assumptions, missing decisions, and whether the document still matches current work |
| Code snippet | Data transform, configuration example, or small function | Whether it runs in the real project and satisfies its tests, types, and security rules |
| Single-page HTML website | Interactive explainer, dashboard, calculator, timeline, or comparison | Source data, keyboard use, external requests, and whether presentation hides missing evidence |
| SVG image | System map, process drawing, or scalable diagram | Labels, relationships, reading order, and accessibility outside the visual rendering |
| Diagram or flowchart | Architecture flow, decision tree, or sequence | Whether every connection exists in the cited source material |
| Interactive React component | Prototype, game, form, teaching tool, or configuration explorer | Real product behavior, state handling, accessibility, and deployment assumptions |
AI features, MCP connections, and persistent storage extend what an artifact can do. They are capabilities, not additional file formats. Anthropic's current help article says AI-powered artifacts run on its infrastructure, MCP access requires each viewer to authenticate and approve the connection, and persistent storage can be personal or shared.
For the broader category beyond Anthropic's product, see [What is an AI artifact?](/learn/ai-development/what-is-an-ai-artifact).
## How HTML and interactive Claude Artifacts work
HTML earns its place when the reader needs layout, comparison, visualization, or interaction. Markdown remains the clearer default for a linear document that people need to edit, diff, and preserve. [When should AI coding agents produce HTML instead of Markdown?](/learn/code-context/ai-agent-html-vs-markdown) gives the full format decision, including accessibility, Git, and sandboxing tradeoffs.
Claude and Claude Code use different artifact models:
| Behavior | Claude and Claude Desktop | Claude Code |
| ------------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
| Main surface | Dedicated artifact pane beside chat | Live page published from a coding session |
| Common source forms | Markdown, text, code, single-page HTML, SVG, diagrams, and React | A project file ending in `.html`, `.htm`, or `.md` |
| Update model | Ask Claude to revise, then use the version selector | Claude edits the project file and republishes to the same URL |
| Runtime | May use Claude-powered behavior, approved MCP connections, and published-artifact storage | One self-contained page with no backend; a strict Content Security Policy blocks ordinary external requests |
| Outside data | Each viewer approves and authenticates their MCP connections | Declared MCP connectors are the only live-data exception to the external-request block |
The [Claude Code artifacts reference](https://code.claude.com/docs/en/artifacts) documents additional limits: one page, no backend, no relative multi-page site, a rendered size of 16 MiB or less, and no external scripts, stylesheets, fonts, images, `fetch`, XHR, or WebSocket requests. Claude Code can inline assets and can call declared MCP connectors through the viewing person's account.
A Claude Code artifact is therefore a review or communication page, not a deployed application. If the work needs its own database, authentication, server routes, or durable application behavior, it needs ordinary application infrastructure.
## How versions work
In Claude and Claude Desktop, artifact updates appear as versions in the version selector. Editing an earlier chat message creates a different conversation branch with its own artifacts. It does not rewrite the existing conversation's artifact history.
Before publishing or sharing, select the version the recipient should receive. The [publishing and sharing guide](https://support.claude.com/en/articles/9547008-publish-and-share-artifacts) explicitly includes this check in both workflows.
Claude Code keeps one artifact URL across updates. Each publish creates a new version, and the Share control can expose one selected version or follow the latest version. A new Claude Code session needs the artifact URL to update the existing page; without it, the session creates a new artifact.
Version history records artifact changes. It does not prove that a walkthrough still matches the current code revision, that a dashboard used current data, or that a prototype reflects the shipped application. Record the source revision, dataset, or decision date inside consequential artifacts.
## How publishing and sharing work
Claude uses **publish** for public access and **share** for restricted access. The exact choice depends on the product surface and plan.
| Surface and plan | Current access behavior |
| ------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Claude Free, Pro, or Max | Publishing creates a public link. Anyone with the link can view and use basic interactions without an account. Customizing the artifact or using AI-powered features requires signing in. |
| Claude Team or Enterprise | Sharing is limited to authenticated members of the organization. A viewer also needs access to the originating project when the artifact came from a project. |
| Claude Code Pro or Max | A new artifact is private to its author. The author can publish a public link that does not require a Claude account. |
| Claude Code Team or Enterprise | Organization sharing is available. Public sharing is available only when an Owner enables it. An artifact that calls connectors cannot use a public link. |
Published Claude artifacts can also be embedded on allowed domains. The publisher chooses which domains may embed the artifact.
Two sharing details deserve a deliberate check:
* Sharing a Claude artifact inside a Team or Enterprise organization also gives viewers access to attachments and files from the conversation that created it.
* Unpublishing a consumer artifact revokes the link, prevents that same artifact from being published again, and permanently deletes its associated personal and shared storage data when persistent storage was used.
Product behavior changes. Recheck Anthropic's [publish and share artifacts](https://support.claude.com/en/articles/9547008-publish-and-share-artifacts) page before documenting a sensitive distribution workflow.
## Safety and review limits
A working artifact still needs review.
* **Public means reachable by anyone with the link.** Remove secrets, private source material, customer data, and hidden attachments before publishing.
* **Connected actions use the viewer's account.** MCP access requires approval, but an artifact may still read or change data through the tools the viewer authorizes. Inspect the declared connection and the action before approving it.
* **Shared storage is shared by design.** Anthropic displays a confirmation when an artifact first uses shared storage. Do not enter sensitive information until you understand whether the artifact uses personal or shared storage.
* **Polish is not evidence.** Verify diagrams, calculations, code references, and conclusions against the underlying source. A visually convincing artifact can be wrong or selective.
* **A version can become stale.** A published walkthrough may describe an earlier commit, investigation state, or decision even when the page still loads correctly.
* **Exported HTML is active content.** Once downloaded and opened elsewhere, it can contain scripts and network requests. Use an isolated viewer and inspect the source before granting it access to local files, credentials, or trusted application origins.
For file creation and code execution more broadly, Anthropic's [security guidance](https://support.claude.com/en/articles/12111783-create-and-edit-files-with-claude) explains why network access changes the risk of data leaving its sandboxed environment.
## Export and annotate a Claude Artifact with Plannotator
Plannotator does not have a native Claude Artifacts integration. The workflow is a manual, file-based handoff: export the artifact, open the local file in Plannotator, and return structured feedback to the coding agent that started the review.
1. In the Claude artifact pane, select the intended version and use the controls to view its source, copy it, or download it.
2. Save the result as a local `.md`, `.html`, or `.htm` file. If the export contains several files or local support assets, keep them together in one folder.
3. Open the file or folder:
```bash theme={null}
plannotator annotate claude-artifact.md
plannotator annotate claude-artifact.html
plannotator annotate ./claude-artifact-folder/
```
4. For HTML, choose the review surface that matches the question:
```bash theme={null}
# Review layout and interaction in the sandboxed HTML viewer
plannotator annotate claude-artifact.html
# Remove scripts and annotate a Markdown conversion of the content
plannotator annotate claude-artifact.html --markdown
```
5. Select text or an element, add comments, and choose **Send Feedback**. When a supported coding agent opened the review, Plannotator returns the structured annotations to that agent. A direct CLI run prints the feedback to standard output.
Plannotator's HTML viewer uses a sandboxed iframe with an opaque origin, but it does not block outbound network requests made by the page. Use the Markdown conversion for untrusted HTML or disconnect from the network when the review does not need live resources. The complete workflow is in [Annotate any web page or HTML file](/learn/annotate-any-web-page-or-html-file) and [Annotate HTML in Plannotator](/open-source/workflows/html).
This workflow reviews a local export. Plannotator does not become a generic HTML host, publish the Claude artifact, or attach comments directly to the live Claude page.
Install the local feedback tool and connect it to Claude Code, Codex, or another supported coding agent.
Organize many local agent files in a separate experimental workspace when the problem is finding outputs, not returning one review to an agent.
## Frequently asked questions
### Are Claude Artifacts the same as AI artifacts?
Claude Artifacts is Anthropic's product name. An AI artifact is the broader category of reusable AI-produced documents, applications, images, reports, media, and other outputs.
### Can Claude Artifacts contain HTML and JavaScript?
Yes. Claude supports single-page HTML and interactive React artifacts. Claude Code artifacts can use inline HTML, CSS, and JavaScript, but its published viewer blocks ordinary external requests and provides no backend.
### Can someone view a published Claude Artifact without an account?
Yes for a public link on a supported consumer plan. Basic viewing and interaction do not require an account. Organization-shared artifacts require the viewer to sign in with the appropriate organization account.
### Can I download a Claude Artifact?
Yes. The artifact pane provides controls to view the source, copy the content, and download files. Check the selected version before exporting.
### Does Plannotator annotate the live Claude Artifact?
No. Export the HTML or document first, then open the local file in Plannotator. This preserves a clear boundary between the Claude artifact and the separate review session.
## Primary sources
* [Anthropic: What are artifacts and how do I use them?](https://support.claude.com/en/articles/9487310-what-are-artifacts-and-how-do-i-use-them)
* [Anthropic: Publish and share artifacts](https://support.claude.com/en/articles/9547008-publish-and-share-artifacts)
* [Anthropic: Share session output as artifacts in Claude Code](https://code.claude.com/docs/en/artifacts)
* [Anthropic: Create and edit files with Claude](https://support.claude.com/en/articles/12111783-create-and-edit-files-with-claude)