Code Mode

Code Mode is Zaru's vibe-coding canvas. You describe what you want to build, Zaru writes the files directly into a workspace, and a live preview renders beside the chat. No local dev environment, no terminal, no build toolchain — just describe, watch, and iterate.

---

How It Works

1. Start a canvas session — either:
   • Switch to Code mode using the mode selector in the chat toolbar — an ephemeral canvas session provisions automatically on your first message; or
   • Open The Studio from the sidebar and create a new canvas session (ephemeral, persistent, or git-linked).
2. Describe your app in chat. Zaru writes files directly to the workspace volume.
3. The preview panel on the right renders your app as files land.
4. Iterate — ask for changes, Zaru edits the files, the preview updates.
5. For git-linked workspaces, commit and push from the git panel when you're ready.

---

The Studio

The Studio is Code Mode's split-pane canvas: chat on the left, an optional code editor in the middle, and the live preview on the right. The editor is there when you want to tweak something by hand and is collapsible when you don't — most sessions live comfortably in the chat-and-preview view, with the editor as a drop-down when you need it.

The right-side context panel exposes three tabs — Scripts, Files, and Tools — giving you direct access to saved scripts, the workspace file tree, and the available SEAL tools without leaving the canvas.

Scripts Tab

Code Mode shares the Scripts tab with Live Mode. Any TypeScript program you've saved via Zaru (in either mode) shows up in the right-side context panel with the same Run / Insert / Fork / Delete actions. Handy for reusing utility scripts — data transforms, agent lookups, formatting helpers — inside your canvas sessions.

---

Workspace Modes

---

Git Workflow

Code Mode treats writing files and publishing changes as two different things. File edits are the fast creative loop — Zaru writes freely so you can iterate without friction. Commits and pushes touch a remote and can't be undone, so by default Zaru writes files and waits for your go-ahead before publishing anything.

• Review changes in the Git Panel beside the preview — inline diffs per file.
• Click Commit when you're ready. The commit message is optional; ask Zaru to suggest one if you'd like.
• Click Push to publish to the remote.
• If you say "commit this" or "push it" in chat, Zaru will do it for you.

---

Example

A short session in Code Mode:

You: Build me a simple todo list app. Plain JS, no frameworks.

Zaru: (writes index.html, app.js, and style.css in one pass) I've scaffolded a todo list with add / toggle / delete. Check the preview — you can start adding items right away.

You: Make the completed items strike-through instead of grayed out.

Zaru: (updates style.css) Updated — completed items now show with a strike-through.

Notice that Zaru writes the code to the workspace rather than pasting it back into the chat. The preview is the source of truth; the editor is there if you want to inspect the files.

---

Limitations

• Preview runs entirely in your browser — no server-side rendering.
• No native Node modules and no complex build pipelines (Webpack configs, Next.js server functions, and similar setups are out of scope).
• .ts, .tsx, and .jsx files are transformed in-browser before preview. The transform supports standard TypeScript and JSX but not decorators, experimental syntax, or TypeScript-only features that require full type checking at compile time.
• Persistent workspaces count against your storage quota.
• Git-linked workspaces share the same repository lifecycle as regular git volumes.

---

Related

• Chat — the basic conversational mode
• Live Mode — execute TypeScript directly in chat (no file writes)
• The Workshop — manage workspace volumes and git repositories
• Execute Mode — one-shot intent-to-execution