⚛ JSX Artifact Preview

Preview single-file React artifacts (.jsx & .tsx) directly in VSCode — no project scaffolding required.

Open a .jsx or .tsx file from Downloads. See it rendered. No Vite, no Next.js, no setup.

Demo — open a JSX file and see it rendered instantly

Why This Exists

AI coding tools like Claude Code, ChatGPT, Copilot, and others generate single-file React artifacts (.jsx or .tsx) — a landing page, a dashboard, a component mockup — and let you open them in VSCode. But VSCode has no built-in way to render that file. You'd need to:

Spin up a Vite/CRA project
Copy the file in
Rename the default export
Start a dev server

That's a 10-minute setup for a 30-second review.

This extension closes that gap. Open the artifact, see it rendered, iterate — right inside VSCode.

The Solution

JSX Artifact Preview renders single-file React artifacts (.jsx and .tsx) in a VSCode side panel. TypeScript annotations are automatically stripped at preview time — no tsconfig needed. Same output you'd see in a browser-based artifact viewer, without leaving the editor and without project scaffolding.

Features

Auto-Preview Loose Files

Open a .jsx or .tsx file that's outside your workspace (e.g. from ~/Downloads) and the preview appears automatically. No command, no shortcut — just open the file.

Manual Preview Anywhere

For in-workspace files, use the keyboard shortcut or the editor title-bar button to open the preview on demand.

Hot Reload on Save

Save the file and the preview updates in-place. Scroll position is preserved — no jumping back to the top.

Friendly Error Overlay

Syntax errors, missing imports, and runtime crashes show as a clean overlay card with line numbers — not a blank screen.

Zero Config Required

Works out of the box. React 18 and Babel are loaded from CDN inside the webview. No node_modules, no bundler, no config files.

Non-Blocking Architecture

All compilation runs inside the webview process. The editor stays responsive even if your file takes seconds to compile.

Quick Start

Install

From .vsix (pre-release):

code --install-extension jsx-artifact-preview-0.1.0.vsix

From Marketplace (when published):

ext install zinkosoft.jsx-artifact-preview

Use

Action	How
Auto-preview	Open any `.jsx`/`.tsx` file outside your workspace
Manual preview	Cmd+Shift+V (Mac) / Ctrl+Shift+V (Win/Linux)
Title-bar button	Click the preview icon in the editor toolbar
Hot reload	Just save the file

Configuration

All settings are under jsxArtifactPreview.* in your VSCode settings.

Setting	Type	Default	Description
`autoPreviewLooseFiles`	`boolean`	`true`	Auto-open preview for `.jsx`/`.tsx` files outside the workspace
`injectFonts`	`array`	`[]`	Pre-register `@font-face` declarations in the preview (see below)

Custom Font Injection

If your artifacts consistently use a specific font, you can pre-register it so it's available before user code runs:

// settings.json
{
  "jsxArtifactPreview.injectFonts": [
    {
      "family": "Inter",
      "weight": "100 900",
      "url": "https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2"
    }
  ]
}

Font URLs that 404 or have CORS issues silently fall back to the system font stack.

How It Works

┌──────────────────┐       postMessage         ┌──────────────────────────┐
│  Extension Host  │ ──────(raw source)──────▶ │     Webview (Chromium)   │
│                  │                           │                          │
│  • Reads file    │                           │  1. Strip/rewrite imports│
│  • Watches saves │                           │  2. Rewrite exports      │
│  • Opens panel   │                           │  3. Babel.transform(JSX) │
│                  │ ◀────(log messages)────── │  4. eval() compiled code │
│  • Output channel│                           │  5. ReactDOM.render()    │
└──────────────────┘                           └──────────────────────────┘

Key design constraint: the extension host does no compilation. All Babel transforms, import rewriting, and React rendering happen inside the webview's Chromium process. This guarantees the editor stays responsive regardless of file size or complexity.

Import Allowlist

The preview environment supports a curated set of imports. Unknown imports fail with a clear error naming the package.

Phase	Imports	Status
1 (current)	`react`, `react-dom`	Available
2 (planned)	`lucide-react`, `recharts`, `d3`, `framer-motion`	Coming soon
3 (maybe)	`shadcn/ui`, Tailwind runtime	Under consideration

If your file declares its own <style> or @font-face inline, those work naturally — no configuration needed.

Debugging

Open the Output panel (Cmd+Shift+U) and select JSX Artifact Preview from the dropdown. The log shows:

Every import detected and how it was rewritten
Export transformations applied
Babel compile timing
Render success/failure with elapsed time
Full error messages with stack traces

Roadmap

[x] Single-file JSX preview with React 18
[x] Auto-preview for loose (non-workspace) files
[x] Hot reload on save with scroll preservation
[x] Error overlay with line numbers
[x] Configurable font injection
[x] Output channel logging
[ ] Expanded import allowlist (Phase 2)
[ ] VSCode theme passthrough to preview
[ ] TypeScript-first compilation (SWC-wasm)
[ ] Claude Code extension integration

Requirements

VSCode 1.80 or later
Internet connection for initial load (React and Babel are fetched from CDN)

Contributing

Clone the repo
npm install
npm run compile
Press F5 in VSCode to launch the Extension Development Host

# Package for distribution
npx @vscode/vsce package

License

MIT

_{Built for fast design review loops on AI-generated React artifacts.}

JSX Artifact Preview

Zinkosoft