> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# 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

<CardGroup cols={2}>
  <Card title="✅ One-line CSS / class fixes" icon="paintbrush">
    "Make this button `bg-violet-600` instead of `bg-violet-500`." Faster to edit than to prompt.
  </Card>

  <Card title="✅ Typo fixes" icon="text-cursor-input">
    Copy in the editor, paste correction. Done.
  </Card>

  <Card title="✅ Adjusting a hardcoded value" icon="hash">
    Pagination size from 25 to 50. A magic number. A spacing value.
  </Card>

  <Card title="✅ Quick experiments" icon="flask-conical">
    Try a different layout for 30 seconds, see if you like it, revert if not.
  </Card>

  <Card title="❌ Anything that touches multiple files" icon="x-circle">
    Use [Agent mode](/building/agent-mode). The agent traces dependencies; you'd miss something.
  </Card>

  <Card title="❌ Schema changes" icon="x-circle">
    Use [Plan mode](/building/plan-mode). Migrations are too easy to mess up by hand.
  </Card>
</CardGroup>

## 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:

<Steps>
  <Step title="The agent reads the current state of the file">
    Including your manual edit. It does not assume the file matches an earlier revision.
  </Step>

  <Step title="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.
  </Step>

  <Step title="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](/building/version-history).
  </Step>
</Steps>

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

```typescript theme={null}
// 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

<Tabs>
  <Tab title="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.
  </Tab>

  <Tab title="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.
  </Tab>

  <Tab title="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.
  </Tab>

  <Tab title="Find & replace a string">
    Cmd+Shift+F / Ctrl+Shift+F. Type the search. Type the replacement. Filter to specific files. Click "Replace All". Save.
  </Tab>
</Tabs>

## 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.

<Tip>
  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.
</Tip>

## Saving and committing

Code mode auto-saves to a draft. Drafts hot-reload the preview but **don't create a revision** in [version history](/building/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.

<Steps>
  <Step title="Edit freely">
    Hot-reload preview shows your changes.
  </Step>

  <Step title="Decide">
    Either click **Commit revision** (gives the change a name and adds it to version history) or **Discard** (returns to the last committed state).
  </Step>
</Steps>

## Tips

<Tip>
  **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."
</Tip>

<Tip>
  **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."
</Tip>

<Tip>
  **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.
</Tip>

## Related

<CardGroup cols={3}>
  <Card title="Agent mode" icon="bot" href="/building/agent-mode">
    The default. Use when a prompt is faster than an edit.
  </Card>

  <Card title="Plan mode" icon="workflow" href="/building/plan-mode">
    Agent mode with a deliberate review step.
  </Card>

  <Card title="Version history" icon="history" href="/building/version-history">
    Roll back, compare, branch from any revision.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.