Set your React
components free
Claude generates beautiful React artifacts — interactive dashboards, data visualizations, mini-apps — but they live trapped inside a chat window. Terrarium sets them free.
How it works
Generate
Build an artifact in Claude — a dashboard, a form, a game, a chart — anything that renders as a React component.
Export
Download the artifact as a .tsx or .jsx file, or copy the code into a new file on your machine.
Preview
Open the file in Terrarium. It auto-installs dependencies, bundles with esbuild, and renders instantly.
Everything you need
Nothing you don't.
Zero config
Auto-detects npm imports and installs dependencies. No package.json, no setup, no fuss.
Live reload
File watcher re-bundles and re-renders on every save. Edit in any editor — Terrarium keeps up.
Tailwind built in
Tailwind CSS v3 works out of the box with build-time generation. Just write your utility classes.
Error overlay
Build errors appear in a collapsible banner with line numbers. Your last good render stays visible.
Open anywhere
Double-click, drag-and-drop onto the dock, file picker, or terrarium myfile.tsx from the CLI.
Claude Code ready
Run terrarium in one terminal, Claude Code in another. Every save from Claude live-reloads the preview.
From file to render
in milliseconds.
export default function Counter() {
const [count, setCount] = useState(0)
return (
<button
onClick={() => setCount(c => c + 1)}
className="px-6 py-3 rounded-xl ..."
>
Count: {count}
</button>
)
}Live — watching counter.tsx
Ready to get started?
Available for macOS 12+ · Requires Node.js 18+
Install with Homebrew
or download the latest release
Download for Mac