Code mode

Hand-edit code directly in the in-browser editor. The right mode for tiny tweaks where a prompt is overkill.

Code mode is the escape hatch. When the change is small enough that writing a prompt feels like more work than just editing the file, drop into Code mode and edit directly. The preview hot-reloads as you type.

When to use it

✅ One-line CSS / class fixes

“Make this button bg-violet-600 instead of bg-violet-500.” Faster to edit than to prompt.

✅ Typo fixes

Copy in the editor, paste correction. Done.

✅ Adjusting a hardcoded value

Pagination size from 25 to 50. A magic number. A spacing value.

✅ Quick experiments

Try a different layout for 30 seconds, see if you like it, revert if not.

❌ Anything that touches multiple files

Use Agent mode. The agent traces dependencies; you’d miss something.

❌ Schema changes

Use Plan mode. Migrations are too easy to mess up by hand.

The editor

The in-browser editor is a Monaco-based editor with:

• Full TypeScript IntelliSense (types come from your Convex schema)
• Tailwind class autocomplete
• Quick navigation (Cmd+P / Ctrl+P)
• Multi-file open
• Find & replace across the project (Cmd+Shift+F / Ctrl+Shift+F)
• Live preview that hot-reloads on save

How edits interact with the agent

When you make a manual edit and then later ask the agent to make a change:

1. The agent reads the current state of the file

   Including your manual edit. It does not assume the file matches an earlier revision.

2. The agent preserves your edit if relevant

   If the agent is told to “rename the page title” and you’ve manually styled the body, the agent only edits the title — your styling stays.

3. The agent overwrites your edit if instructed

   “Rebuild this page from scratch using a sidebar layout” — vly will replace your manual edits with the new layout, but the previous version is preserved in version history.

If you want the agent to never touch a file you’ve hand-edited, add a // vly-keep comment at the top:

// vly-keep — this file is hand-maintained, agent should not modify

The agent treats the file as read-only for its own edits, but will still display it in chat context.

Common Code mode tasks

Tweak a Tailwind class

1. Cmd+P / Ctrl+P → search for the component name.
2. Edit the className.
3. Save (Cmd+S / Ctrl+S — though hot reload triggers on focus loss too).
4. Watch the preview update.

Add a console.log for debugging

1. Open the file with the suspect logic.
2. Add console.log("here", someVariable);.
3. Open the preview. Open browser devtools.
4. Reproduce the issue, read the log, fix.
5. Remove the log.

Edit a Convex query inline

Convex query files live in /convex/. Edits there hot-reload the same way React files do — open convex/tasks.ts, change a filter, save, see the preview update.

Find & replace a string

Cmd+Shift+F / Ctrl+Shift+F. Type the search. Type the replacement. Filter to specific files. Click “Replace All”. Save.

Type errors

Code mode shows type errors inline (red squiggle, hover for details). The build pipeline will refuse to deploy a project with type errors.

If you’re stuck on a type error, switch to Agent mode and prompt: “Fix the TypeScript error on line 42 of components/TaskRow.tsx.” The agent reads the error and applies the right fix.

Saving and committing

Code mode auto-saves to a draft. Drafts hot-reload the preview but don’t create a revision in version history until you click Commit.

This means you can experiment freely — five minutes of poking at a file — and decide at the end whether to commit it as a revision or revert.

1. Edit freely

   Hot-reload preview shows your changes.

2. Decide

   Either click Commit revision (gives the change a name and adds it to version history) or Discard (returns to the last committed state).

Tips

Use Code mode + Agent mode together. Edit the file by hand to get the rough shape, then ask the agent to “polish this” or “add types and JSDoc.”

The Cmd+. / Ctrl+. quick-action menu offers AI-assisted suggestions in Code mode — a much smaller, faster surface than full Agent mode for things like “convert to async/await” or “extract this into a helper.”

Keyboard shortcuts: Cmd+P / Ctrl+P for file search, Cmd+Shift+P for the command palette, Cmd+B for sidebar toggle, Cmd+J for terminal/console.

Related

Agent mode

The default. Use when a prompt is faster than an edit.

Plan mode

Agent mode with a deliberate review step.

Version history

Roll back, compare, branch from any revision.