How Claude's Artifacts System Supports React, HTML, and Markdown with Special Rendering

Claude's artifacts system enables the model to emit self-contained files that render directly in the UI, supporting React components, HTML pages, and Markdown documents with automatic SVG and Mermaid diagram rendering.

Claude's artifacts system, as defined in the leaked system prompts from the asgeirtj/system_prompts_leaks repository, provides a structured way for the model to generate interactive content beyond plain text. This architecture allows Claude to create executable React components, standalone HTML pages, and formatted Markdown documents, each with specific rendering rules and security constraints enforced by the frontend sandbox.

Core Architecture and MIME Types

The artifacts system operates on a strict MIME-type classification that determines how the UI renders each generated file. According to the system prompt defined in Anthropic/old/claude-sonnet-4.md, the backend wraps artifact content in <artifact> tags with specific MIME types, triggering specialized renderers in the frontend.

Supported Artifact Types

The system recognizes three primary content types for interactive UI generation:

• application/vnd.ant.react — Renders single-file React components in a sandboxed iframe with automatic JSX evaluation
• text/html — Displays complete HTML documents including embedded JavaScript and CSS
• text/markdown — Formats text-heavy content with support for special diagram rendering

Each type enforces a single-file constraint requiring all code, styles, and assets to be self-contained within the artifact content. External resources are restricted to approved CDNs only, specifically https://cdnjs.cloudflare.com for HTML artifacts.

Creating React Components in Claude's Artifacts System

React artifacts allow Claude to generate interactive UI components that execute immediately in the conversation interface. The system prompt in Anthropic/old/claude-sonnet-4.md specifies strict requirements for React component structure to ensure safe execution in the frontend sandbox.

React Artifact Requirements

When generating React components, Claude must adhere to specific architectural constraints:

• Default Export: The component must use export default with no required props
• Hook Imports: React hooks must be imported explicitly at the top of the file
• Tailwind Limitations: Only Tailwind core utility classes are permitted; no custom Tailwind configuration is available
• Storage Restrictions: localStorage and sessionStorage are prohibited; state must persist using React hooks or JavaScript variables only

These constraints are enforced to prevent security vulnerabilities in the sandboxed iframe environment where React components execute.

Code Example: Interactive React Counter

The following artifact demonstrates a compliant React component using Tailwind styling and React hooks:

{
  "command": "create",
  "id": "counter-react",
  "type": "application/vnd.ant.react",
  "title": "Counter Component",
  "content": "import { useState from \"react\"\n\nexport default function Counter() {\n  const [count, setCount] = useState(0)\n  return (\n    <div className=\"p-4 flex flex-col items-center bg-gray-100 rounded\">\n      <h2 className=\"text-xl font-bold mb-2\">React Counter</h2>\n      <span className=\"text-4xl mb-4\">{count}</span>\n      <button\n        className=\"px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700\"\n        onClick={() => setCount(c => c + 1)}>\n        Increment\n      </button>\n    </div>\n  )\n}\n"
}

When Claude emits this artifact, the UI creates a sandboxed React environment, evaluates the JSX, and renders the interactive counter with working state management.

Building HTML Pages with Claude's Artifacts System

HTML artifacts provide a way to generate complete web pages with embedded JavaScript, CSS, and SVG graphics. According to the system prompts in Anthropic/old/claude-opus-4.5.md and Anthropic/old/claude-4.5-sonnet.md, HTML artifacts follow specific sandboxing rules to ensure security while allowing rich content.

HTML Artifact Specifications

HTML artifacts must conform to strict self-containment requirements:

• Single File Requirement: All HTML, CSS, and JavaScript must exist within one artifact; no external file references
• CDN Restrictions: External scripts may only load from https://cdnjs.cloudflare.com to prevent malicious resource loading
• Iframe Sandboxing: Content renders in an isolated iframe to prevent access to the parent conversation context

These rules ensure that HTML artifacts can display complex layouts and interactive elements without compromising the security of the Claude interface.

Code Example: HTML Page with Embedded SVG

The following artifact demonstrates a complete HTML page with inline SVG that receives special rendering treatment:

{
  "command": "create",
  "id": "welcome-html",
  "type": "text/html",
  "title": "Welcome Page",
  "content": "<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n  <meta charset=\"UTF-8\" />\n  <title>Claude Demo</title>\n  <style>body{font-family:sans-serif;padding:2rem;}</style>\n</head>\n<body>\n  <h1>Hello from Claude</h1>\n  <!-- Inline SVG – UI will render it as a graphic -->\n  <svg width=\"120\" height=\"120\" viewBox=\"0 0 120 120\">\n    <circle cx=\"60\" cy=\"60\" r=\"50\" fill=\"#4F46E5\" />\n    <text x=\"60\" y=\"68\" font-size=\"24\" fill=\"white\" text-anchor=\"middle\">AI</text>\n  </svg>\n</body>\n</html>"
}

When rendered, the UI detects the text/html MIME type and creates an iframe containing the complete page. The embedded <svg> element receives special rendering treatment, displaying as a vector graphic rather than code.

Markdown Documents and Special Rendering

Markdown artifacts in Claude's system serve as the primary format for text-heavy content, documentation, and structured data. Unlike standard chat responses, Markdown artifacts render in a dedicated viewer that supports special diagram syntax and formatted text.

Markdown Artifact Capabilities

The text/markdown MIME type triggers a specialized renderer that processes standard Markdown syntax with additional enhancements:

• Formatted Text: Full support for headers, lists, tables, and code blocks
• Copy-Paste Optimization: Content is isolated in a dedicated container for easy extraction
• Diagram Integration: Native support for Mermaid diagram syntax without requiring fenced code blocks

According to the system prompt in Anthropic/old/claude-sonnet-4.md, Markdown artifacts are particularly suited for guides, reference documentation, and data tables that benefit from structured formatting.

Mermaid Diagram Auto-Rendering

A unique feature of Claude's artifacts system is the automatic rendering of Mermaid diagrams when included in Markdown or HTML content. The system prompt specifies that Mermaid code placed directly in the artifact (not surrounded by code fences) triggers the diagram renderer.

The following artifact demonstrates a Markdown document containing a Mermaid flowchart:

{
  "command": "create",
  "id": "guide-md",
  "type": "text/markdown",
  "title": "Quick Guide",
  "content": "# Quick Reference\n\n- **React**: use `application/vnd.ant.react`.\n- **HTML**: use `text/html` for full pages.\n- **Markdown**: use `text/markdown` for docs.\n\n```mermaid\nflowchart TD\n    A[User Prompt] --> B[Claude]\n    B --> C{Artifact?}\n    C -->|React| D[React Sandbox]\n    C -->|HTML| E[Iframe]\n    C -->|Markdown| F[Markdown Viewer]\n```"

}

When the UI processes this artifact, it detects the Mermaid syntax and renders an interactive flowchart diagram automatically, as implemented in the rendering pipeline defined in Anthropic/old/claude-sonnet-4.md.

Security Constraints and Rendering Limitations

Claude's artifacts system implements strict security boundaries to ensure that generated content cannot access sensitive browser APIs or compromise the conversation interface. These constraints are hardcoded in the system prompts across multiple model versions.

Storage API Restrictions

According to the artifact definition in Anthropic/old/claude-sonnet-4.md, browser storage APIs are explicitly prohibited within all artifact types:

• localStorage: Completely disabled in the sandbox environment
• sessionStorage: Unavailable to prevent cross-session data persistence
• State Management: All state must be maintained using React hooks (useState, useReducer) or plain JavaScript variables

These restrictions prevent artifacts from persisting data between conversations or accessing sensitive browser storage mechanisms.

Styling Limitations for React Artifacts

React components within Claude's artifacts system face specific styling constraints to ensure consistent rendering across the platform. The system prompt in Anthropic/old/claude-sonnet-4.md specifies that:

• Tailwind Only: Only Tailwind CSS core utility classes are permitted
• No Custom Configuration: Custom Tailwind configurations or @apply directives are not supported
• No External Stylesheets: All styling must be inline via Tailwind classes or inline styles

This limitation exists because the React sandbox does not include a Tailwind compiler, relying instead on pre-loaded core utilities.

Source Code References

The technical specifications for Claude's artifacts system are documented across several system prompt files in the asgeirtj/system_prompts_leaks repository:

File Path	Description
Anthropic/old/claude-sonnet-4.md	Primary definition of artifact types, MIME types, and rendering rules (lines 63-84); includes storage restrictions (lines 52-60) and Tailwind limitations (lines 82-84)
Anthropic/old/claude-opus-4.5.md	Reiterates the rendering table for React, HTML, and Markdown artifacts (lines 314-322)
Anthropic/old/claude-4.5-sonnet.md	Confirms backward-compatible artifact rendering contracts for newer model families (lines 390-398)
Anthropic/old/claude-3.7-sonnet-w-tools.md	Documents early HTML-in-artifact rules and fallback behaviors
readme.md	Repository root documentation linking to the public GitHub preview site

These files collectively define the architectural contract governing how Claude constructs, types, and safely renders interactive content within the conversation interface.

Summary

Claude's artifacts system provides a structured mechanism for generating interactive, self-contained files directly within the conversation interface. Key takeaways include:

• Three Core Types: The system supports application/vnd.ant.react for components, text/html for full pages, and text/markdown for documentation
• Special Rendering: SVG elements and Mermaid diagrams receive automatic graphical rendering without requiring code fences
• Strict Sandboxing: All artifacts execute in isolated environments with localStorage and sessionStorage explicitly disabled
• Single-File Constraint: Each artifact must be self-contained, with external resources limited to approved CDNs like Cloudflare
• Styling Rules: React artifacts support only Tailwind core utility classes, while HTML artifacts allow inline styles and standard CSS

Frequently Asked Questions

What MIME type does Claude's artifacts system use for React components?

Claude's artifacts system uses the custom MIME type application/vnd.ant.react to identify React components. When the frontend detects this MIME type, it initializes a sandboxed React environment that compiles and executes the JSX code, rendering the component in an isolated iframe with access to React hooks but no access to browser storage APIs.

Can I use external libraries in HTML artifacts?

External libraries are permitted in HTML artifacts but only from specific approved sources. According to the system prompt in Anthropic/old/claude-sonnet-4.md, external scripts may only load from https://cdnjs.cloudflare.com. All other external resources are blocked to prevent cross-origin security vulnerabilities. All CSS and JavaScript must otherwise be embedded directly in the single HTML file.

Why can't I use localStorage in Claude artifacts?

The artifacts system explicitly prohibits localStorage and sessionStorage to maintain security isolation between conversations and prevent data persistence that could leak across sessions. As documented in Anthropic/old/claude-sonnet-4.md (lines 52-60), state management must rely entirely on React hooks like useState or plain JavaScript variables that exist only during the component's lifecycle.

How does Mermaid rendering work in Markdown artifacts?

Mermaid diagrams render automatically when included in Markdown artifacts without surrounding code fences. When the frontend processes a text/markdown artifact containing Mermaid syntax, it detects the diagram markup and renders it as an interactive flowchart or graph. This special rendering path, defined in Anthropic/old/claude-sonnet-4.md (lines 75-78), allows technical documentation to include complex visual diagrams alongside formatted text.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}