> ## Documentation Index
> Fetch the complete documentation index at: https://archie.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Code editor
> Edit your app's code directly with the built-in IDE — Monaco-powered file editing, file tree navigation, and inline build errors.
The code editor is a built-in IDE for directly editing your app's source code — useful when you need precise control beyond what the visual editor offers.
## When to use the code editor
The code editor is one of four modalities in the Frontend tab. Each is best for a different kind of change.
| Modality | Best for | Code required |
| --------------------------------------------------------- | ------------------------------------------------------------ | ------------- |
| [Visual editor](/features/frontend/visual-editor) | Layout, copy, styling, swapping images | No |
| **Code editor** | Logic, custom hooks, refactors, anything beyond visual edits | Yes |
| [Talking to Archie](/features/frontend/talking-to-archie) | Multi-file changes you describe in words | No |
| Preview | Running app — viewing only, no editing | No |
Reach for the code editor when the change is logic-heavy, touches files the visual editor cannot inspect, or when you want to read the generated code to understand what Archie produced.
## Switching into code mode
The Frontend tab has a segmented control at the top with two tabs: **Preview** and **Code**. Click **Code** to switch into the editor.
The Code tab is hidden for users without code-view permission. Owners and editors see it; viewers do not.
Switching back to **Preview** keeps your unsaved edits in memory — they stay in the Source Control panel until you save or discard.
## The file explorer
The left sidebar in the code editor has four panels, switched with the icons at the top.
The project file tree. Click a file to open it in a tab. A search input at the top filters the tree by file name. The collapse/expand toggle next to it folds the whole tree at once.
Right-click anywhere in the tree for **New File**, **New Folder**, and **Paste**. Right-clicking a file or folder also exposes rename, delete, and duplicate.
Some files are read-only — config files Archie owns, generated artifacts, and lockfiles. The tree marks them; the editor opens them but blocks edits.
The list of files with unsaved changes. Each entry shows a status badge: **modified**, **new**, **deleted**, or **renamed**. The total count is shown on the icon when changes exist.
From this panel you can save or discard changes per-file or for the whole working set. Click a file to open a diff against its last saved state.
All TypeScript and lint diagnostics from your project, grouped by file. Filter by severity (errors, warnings, info) using the toggles at the top. Click any diagnostic to jump to the exact line and column.
Project-wide text search across all editable files.
## Editing files
Files open in tabs at the top of the editor. The editor is Monaco — the same engine that powers VS Code — so most of what you expect from a modern IDE works out of the box.
What's enabled:
* Syntax highlighting for the languages in a Next.js + TypeScript + Tailwind project
* IntelliSense, parameter hints, and hover tooltips
* Auto-closing brackets and quotes, format on paste, format on type
* Multi-cursor (default modifier: Alt; switchable to Ctrl/Cmd in settings)
* Find and replace (Cmd/Ctrl+F, Cmd/Ctrl+H)
* Toggle comment (Cmd/Ctrl+/)
* Cmd/Ctrl-click on an import specifier to jump to that file
* Emmet expansion in HTML, CSS, and JSX
* Tabs are draggable — drop a tab into the chat to attach the file as context
The toolbar above the tabs has back/forward navigation across recently visited files, a theme picker, **Format Document** (Cmd/Ctrl+Shift+F), zoom (Cmd/Ctrl+Alt++ / -), copy file contents, download the file locally, and an entry to open the settings dialog.
```typescript theme={null}
// Cmd/Ctrl-click on the import path to jump to the file
import { useUser } from "@/hooks/use-user"
import type { User } from "@/domain/entities/user"
```
### Settings
Open **Settings** from the toolbar's overflow menu (Cmd/Ctrl+,). Notable preferences:
| Setting | Range | Default |
| --------------------- | ------------------------------------------------------------- | -------------- |
| Theme | Multiple light/dark themes | Dark |
| Font family | JetBrains Mono, Fira Code, Consolas, Monaco, system monospace | JetBrains Mono |
| Font size | 8–28 px | 14 |
| Line height | 1.0–2.0 | 1.5 |
| Font ligatures | On/off | On |
| Multi-cursor modifier | Alt or Ctrl/Cmd | Alt |
You can export and import your settings as JSON from the **Advanced** section, and reset everything to defaults from the same place.
## Build errors and diagnostics
The **Problems** panel in the file explorer is the central place for all in-editor diagnostics. It surfaces:
* TypeScript errors and warnings
* ESLint issues
* Anything else Monaco's language services flag
Each diagnostic shows the file, line:column, the message, and the source (for example, `ts (2304)`). Click to open the file at the exact location. The panel groups by file and lets you filter by severity — errors only, warnings only, or info only.
Diagnostics also appear inline in the editor itself: red squiggles under errors, amber under warnings. Hover for the message.
Build errors that come from the project's actual build pipeline (not just in-editor type checks) surface through the same panel once the build has run. If the Source Control icon shows a green count and the Problems icon shows a number, you have unsaved changes that haven't been validated against the build yet — save first, then check.
## Saving and discarding
The code editor uses a manual save model, not autosave.
When you edit a file, the changes are buffered in memory. They appear in the **Source Control** panel with a status badge and stay there until you commit or discard them.
* **Save All** in the Source Control panel persists every pending change at once
* **Save** on a single row persists only that file
* **Discard All** rolls back every unsaved change
* **Discard** on a single row rolls back just that file
Switching between Code and Preview does not clear unsaved buffers. Closing the project does — make sure pending changes are saved before you leave.
Cmd/Ctrl+S in the editor **downloads** the current file to your machine. It does not save. Use the Source Control panel to save.
## Cross-modality consistency
Edits from [Talking to Archie](/features/frontend/talking-to-archie) and the [visual editor](/features/frontend/visual-editor) write to the same files. When the chat applies a change, the modified files appear in the Source Control panel just as if you had edited them by hand. The diff view, save, and discard controls work the same way.
If you have unsaved hand edits and the chat or visual editor touches the same file, the latest write wins. Save your work before delegating to another modality if you don't want it overwritten.
## Limitations
The code editor is for editing source files. It deliberately does not include:
* **A terminal.** No shell access, no `pnpm install`, no running scripts.
* **Package management.** You cannot add or remove npm packages from this editor. Dependency changes are managed elsewhere.
* **Git operations.** The Source Control panel is a change tracker for your unsaved edits — it is not a Git client. There is no branching, committing, pushing, or pull-requesting from inside the editor. Git is handled by Archie's GitHub integration on the project level. See [Connecting to GitHub](/features/github/connecting).
* **Custom Monaco extensions.** You cannot install third-party Monaco plugins.
If you need any of these, clone the project locally through the [GitHub integration](/features/github/connecting) and use a desktop editor of your choice. Push your changes back, and Archie will pick them up on the next regeneration.
## Related
* [Visual editor](/features/frontend/visual-editor) — the alternative for layout and styling work
* [Talking to Archie](/features/frontend/talking-to-archie) — describe changes in natural language
* [Connecting to the backend](/features/frontend/connecting-to-the-backend) — how generated API code reaches your components
* [Deployment](/features/frontend/deployment) — shipping the changes you make here
## FAQ
No. The editor does not have a terminal or a package manager UI. Add or remove dependencies via the project's tech stack settings, or clone the project locally and install packages there.
The Problems panel shows the errors. The preview build will fail until they are resolved — the Preview tab surfaces the failure, and the live preview stops updating. Fix the errors in the editor, save, and the preview rebuilds. If you want to roll back fast, use **Discard All** in the Source Control panel.
No. The editor is Monaco with its default keymap. Standard shortcuts work — undo, redo, find, replace, comment toggle, multi-cursor — but Vim, Emacs, and custom keymaps are not supported. The multi-cursor modifier can be switched between Alt and Ctrl/Cmd in settings.
Yes. The chat and the code editor write to the same files. Edits from either show up in the Source Control panel. If both touch the same file in close succession, the most recent write wins, so save before handing off to the chat if you want your hand edits preserved.
No. The code editor in the Frontend tab edits frontend source only. Backend logic — data model, custom functions, app services — lives in the [Backend](/features/backend/overview) section and is edited there.