Claude Code Artifacts and Dashboards

Claude Code Artifacts turn a prompt into a live, shareable web page. You describe a dashboard, chart, or interactive tool. Claude Code writes the HTML, publishes it to a hosted URL on claude.ai, and hands you a link you can share with your team.

This is not a screenshot or a static mockup. Artifacts are real HTML pages with working CSS, JavaScript, and interactivity. They render in light and dark mode, work on mobile, and can include Mermaid diagrams, data tables, forms, and calculators.

This guide covers what Claude Code artifacts can build, how the publishing system works, design constraints you need to know, and business workflows where artifacts replace heavier tools.

What Claude Code artifacts are

Artifacts are HTML or Markdown files that Claude Code writes and publishes to hosted URLs on claude.ai. Each artifact gets a unique, shareable link. The page renders in a browser like any website, with full CSS and JavaScript support.

The key difference from a code snippet is that artifacts are live. Claude Code does not just write the code and hand it to you to deploy. It publishes the page and gives you a working URL in the same step. You can share the link in Slack, embed it in a doc, or bookmark it for daily review.

Artifacts are private by default. Only people with the link can see them. The owner can update the artifact by editing the file and republishing. The URL stays the same, so bookmarks and shared links keep working.

• HTML or Markdown files published to hosted URLs.
• Shareable via link. Private by default.
• Full CSS and JavaScript support.
• Updatable: same URL persists across edits.

Types of Claude Code dashboards you can build

KPI dashboards are the most common artifact type. Claude Code reads your data, builds charts and stat tiles, and publishes a page that shows key metrics at a glance. Teams use these for weekly reporting, project status, and executive summaries.

Interactive tools are the second most valuable category. Claude Code can build calculators, ROI estimators, decision matrices, and scoring tools as self-contained HTML pages. These work without a backend because all logic runs in the browser.

Data visualizations include bar charts, line charts, scatter plots, heatmaps, and comparison tables. Claude Code inlines all CSS and JavaScript, so charts render without any external library CDN. Mermaid diagrams are supported natively for flowcharts, sequence diagrams, and architecture views.

Reports and documentation artifacts work well for client-facing summaries, audit reports, and project retrospectives. They render with clean typography, responsive layouts, and automatic dark mode support.

• KPI dashboards: metrics, stat tiles, and trend charts.
• Interactive tools: calculators, estimators, and scoring matrices.
• Data visualizations: charts, heatmaps, and comparison tables.
• Mermaid diagrams: flowcharts, sequence diagrams, and architecture views.
• Reports: client summaries, audit results, and project retrospectives.

How artifact publishing works

Claude Code writes the HTML file locally, then calls the Artifact tool to publish it. The tool uploads the file to claude.ai hosting, assigns a URL, and returns the link. The entire process happens in one step.

When updating an existing artifact, Claude Code edits the same local file and republishes. The URL stays the same. This means you can share a dashboard link on Monday, update the data on Friday, and everyone who bookmarked the link sees the latest version.

Each artifact gets an emoji favicon for the browser tab, a title for the gallery and tab bar, and a description for the gallery card. These help teams find and organize artifacts when they have many published pages.

• One-step publish: write the file, call the tool, get a live URL.
• Stable URLs: updates republish to the same link.
• Gallery: title, description, and emoji favicon for organization.
• Version history: previous versions are accessible for comparison.

Claude Code artifact design constraints

Artifacts must be self-contained. A strict Content Security Policy blocks all requests to external hosts. No CDN scripts, external stylesheets, Google Fonts, or remote images. All CSS and JavaScript must be inlined. Images must be embedded as data URIs.

This constraint is a feature, not a limitation. Self-contained pages load instantly, never break due to CDN outages, and have no third-party tracking. Every dependency is visible in the source code.

Artifacts must be theme-aware. Pages render in the viewer's light or dark theme. Use CSS media queries for prefers-color-scheme and data-theme attributes on the root element. Both must work because viewers can toggle themes manually.

Artifacts must be responsive. Use relative units, flexbox or grid layouts, and max-width:100% on images. Wide content like tables and code blocks must scroll inside their own containers. The page body must never scroll horizontally.

• Self-contained: no external scripts, stylesheets, fonts, or images.
• Theme-aware: support both light and dark mode via CSS.
• Responsive: work on mobile, tablet, and desktop.
• No external requests: strict CSP blocks all outbound network calls.
• Mermaid natively supported: no library import needed.

Business use cases for Claude Code dashboards

Weekly KPI reviews become self-serve. Instead of building slides or copying numbers into a spreadsheet, ask Claude Code to read your data source and publish an updated dashboard. Share the same link every week. Stakeholders bookmark it and check whenever they want.

Client-facing reports replace PDF exports. A consulting team can publish an interactive report with charts, drill-down sections, and a clean layout. The client opens a link instead of downloading a file. Updates are instant because the URL stays the same.

Internal tools replace spreadsheet hacks. Teams that maintain complex spreadsheets for calculations, scoring, or planning can ask Claude Code to build a proper tool with validation, clear labels, and a better interface. No backend needed because the logic runs in the browser.

Sprint retrospectives and project postmortems get a sharable artifact instead of a long document. Claude Code can build a structured page with timeline, metrics, key decisions, and action items.

• Weekly KPI dashboard with a stable, bookmarkable URL.
• Client reports: interactive, no-download, instant updates.
• Internal tools: replace complex spreadsheets with proper interfaces.
• Retrospectives: structured, shareable project summaries.

Artifact runtime capabilities

Some artifacts can go beyond static HTML when runtime capabilities are enabled. These optional features let a published page read live data, keep state shared between viewers, or update itself on a schedule.

Live data capabilities let an artifact fetch fresh information each time it loads. Instead of hardcoded numbers, the dashboard pulls current metrics. This turns a snapshot into a live monitoring page.

Shared state lets multiple viewers see the same data. When one person updates a value, others see the change. This works for collaborative tools like voting boards, status trackers, and shared planning matrices.

Not every artifact needs runtime capabilities. Most dashboards and reports work fine as static pages with hardcoded data that gets updated through republishing. Use runtime capabilities only when the use case genuinely requires live or shared data.

• Live data: artifact fetches fresh data on each load.
• Shared state: multiple viewers see the same values in real time.
• Self-updating: page can republish itself on a schedule.
• Optional: most artifacts work well as static HTML without runtime features.

How to prompt for effective dashboards

Good dashboard prompts define the decision the dashboard supports, not just the metrics to display. Ask Claude Code to build a dashboard that helps you decide whether to increase ad spend, not one that shows ad metrics. The decision focus produces better layout, metric selection, and visual hierarchy.

Include sample data in your prompt or reference a file Claude Code can read. Dashboards built on realistic data look better and expose layout problems that sample data like 1, 2, 3 would hide. If your data is sensitive, use anonymized or synthetic data with realistic distributions.

Specify the audience. An executive dashboard should show five numbers and a trend. An operations dashboard should show twenty metrics with drill-down. A client dashboard needs clean branding and clear labels. Claude Code adjusts complexity based on who will use the page.

Ask for interactivity when it adds value. Filters, toggles between time ranges, and expandable sections make dashboards more useful. But do not add interactivity for its own sake. A simple stat page that answers one question is often better than a complex dashboard.

• Define the decision, not just the metrics.
• Provide realistic sample data for better layouts.
• Name the audience: executive, operations, or client.
• Request interactivity only when it genuinely helps the user.

Artifact limitations to know

Artifacts cannot make network requests. The CSP blocks fetch, XHR, WebSocket, and any outbound connection. All data must be embedded in the HTML or provided through runtime capabilities if enabled.

Artifacts are not production applications. They are published to claude.ai hosting for sharing and review. If you need authentication, user management, or a custom domain, build a proper web application and use the artifact as a prototype.

File size limits apply. Very large datasets embedded in HTML can slow page loads. For dashboards with more than a few thousand data points, summarize the data before embedding or use pagination in the interface.

Artifacts cannot import npm packages or external frameworks. All code must be vanilla HTML, CSS, and JavaScript. This is a tradeoff: you lose library convenience but gain complete portability and zero dependency risk.

• No network requests: all data must be embedded or provided via runtime capabilities.
• Not production apps: no auth, custom domain, or user management.
• File size: large datasets should be summarized before embedding.
• No npm packages: vanilla HTML, CSS, and JavaScript only.