Set your React
components free
Your Claude artifacts deserve more than a chat window.
Preview them instantly on your Mac.
Free and open source · Built by Michelle Mayes
What is Terrarium?
Terrarium is a free, open-source macOS application that instantly previews React components directly from .tsx and .jsx files. It's built for developers who generate UIs with Claude AI or write components by hand, and it removes the friction of spinning up a full project just to see one component render.
Open a file — via drag-and-drop, the terrarium CLI, or double-click — and Terrarium bundles it with esbuild, automatically installs any npm dependencies the file imports, and displays the rendered result in under a second. Every file save triggers an instant re-bundle and re-render, so editing alongside Claude Code or any external editor keeps the preview live.
Tailwind CSS v3 works out of the box, errors appear in a collapsible banner with line numbers, and the last good render stays visible while you debug. Terrarium is MIT-licensed and runs on macOS 12 or later.
New here? Read the install & first-run guide →
How does Terrarium work?
Generate
Build any React component in Claude — a dashboard, a chart, a mini-app.
Export
Save the artifact as a .tsx file or copy the code to your machine.
Preview
Open it in Terrarium. Dependencies install automatically, rendering is instant.
What features does Terrarium include?
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.
Frequently asked questions
Answers to common questions about Terrarium. For deeper detail, browse the full docs.
What is Terrarium?
Terrarium is a free, open-source macOS application that instantly previews React components from .tsx and .jsx files. It bundles your component with esbuild, automatically installs any npm packages the file imports, and displays the rendered result in under a second — with no package.json and no build configuration.
How does Terrarium work with Claude Code?
Run terrarium in one terminal and Claude Code in another, both pointed at the same .tsx file. Every save from Claude Code triggers an instant re-bundle and re-render in Terrarium, so you see changes live as Claude iterates on your component.
What file types does Terrarium support?
Terrarium supports .tsx and .jsx files. Open them via drag-and-drop onto the dock, the file picker, double-click in Finder, or the terrarium myfile.tsx CLI command.
What are the system requirements?
Terrarium runs on macOS 12 (Monterey) or later and requires Node.js 18 or later for bundling and dependency installation.
How much does Terrarium cost?
Terrarium is free and open source under the MIT License. The full source code is available at github.com/michellemayes/terrarium.
Install with Homebrew
Open source and auditable. Terrarium executes the code inside the files you open in order to render them — only open .tsx and .jsx files you trust, just as you would any other executable.