Documentation
Terrarium docs
Everything you need to install Terrarium, preview your first React component, and wire it into your Claude Code workflow.
Terrarium is a free, open-source macOS app that turns any .tsx or .jsx file into a live-rendering React preview. There is no package.json, no build configuration, and nothing to set up beyond the install. Open a file, and Terrarium reads its imports, installs the npm dependencies it needs, bundles everything with esbuild, and shows you the rendered output in under a second.
These docs are short on purpose. Most of what you need to know is on the next two pages: how to install Terrarium and run your first file, and how to pair it with Claude Code so every save re-renders live.
Where to start
Install & first run →
Install Terrarium with Homebrew, drop your first .tsx file, and learn the four ways to open files.
Using with Claude Code →
Pair Terrarium with Claude Code for a chat-driven dev loop where every save instantly re-renders.
Troubleshooting →
Fixes for missing dependencies, esbuild errors, file watcher quirks, and macOS Gatekeeper warnings.
Changelog →
Every release of Terrarium with a summary of the features, fixes, and changes.
What Terrarium is for
Terrarium is built for the gap between “I generated a React component in Claude” and “I'd like to actually see it run.” If you have ever copied an artifact out of a chat window and immediately wished you didn't need to spin up a whole project just to render it, Terrarium is for you. It is also for designers and developers who want to prototype components with Tailwind without booting a dev server, and for anyone using Claude Code who wants a live preview alongside the agent.
It is not a replacement for a full project, a build system, or an IDE. It is a fast viewer with the smallest possible setup footprint.