Guides  /  AI Builder Hosting

What Are Claude Artifacts? Examples and Limits

August 6, 2026  ·  8 min read

Written by Andrian ·  Technical Writer, Static.app

Reviewed by Roman Frank ·  Technical Reviewer, Static.app

Ask Claude for a landing page, a calculator, or a flowchart and it does not just print code into the chat. A panel slides open beside the conversation with the finished thing running inside it. That panel is an artifact, and it is the closest thing Claude has to a canvas. Artifacts run on every Claude plan, they can only do what a browser can do on its own, and publishing one puts your work on a public Anthropic address.

What is a Claude artifact?

An artifact is a dedicated window next to your chat that holds a single piece of substantial, self-contained work. Instead of scrolling back through a wall of code in the conversation, you get the real output in its own space: a rendered web page you can click, a diagram you can read, a document you can edit. Claude opens an artifact when the content is substantial, roughly fifteen lines or more. It also opens one when the output looks like something you will edit or reuse rather than read once and forget.

The distinction matters because an artifact is a living thing. Ask for a change and Claude rewrites the artifact in place rather than pasting a fresh copy underneath. Everything you build stays in one window that keeps improving as you talk to it.

ARTIFACT VERSION CONVERSATION ARTIFACT PANEL · RUNS LIVE
An artifact is a second window beside the chat. The conversation stays on the left while the finished thing runs on the right. Ask for a change and Claude rewrites what is already in the panel, so the version selector in the top bar is your way back to an earlier draft.

What Claude can put in an artifact

Claude puts six kinds of content in an artifact: single-page HTML websites, interactive React components, code snippets, documents, SVG images, and diagrams. Only some of them are code. Here is what each one is good for:

  • Single-page HTML websites, which render live in the panel so you can click links and fill in forms while you iterate.
  • Interactive React components, for anything with state: calculators, dashboards, small games, filterable tables.
  • Code snippets in any language, syntax-highlighted and ready to copy into your editor.
  • Documents in Markdown or plain text, such as drafts, specs, and reports.
  • SVG images, which are vector graphics you can scale to any size without blurring.
  • Diagrams and flowcharts, generated from a description of the process you want to map.
SIX KINDS OF CONTENT Single-page site Interactive component Code snippet Document SVG image Diagram or flowchart
All six share one requirement: the content has to be self-contained, complete enough to stand on its own in the panel with nothing fetched from outside it. That is the same requirement that later makes an artifact so easy to move onto hosting of your own.

Artifacts work on every Claude plan, public publishing does not

Artifacts themselves are available on every Claude plan, from Free to Enterprise. Public publishing is limited to Free, Pro, and Max, and reaching outside services through the Model Context Protocol (MCP) needs Pro or above. Plan gates and limits below are as of August 2026, from Anthropic's Help Center.

  • Artifacts: Free, Pro, Max, Team, and Enterprise.
  • Required setting: "Code execution and file creation", under Settings, then Capabilities. On Team and Enterprise an administrator controls that toggle for the whole organization, which is the usual reason artifacts appear for one colleague and not another.
  • Public publishing: Free, Pro, and Max.
  • Organization-only sharing: Team and Enterprise.
  • Outside services through MCP: Pro and above.
  • Published artifact size cap: 20 MB.

Live artifacts and version history

HTML and React artifacts run for real in the artifact panel beside your chat, so a form submits, a button responds, and a chart redraws when you change its filter. They are not screenshots of code. A live artifact is one that runs rather than one that only shows code. Building in an artifact feels less like generating code and more like building software by conversation.

Because Claude rewrites the artifact on every request, it keeps a version history. A version selector at the top of the panel lets you step back through earlier drafts, which is the safety net for the moment when the fourth revision looks worse than the second. Markdown artifacts add one more trick: highlight a passage, click "Edit with Claude", and describe what you want changed, and only that section is rewritten.

Claude artifacts examples

People build one-page sites, interactive calculators, data dashboards, small browser games, architecture and process diagrams, teaching tools, and client-ready prototypes in Claude artifacts. Here are those seven, with what each one usually looks like:

  1. A one-page site for an event, a product launch, a wedding, or a personal portfolio, complete with styling and images.
  2. Interactive calculators, from a mortgage estimator to a pricing tool that changes as customers move sliders.
  3. Data dashboards that turn a pasted spreadsheet into sortable tables and charts.
  4. Small browser games, which are a popular way to test how far a single prompt can go.
  5. Architecture and process diagrams for documentation, drawn from a plain description of the system.
  6. Quizzes, flashcards, and teaching tools built around material you paste in.
  7. Working prototypes to put in front of a client before anyone commits engineering time.

Every artifact in that list shares three traits. The output is self-contained. It runs in a browser. It is more useful as a working thing than as code you have to assemble.

What artifacts cannot do

An artifact cannot run server-side code, cannot store data in a database, cannot reach outside services except through one configured path, cannot exceed 20 MB once published, and cannot live on a domain of your own. All five limits come from one place. Artifacts run inside a sandbox on Anthropic's infrastructure, and the walls of that sandbox define what you can build. Knowing them upfront saves an afternoon of trying to make something that was never going to work.

  • No server-side code. Everything runs in the browser, so there is no PHP, no Node backend, and no server process of your own.
  • No database. Data does not persist between visits unless something outside the artifact stores it.
  • Limited outside connections. An artifact cannot freely call any API you like. On Pro and higher plans it can reach external services through MCP, which is a configured path you set up rather than open network access.
  • A storage ceiling. A published artifact is capped at 20 MB, which is generous for a page and restrictive for a media-heavy one.
  • No domain of your own. However you share it, the artifact lives on an Anthropic address inside Anthropic's viewer.
WHERE THE WALLS ARE RUNS IN THE BROWSER HTML CSS JavaScript Everything the page needs travels inside it. STORAGE A published artifact stops at 20 MB. A server of your own A database Any API you choose Outside services via MCP Pro plans and up, configured
One rule with one exception: the artifact talks to the browser and to nothing else. The single configured way out is MCP, on Pro plans and up, which is a specific path you set up rather than open network access.

None of this is a flaw. A sandbox that cannot reach a database is also a sandbox that cannot leak your data or run someone else's code against your account. It just means an artifact is a great place to build a static, front-end thing, and the wrong place to run a business on.

Publishing versus sharing

Publishing an artifact puts it behind a public link that anyone can open without a Claude account. Sharing keeps the artifact inside your organization, where every viewer has to sign in with an account of their own. Mixing the two up is the most common reason a link does not work for the person you sent it to.

Your artifact PUBLISH Free, Pro and Max plans A public link Anyone can open it and use it without signing up SHARE Team and Enterprise plans A sign-in first Only people inside your own organization can open it
Mixing the two words up is the usual reason a link fails for the person you sent it to. If the artifact came out of a project, a shared link needs access to that project as well, which makes sharing right for internal work and wrong for a link to a client.

Publishing, on Free, Pro, and Max

Publishing puts the artifact behind a public link. Someone who has never heard of Claude can open it and interact with it without signing up, though they will be nudged to create an account to unlock the AI features. Claude users who open your link can also copy and save it for themselves. Published artifacts can be embedded on a website too, using generated embed code, as long as you list the domains allowed to host the embed.

Sharing, on Team and Enterprise

Sharing keeps the artifact inside your organization. Viewers have to sign in with their own Team or Enterprise account. If the artifact came out of a project, they need access to that project as well. It is the right choice for internal work and the wrong choice for a link to a client.

One decision that cannot be undone

Unpublishing an artifact is permanent. As of August 2026, once you unpublish an artifact you cannot publish that same artifact again, and its stored data is deleted along with it. To get a public link back you have to create a new artifact from scratch. Worth knowing before you unpublish something to tidy up. The Remix button is gone as of August 2026, so people who want to build on your work copy the code into a new chat instead.

Published PUBLIC LINK IS LIVE unpublish Unpublished STORED DATA DELETED Publishing that same artifact again is not possible
The stored data leaves with the link. Getting a public URL back means building a new artifact from scratch, which is a very different amount of work from flipping a switch back.

When you need a real website instead

You need real hosting for a Claude artifact the moment you want your own domain, a password, visitor numbers, or a URL that is not an Anthropic address. A published artifact link is excellent for showing a draft, and it stops being enough as soon as the artifact is something you want to put your name on. Four limits come with a published link:

  • The link stays on an Anthropic address.
  • You cannot attach a domain of your own.
  • There is no password protection.
  • You cannot see how many people opened it.

The fix is to move the artifact onto hosting you control. Because artifacts are already plain HTML, CSS, and browser JavaScript, they are exactly what static hosting is built to serve. Nothing needs rewriting. Static.app has an Import from URL button on its Claude hosting page: paste the artifact link and it pulls the page in as an index.html you can publish. If you would rather move the file by hand, copy the HTML out of the artifact's code view, save it as index.html, then zip it and upload the ZIP, because that uploader takes an archive even when there is only one file in it.

Either way you end up with a clean URL and a page that keeps working long after the original chat is gone. Static.app is free to start: a new account opens on a 7-day trial covering one website with 50 MB of storage, a yoursite.static.domains subdomain, and an SSL certificate, with no credit card asked for. Publishing after that trial, and using a custom domain at all, needs a paid plan, see pricing. The step-by-step walkthrough lives in how to host a Claude artifact as a live website.

If you want to inspect the markup before you publish it, paste it into the HTML viewer to see it render, or tidy the indentation with the HTML formatter. Neither one uploads your file anywhere.

Common questions

The five answers below cover what artifacts cost, why Claude sometimes does not open one, whether viewers need a Claude account, whether you can use your own domain, and what happens to an artifact when you delete the chat.

Are Claude artifacts free?

Yes. Artifacts are available on the Free plan and on every paid tier. Publishing a public link works on Free, Pro, and Max. The capability toggle under Settings, then Capabilities, has to be enabled. A few extras, such as connecting to outside services through MCP, need Pro or higher. Plan gates as of August 2026.

Why is Claude not creating an artifact for me?

Two usual causes. Either "Code execution and file creation" is switched off in your settings, or the output is too small and Claude judged it not worth a panel. Asking for a complete, self-contained file rather than a fragment normally triggers one.

Can people see my artifact without a Claude account?

Yes, if you published it from a Free, Pro, or Max account: anyone with the link can open and use it without signing up. No, if you shared it from a Team or Enterprise account, because viewers have to authenticate with an account in your organization.

Can I use my own domain for an artifact?

Not on Claude's own link, which always lives on an Anthropic address. To put your work on your own domain, host the artifact yourself as a static website and connect the domain there. On Static.app a custom domain needs a paid plan, see pricing.

Do interactive artifacts still work once they are hosted elsewhere?

Interactive artifacts keep working on static hosting such as Static.app. Anything that runs in the browser survives the move, which covers HTML, CSS, and client-side JavaScript, including most React components once they are built. The exception is an artifact that calls back to Claude while it runs, because that feature belongs to Claude's own environment and has no equivalent on plain static hosting.

What happens to my artifact if I delete the chat?

Deleting the conversation deletes the artifact with it. Export anything you want to keep: copy the code out, or publish the page to hosting of your own, and you have a copy that does not depend on the chat surviving.

Back to all guides