Editing workspace

Edit, refine, and continue your build in one workspace

Every Virex build opens in a workspace where you can chat with the agent, click directly on the page to change things, or open the code in Monaco — all next to a live preview that rebuilds as you save. The workspace is shaped for both beginners and developers, with a switchable layout that gets out of the way when you do not need it.

Back to docs How a build is generated

What it is

One workspace, three ways to change anything

The editing workspace is where you stay after Virex finishes the first build. The preview is always visible on the right. The chat and the code editor each get their own pane that you can show or hide. Everything you do — typing in chat, clicking on the page, editing a file — flows into the same project, and the preview rebuilds automatically when files change.

Chat with the agent

Type what you want. The agent picks the right files, makes the change, and the preview refreshes. Use this for anything you can describe in a sentence — copy changes, color tweaks, adding a section.

Click on the preview

Hover over an element, click it, and write what should change. Best for small visual edits where it is easier to point than describe.

Edit code directly

Open the Monaco editor and edit any file. Save with Cmd+S and the preview rebuilds automatically. Edits made in Monaco do not use credits — the engine only runs when you ask through chat.

Workspace screenshot
(Code · Preview · Chat — Split view active)

Split view: Code on the left, live Preview on the right, Chat collapsible.

How to use it

Same workspace, three styles of work

The workspace adapts to how you prefer to build. Each style uses the same project state — switching between them is just a layout change.

Beginner — talk to the agent, watch it happen

You do not need to open any code. The chat on the left is enough. Type what you want changed in plain language and the agent figures out which files to touch. When it finishes you will see the preview refresh by itself.

Open your project — the preview shows on the right immediately.
Click in the chat box and write what should change. Examples: 'Change the headline to something shorter and bolder', 'Use a darker green for the buttons', 'Add a contact page'.
Press Enter and wait. The agent works through it in a few seconds, and the preview reloads with the change.
If something looks off, just say so in the chat — 'undo the last change' or 'the spacing on mobile got too tight'. The agent corrects from there.

You will not break anything

Every edit is saved as a layer on top of the original build. The Changes drawer (a small button in the toolbar, or press Cmd+D) lists what you have changed and includes a 'Revert all' button that puts the project back to its original state.

Regular builder — mix chat with quick code peeks

You know what HTML, CSS, and a React component look like, but you do not want to write everything by hand. The chat handles the heavy lifting; you flip to the code panel when you want to see what the agent did or make a tiny adjustment yourself.

Use chat for anything that takes more than a single line — adding a section, changing a layout, generating a new page.
Click the 'Code' button in the preview chrome (top-right) to open Monaco. The file tree on the left lists every file in your build with a dot next to the ones that have changed.
Open the file you want, change a word or a class, and press Cmd+S. The preview rebuilds in 10–30 seconds.
Use the click-to-edit mode (the pencil icon in the preview chrome) for visual tweaks where typing the path would be slower than pointing.
When you want to start fresh, the Changes drawer (Cmd+D) shows every file you have edited and lets you revert in one click.

No engine credits for Monaco edits

The agent costs credits because it runs the language model. Editing files yourself in Monaco does not — only the static rebuild runs, which is free. Use chat for the work that is hard to type, use Monaco for the work that is faster to type yourself.

Developer — IDE mode with split view and shortcuts

You want a real development surface inside the browser. Press Cmd+/ to switch to split view: Code and Preview side-by-side with a working keybinding set, an auto-rebuild loop on save, and a Cmd+K command palette for everything else. Chat is one Cmd+J away when you actually want the agent.

Press Cmd+/ to enter split view. Code on the left, Preview on the right. The pill in the preview chrome (Preview / Split / Code) confirms the mode.
Edit in Monaco. Auto-save is off by default; toggle it in the editor header, or press Cmd+S to save explicitly. Each save uploads the file overlay to storage and triggers a static rebuild of the preview.
Press Cmd+J to collapse the chat aside down to a thin rail. It comes back with Cmd+J or by clicking the rail. Use this when you want maximum horizontal room for code.
Press Cmd+K to open the command palette. Search for any action by name, jump to layout toggles, fire export actions, or feed a free-form prompt directly to the chat without leaving the keyboard.
Press Cmd+D to open the Changes drawer. It lists every path with an active overlay; 'Revert all' wipes the layer and rebuilds the base.
Push to GitHub from the toolbar when ready. The repo is standard Next.js (or Expo for mobile) — no Virex SDK, no lock-in.

Layout state is remembered

The workspace persists your split/collapse preference in localStorage per browser, so when you reload your project you get the same shape back. New users land on the chat-first layout; returning developers land on the layout they were in last.

Keyboard

Every shortcut, in one table

Workspace shortcuts use the Cmd key on macOS and Ctrl elsewhere. They never fire while you are typing in an input — Monaco's own bindings (cut, paste, find, comment, multi-cursor) stay intact.

Shortcut	What it does
Cmd+K	Open the command palette. Search any action or type a free-form prompt to send to the chat.
Cmd+/	Toggle split view — Code and Preview side-by-side.
Cmd+J	Toggle the chat aside. Collapses to a thin rail when off.
Cmd+D	Toggle the Changes drawer — every file with an active edit, plus Revert all.
Cmd+S	Save the current Monaco file. Triggers the preview rebuild.
Esc	Close the command palette or any open drawer.
↑ ↓ Enter	Inside the command palette: move the selection and confirm.

Command palette screenshot
(Cmd+K — Layout / Export / Edit actions)

Cmd+K opens the palette. Search by name or type any prompt and press Enter.

Edit paths

Chat, click-to-edit, or Monaco — and when to use each

The three paths all write to the same overlay. You can mix them freely; reverting drops the layer regardless of which path made the edit.

Chat (agent edit)

Best for: anything you can describe. Costs credits because the language model runs. Slowest but smartest — handles ambiguity, multi-file changes, and structural edits.

Click-to-edit

Best for: small visual changes where pointing is faster than typing. Toggle the pencil icon in the preview chrome, click an element, write the new copy or instruction. Uses a small agent call.

Monaco (direct code)

Best for: tiny adjustments you already know how to make. Free — no engine credits — only the static rebuild runs. Useful for class tweaks, copy fixes, or reading what the agent generated.

Behind the scenes

How a save becomes a refreshed preview

Whether the change came from chat, click-to-edit, or Monaco, the rebuild flow is the same. Knowing the steps helps when something looks slow or stuck.

1
Save lands as an overlay
Your changed files are stored as a layer on top of the engine's original output. The base build is never overwritten, which is why 'Revert all' can always restore it instantly.
2
Overlay is merged
The workspace asks the API for the merged file map — base files with your overlay applied. This is what Monaco shows you and what the rebuild uses.
3
Files upload to the build worker
The merged map uploads to the preview worker. This is a small Fly.io / Cloud Run service that runs `next build` with the static export setting.
4
Static export uploads to storage
The worker uploads the build output to the previews bucket. A bridge script is injected into the HTML so click-to-edit and theme tweaks keep working in the iframe.
5
Preview iframe refreshes
The workspace appends a refresh token to the preview URL so the browser fetches the new HTML instead of serving the cached version. Total round trip is usually 10–30 seconds depending on how much changed.

Why the preview shows the old version for a few seconds

The static export needs to run before the iframe can swap. The 'Rebuilding preview…' notice in the workspace appears while the worker is busy and disappears when the new preview is ready. You can keep editing during the rebuild — saves queue up and the rebuild kicks off again 2.5 seconds after the last save.

Credits

When credits run and when they do not

The engine uses credits because every chat edit runs Claude under the hood. Direct code edits, layout toggles, and rebuilds do not — they are compute, not language model calls.

Chat edits use credits. The exact number depends on whether the change is small, medium, or large. The chat surfaces an estimate before bigger edits.
Click-to-edit uses credits — same pricing as a small chat edit since it runs the same agent on a single element.
Monaco edits are free. Type, save, rebuild. No language model.
Static rebuilds are free. They run on the preview worker, not on the credit pool.
Web-grounded edits — asking the agent to look up real information — opt-in with a separate fee per request. You confirm in the chat before it runs.

Example credit costs for a Premium plan build (subject to change)

Chat — small edit          ~30 credits
Chat — medium edit         ~80 credits
Chat — large structural    ~200 credits
Click-to-edit              ~30 credits
Web-grounded edit          ~90 credits (opt-in)
Monaco file save           Free
Static preview rebuild     Free

No lock-in

Take the code with you whenever you want

Virex builds are standard projects. Next.js for web, Expo for mobile. You can leave the workspace, work in your own editor, push to your own GitHub, and deploy anywhere. The workspace just makes the inner loop fast.

Download the project as a ZIP from the workspace toolbar. Run `npm install` then `npm run dev` (or `npx expo start` for Expo) and you are in your local editor.
Push to GitHub from the toolbar. Connect once, then every Monaco save can auto-push if you enable it. The diff goes to your repo, not ours.
Open in VS Code: download the ZIP, drag the unzipped folder onto VS Code. No special URL scheme — the project is just files.
Environment variables (Supabase, Stripe, etc.) can be set inside the workspace and travel with the export.

Where to go next

Once the editing flow makes sense, the next pages explain how the build itself is produced and how to ship it.

How a build is generated

The engine path that produces the first version of your project, including domain data, section selection, and page composition.

Deploy your repo

GitHub, Vercel, and the env-var injection flow for shipping the project somewhere real.

Plans and credits

What each tier includes, how credit budgets map to editing, and when an Opus rescue triggers.