Artifacts.js

Preview self-contained components and demos directly in VS Code -- no dev server, no project setup.

Artifacts.js previews Artifacts: files that mount, render something meaningful, and stand on their own without hidden app context. If a file needs external routing, stores, or required props, it is not an implicit Artifact -- but you can promote it with a .preview.* file.

Quick start

1. Open a standalone component (.jsx, .tsx, .vue, .svelte, .js, .ts, or .html)
2. Click the preview icon in the editor title bar
3. Edit and save -- the preview updates automatically

import { useState } from "react";

export default function Dashboard() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Visits: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
    </div>
  );
}

What is an Artifact?

An Artifact is a file that can be opened in isolation and still:

• mount successfully
• render something meaningful immediately
• communicate its purpose without hidden app context
• rely only on local state, local data, and local imports

Implicit Artifacts are files that satisfy these rules on their own (standalone demos, dashboards, interactive examples).

Explicit Artifacts are files promoted via a .preview.* file that provides the setup they need.

Not an Artifact

These are not implicit Artifacts and will show a warning instead of opening the preview:

• hooks, composables, stores, helpers (support modules)
• components that depend on app router, global stores, or app context
• components that accept {children} (React) or use a default <slot> (Vue/Svelte)
• modals, dialogs, drawers, and similar components that render nothing by default
• components with required props and no internal defaults
• files without a default export

The intended path for these is: create a .preview.* file.

Supported frameworks

Features

• HTML direct serve -- .html/.htm files are served as-is with live reload, no bundling step
• Zero config -- works on standalone files without node_modules
• Artifact qualification -- rejects non-Artifacts before opening the preview, no partial renders
• Preview files -- create Component.preview.jsx to promote any file into an Artifact
• CDN resolution -- third-party imports resolved via esm.sh with local caching
• Standard library pre-caching -- common artifact libraries (recharts, lodash, d3, three.js, etc.) are pre-cached on first activation for offline use
• Cache housekeeping -- cached CDN modules are refreshed on use, pruned automatically over time, and can still be cleared manually
• Tailwind CSS -- always available via CDN
• Loading indicator -- spinner overlay while bundles are being built
• CDN failure detection -- unreachable CDN modules surface a dedicated error
• Network sandbox -- fetch, XMLHttpRequest, sendBeacon, EventSource, and WebSocket are intercepted in the preview iframe
• Error overlay -- build and render errors shown inline with stack traces

Preview files

Create a .preview.* file beside any component to provide explicit setup:

// StatCard.preview.jsx
import StatCard from "./StatCard";

export default function Preview() {
  return <StatCard label="Revenue" value="$12,450" trend="+8.2%" />;
}

This is the official way to preview components that need props, data, providers, or any external setup.

Documentation