Claude Artifacts: How to Create Interactive Apps, Documents, and Code

A Zapier analysis of Claude feature adoption found that Artifacts ranked as the most-used non-chat capability across free and paid plans by Q1 2026. The reason is practical: Artifacts turn a conversational AI response into a rendered, interactive output that runs directly in the browser.

Claude Artifacts are standalone outputs that appear in a side panel during conversation. Instead of pasting a code block into the chat window, Claude renders the result as a live preview you can click, scroll, type into, and share with anyone via a public URL. The artifact lives alongside your conversation, so you can ask Claude to change a color, add a button, or restructure the layout, and the preview updates in place.

Artifacts trigger automatically when Claude determines the output is substantial enough to benefit from a rendered view, typically anything over 15 lines. You can also request one explicitly by saying "build this as an artifact" or "show it in the preview pane." Every artifact you create is saved to your Artifacts library for later access.

Six primary formats are supported:

• HTML/CSS/JavaScript for full web pages with scripts, styles, and CDN resources
• React components rendered with Babel in the browser, supporting hooks and Tailwind CSS
• SVG vector graphics for logos, icons, diagrams, and infographics
• Mermaid diagrams for flowcharts, sequence diagrams, ER diagrams, and Gantt charts
• Code files in any language, syntax-highlighted and copyable
• Markdown documents with headers, tables, and formatted text

The panel itself has two viewing modes: Preview (the rendered output) and Code (the underlying source). Action buttons at the bottom let you download, copy, publish, or browse version history. Every edit Claude makes creates a new version you can step back to, so experimentation carries no risk.

The creation process has a natural rhythm that works better than dropping a complex prompt on the first message. Start in the Artifacts section of Claude's sidebar, which signals to Claude that you want rendered output rather than a text-only response.

Step 1: Describe the problem, not the solution. Tell Claude what you need to accomplish rather than specifying exact HTML tags. "I need a calculator that shows how much compound interest I'd earn on different savings amounts" produces better results than "write an HTML page with three input fields and a calculate button." Claude will ask clarifying questions about your audience, the level of detail, and any edge cases.

Step 2: Review the plan before building. Ask Claude to outline what it plans to build before writing any code. A prompt like "describe the UI layout, inputs, outputs, and edge cases before you start" takes 30 seconds and prevents most first-draft problems. This brainstorm-first approach produces a usable first draft roughly 80% of the time.

Step 3: Request the artifact explicitly. Say "build this as a React artifact" or "create an HTML artifact." Without the word "artifact" or a format hint, Claude sometimes responds with a code block in the chat instead of a rendered preview.

Step 4: Iterate in the same conversation. Each follow-up message modifies the existing artifact rather than creating a new one. "Make the chart responsive," "add a dark mode toggle," or "replace the pie chart with a bar chart" all work. Claude maintains full context about what you built and why, so iteration is cheap.

Selective editing is a time saver for documents and longer code. Highlight a specific section in the artifact and click "Edit with Claude." Claude modifies only the highlighted portion, leaving everything else untouched. This avoids burning tokens on a full rewrite and prevents unintended changes to parts that already work.

One format note: if you want an interactive component with state management, request React specifically. HTML artifacts work for static pages and simple JavaScript, but React gives you hooks, component composition, and Tailwind utility classes out of the box.

Store and share your artifact outputs across teams

Export files from Claude Artifacts to a persistent workspace where teammates and clients access them through branded links. 50GB free storage, no credit card, MCP-ready for programmatic file transfers.

Sign Up Free

The best way to understand Artifacts is to build a few. These five categories cover the most common use cases, each with a prompt pattern that reliably produces good results.

Data visualizations. Paste a CSV or describe your data shape, then ask for a specific chart type. "Create a Chart.js bar chart showing monthly revenue with a year-over-year comparison line and a toggle between absolute values and percent change" produces a working dashboard in one turn. Artifacts support bar charts, line graphs, pie charts, scatter plots, heatmaps, and sankey diagrams.

Calculators and tools. Self-contained utilities are where Artifacts excel because they require no backend. A loan amortization calculator with inputs for principal, rate, term, and optional extra payments, generating monthly payment, total interest, payoff date, and a year-by-year amortization table, is a single prompt. Other proven examples include ROI estimators with sensitivity analysis, freelance rate calculators factoring in taxes, and unit converters.

Games. Wordle clones, Snake, Tetris, memory card games, trivia quizzes, and word puzzles all work as single-file React artifacts. The constraint of no persistent storage means scores reset on reload, but the prototyping speed is hard to beat. Ask Claude to "build a Wordle-style game with a custom word list, virtual keyboard, and win/loss statistics" and you get a playable game in under a minute.

Documents and presentations. Artifacts generate downloadable .docx, .pptx, .xlsx, and .pdf files. Upload a rough outline and ask Claude to "generate a 10-slide PowerPoint with structured layouts and a consistent color scheme." The output is a finished file you can download and edit in your desktop application.

Landing pages and forms. Describe a pricing page, feature comparison, or multi-step intake form. Claude generates responsive HTML with clean styling. This is particularly useful for non-developers who need a functional prototype to show stakeholders before investing in full development.

Diagrams. Mermaid-based artifacts handle flowcharts, sequence diagrams, entity-relationship diagrams, and Gantt charts. Describe your process in plain language and Claude converts it to a rendered diagram you can export as SVG.

Every artifact can be published as a public URL in two clicks. Click the "Publish" button at the bottom of the artifact panel, confirm, and Claude generates a shareable link. Anyone with the link can view and interact with the published artifact without a Claude account.

Users who do have a Claude account see a "Remix" button on published artifacts. Remixing creates an editable copy in their own workspace, so they can modify the code, change the styling, or extend the functionality. This turns a single artifact into a starting template that others can build on.

Publishing, remixing, and sharing are free on every Claude plan, including the free tier. There is no paywall on distribution.

What published artifacts can and cannot do: a published interactive calculator works exactly as it does in the preview. A published game is playable. But artifacts that make runtime API calls back to Claude require the viewer to have an active Claude session. If your artifact calls Claude's API internally (AI-powered artifacts), anonymous visitors see a broken experience.

AI-powered artifacts are a newer capability where the artifact itself calls Claude's intelligence at runtime. A writing assistant that suggests edits, a study tool that generates quiz questions on the fly, or a data analyzer that explains trends all fall into this category. The usage counts against each viewer's own Claude subscription limits, not the creator's.

Live Artifacts, introduced in April 2026 for Claude Cowork, take this further. These are dashboards and trackers connected to MCP servers that pull fresh data every time you reopen them. A sales dashboard backed by a CRM connector shows current pipeline numbers, not a static snapshot from when you built it. Live Artifacts require a paid plan (Pro, Max, Team, or Enterprise) and MCP connector access.

For teams that need to distribute artifact outputs beyond Claude's ecosystem, saving the generated files to a shared workspace solves the handoff problem. Build a report or dashboard as an artifact, export the files, and upload them to a service like Fast.io where teammates or clients access them through a branded share link. The free agent tier covers 50GB and five workspaces with no credit card.

Artifacts are a prototyping tool, not a deployment platform. Knowing the boundaries upfront saves time and frustration.

Single-file constraint. Every artifact is one self-contained file. You cannot import from local modules, split code across multiple files, or use a multi-page router. This works fine for calculators, dashboards, and landing pages but breaks down for anything that needs modular architecture.

No backend. Artifacts run entirely in the browser sandbox. There is no server-side code execution, no database connections, no Node.js, and no external API calls from the artifact itself (AI-powered artifacts that call Claude's API are the one exception). If your project needs user authentication, a database, or third-party API integration, the artifact gets you roughly 70% of the way to a working app, then you copy the code into a proper development environment.

No persistent storage. localStorage and sessionStorage are blocked in the sandboxed iframe. Data entered into an artifact resets when you close or reload it. The workarounds are URL parameters for simple state, in-memory variables for session-only data, or upgrading to a paid plan for the 20MB persistent storage feature (Pro, Max, Team, Enterprise).

Mobile limitations. Complex React or interactive HTML artifacts may render incompletely on iOS Safari due to iframe sandbox restrictions. The Claude mobile app does not support artifact rendering as of mid-2026, so you need the desktop app or web interface for the full experience.

CDN restrictions. Artifacts can load external libraries from CDNs, but corporate firewalls sometimes block the CDN allowlist. If an artifact works on your personal network but fails at the office, this is likely the cause.

The practical takeaway: use Artifacts for rapid prototyping, stakeholder demos, internal tools, and learning exercises. When the project graduates to production, copy the code into your development setup and add the backend infrastructure, authentication, and database layers separately. The artifact gave you a working frontend and a validated user experience to build on.

After building dozens of artifacts across different formats, a few patterns consistently produce better output.

Give direction, not dictation. "Clean and professional with blue accents" produces better styling than specifying every hex code and pixel value. Claude makes better design decisions when you describe the feel rather than the implementation. Save the precise specifications for iteration passes after the first draft.

Start simple, then layer complexity. Ask for the core functionality first, verify it works in the preview, then add features one at a time. A compound prompt like "build a project management dashboard with drag-and-drop, real-time updates, charting, and user roles" often produces a partially broken result. Starting with "build a task board with three columns and the ability to add cards" then iterating from there produces something that actually works.

Use screenshots as input. Upload a screenshot or mockup of the interface you want. Claude's vision capabilities recognize layout, colors, typography, and spacing, then generate code that matches the reference. This is faster than writing a paragraph describing the design, and more accurate.

Be explicit about the format. Always specify "React artifact," "HTML artifact," or "SVG artifact." Without a format cue, Claude sometimes outputs a code block in the chat window instead of a rendered preview. React is the best default for interactive tools. HTML works for static content. SVG is for graphics.

Use version history as an undo button. Every edit creates a new version. If an iteration breaks something, step back to a previous version using the version selector rather than trying to explain what went wrong. This is faster and more reliable than asking Claude to "undo the last change."

When your artifact outputs need to live beyond a single Claude session, or when a team needs to collaborate on the generated files, a persistent workspace bridges the gap. Fast.io workspaces let agents and humans share the same file layer: export an artifact, upload it to a workspace, and the whole team can access, version, and discuss it through the browser. Intelligence Mode auto-indexes uploaded files for semantic search and AI-powered Q&A, so your artifact outputs become part of a searchable knowledge base. Connect the Fast.io MCP server to your Claude setup and file transfers happen programmatically.