# Artifact Canvas
Source: https://ui.spencerwueste.com/docs/blocks/artifact-canvas/
Markdown: https://ui.spencerwueste.com/llm/blocks/artifact-canvas.md

> Chat beside a live preview and code tabs with a version switcher.

> Live preview: https://ui.spencerwueste.com/preview/artifact-canvas

## What's inside

- **Chat** on the left using Thread, Message, and Prompt Input.
- **Preview** renders each version's HTML in a sandboxed iframe.
- **Code** tab shows the source with Shiki highlighting and a copy button.
- **Version switcher** steps through history as the assistant makes changes.

## Installation

```bash
npx shadcn@latest add https://ui.spencerwueste.com/r/artifact-canvas.json
```

Manual install dependencies: `radix-ui @heroicons-animated/react motion`

Registry JSON: https://ui.spencerwueste.com/r/artifact-canvas.json

The registry item pulls in every component it depends on.

## Usage

```tsx
import ArtifactCanvas from "@/components/blocks/artifact-canvas/artifact-canvas";

export default function Page() {
  return (
    <div className="h-dvh p-4">
      <ArtifactCanvas />
    </div>
  );
}
```

Give the parent a bounded height. The block fills it and scrolls internally.

## Going live

Each assistant turn pushes a new `Version`. Have your model return the full artifact source per turn, or apply its diff to the previous version before pushing. For non-HTML artifacts swap the iframe for your renderer.