Skip to main content

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.

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.
ModalityBest forCode required
Visual editorLayout, copy, styling, swapping imagesNo
Code editorLogic, custom hooks, refactors, anything beyond visual editsYes
Talking to ArchieMulti-file changes you describe in wordsNo
PreviewRunning app — viewing only, no editingNo
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.

​
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. 
// 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:
SettingRangeDefault
ThemeMultiple light/dark themesDark
Font familyJetBrains Mono, Fira Code, Consolas, Monaco, system monospaceJetBrains Mono
Font size8–28 px14
Line height1.0–2.01.5
Font ligaturesOn/offOn
Multi-cursor modifierAlt or Ctrl/CmdAlt
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 and the 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.
  • Custom Monaco extensions. You cannot install third-party Monaco plugins.
If you need any of these, clone the project locally through the GitHub integration and use a desktop editor of your choice. Push your changes back, and Archie will pick them up on the next regeneration.

​
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 section and is edited there.