Using Terrarium with Claude Code

Terrarium and Claude Code are complementary tools. Claude Code edits files; Terrarium watches them. Run them side by side and you get a chat-driven dev loop where you can ask for a change in plain English, watch Claude Code save the file, and see the rendered result update in real time without ever switching context to a browser, a build server, or an IDE.

Setup in 30 seconds

You need two terminal panes (or two windows, or a tmux split). One runs Terrarium watching your file; the other runs Claude Code pointed at the same file.

terrarium dashboard.tsx

claude "add a dark mode toggle to dashboard.tsx"

When Claude Code saves dashboard.tsx, Terrarium picks up the change, re-bundles, and re-renders. There is no manual refresh, no “reload preview” button, and no extension to install — the file watcher is already running.

The loop

1. Generate or open a starter file. Either copy a Claude artifact out of a chat window into a .tsx file, or ask Claude Code to create one from scratch.
2. Open it in Terrarium. Run terrarium yourfile.tsx in one terminal. The first render kicks off dependency installation if needed, then shows your component.
3. Ask Claude Code for changes. Use natural language — “make the chart bars violet,” “add a loading skeleton,” “extract the row component into its own helper.”
4. Watch the preview update. Each save Claude Code makes triggers a Terrarium re-render. If a change introduces a build error, the error banner appears with the file and line, and your previous good render stays behind it.
5. Keep iterating. Repeat until the component is where you want it. There is no commit, push, or deploy step in this loop — Terrarium is purely local.

Why this is fast

The reason this loop feels instant is that Terrarium does not boot a dev server, does not reload a browser tab, and does not need to tear down and rebuild a project on each change. It uses esbuild (one of the fastest JavaScript bundlers in the ecosystem) and renders directly into a native window through Tauri. A typical re-render after a save lands in well under a second on Apple Silicon, and the only thing standing between “Claude saved the file” and “you see the change” is the incremental bundle plus React reconciliation.

Compared to the alternative — opening a project in VS Code, running npm run dev, waiting for the dev server, switching to a browser, refreshing — the Terrarium + Claude Code loop is roughly the difference between a build and a hot reload.

Tips for a good session

• Keep one file per session. Terrarium watches the file you opened, not a directory. If Claude Code creates new files, point Terrarium at whichever one is the entry component.
• Use the default export as your canvas. Terrarium renders the default export. Helper components defined in the same file are fine, but only the default export is shown.
• Let dependency installs settle. The first time you import a new package (say, you ask Claude Code to add recharts), Terrarium will install it during the next render. Once installed, subsequent renders are instant.
• Use the error banner as a feedback channel. When Claude Code makes a change that breaks the build, the error banner shows you the file, line, and message. Paste that back into Claude Code and ask it to fix the specific error — it works.