The Code Editor

Appsanic has a full code editor built in. It's the same editor that powers VS Code (Monaco), with a file tree, tabs, syntax highlighting, search, and everything you'd expect. It runs inside your project's overlay; no install, no setup.

You don't have to use it. The agent writes all the code for you. But the editor is there for the moments when you want to see what's in your project, copy a snippet to ask the agent about, or make a small change by hand.

Who this is for

If you've never coded: the editor is mostly a window into what the agent built. You can browse, look around, copy something to paste into chat. You won't type code from scratch; that's still the agent's job. But seeing the actual files demystifies the process and helps you describe specific things more precisely.

If you write code: it's a competent in-browser editor. Multi-file tabs, IntelliSense for TypeScript (with auto-imported type definitions), Monaco's standard shortcuts. You can make targeted edits without exporting to GitHub first.

Opening the editor

In the build view, click the Code button in the build header (or its keyboard shortcut). The editor slides over the canvas as a full-canvas overlay. Esc closes it.

Layout:

• Left: a file tree showing every file in your project. Folders expand on click.
• Top: a tab bar showing all currently-open files. Click to switch, click the X to close.
• Center: the actual code, with line numbers, syntax highlighting, and the cursor.

The editor remembers your open tabs and cursor position between sessions, so reopening it lands you back where you were. Same file, same line, same column.

Browsing the file tree

A typical project has these top-level files and folders:

• App.tsx: the entry point. It wires up navigation (React Navigation) and points at your screens.
• screens/: the screens of your app, one file each (for example HomeScreen.tsx).
• components/: reusable pieces (buttons, cards, lists) used across screens.
• stores/: where shared state lives. One Zustand store per concern, like auth-store.ts and comments-store.ts.
• theme.ts: the design tokens (colours, spacing, type, radii) every screen pulls from.
• app.json: config for app name, icon, splash screen, permissions.

You can ignore most of this on day one. The file tree is mostly useful when you want to point the agent at something specific. For the full layout and conventions, see Editing Exported Code.

Opening files

Three ways:

• Click a file in the tree.
• Use the command palette (Cmd/Ctrl + K). Type any file name, hit Enter, jump straight to it. Great when you know what you want and don't want to expand a half-dozen folders.
• Cmd/Ctrl + click an import statement in an open file to jump to the imported file.

Each opened file gets its own tab. You can have many tabs open at once; the editor remembers them across sessions.

Editing files

Click into the code and type. Standard Monaco shortcuts work:

• Cmd/Ctrl + S: saves changes to your project.
• Cmd/Ctrl + F: find within the current file.
• Cmd/Ctrl + Shift + F: find across all files.
• Cmd/Ctrl + Z / Y: undo / redo.

Saved changes are real changes. Your live preview refreshes within a second or two.

When to use the editor vs the agent

Use the agent for almost everything:

• New features, new screens, new behaviour.
• Style changes that touch many places.
• Anything that requires understanding the whole app.

Use the editor for surgical changes the agent might over-engineer:

• A one-word copy fix on a specific screen.
• Tweaking a single color or padding value.
• Reading the actual code before asking the agent for a precise change.
• Copying a code snippet to paste into chat ("here's what's happening in this file, fix the bug").

If you find yourself making many edits in a row by hand, that's a signal to either prompt the agent for the whole change, or export to GitHub and work locally with your normal tools.

Reading vs writing. Beginner mode

You don't have to type anything. Just opening the editor and reading a file is genuinely useful:

• It demystifies what "the agent built code" actually means.
• It gives you precise vocabulary for asking the agent things. "On line 42 of the home screen, the spacing looks off" lands a fix faster than "the home screen feels weird."
• You can copy a snippet, paste it into the chat, and say "explain this in plain English."

The agent's edits show up in the editor in real time as it works. You can watch the file populate. It's mesmerising the first time you see it.

Asking the agent about a file

If you have a file open, you can reference it in chat naturally:

"Look at the home screen at screens/HomeScreen.tsx. The streak counter is showing the wrong value when the user signs in for the first time. Fix it."

The agent will read that exact file (plus related ones) and apply the fix. The file path in backticks is a hint. The agent recognises file paths and pulls them in.

Search

Two kinds of search inside the editor:

• In the current file (Cmd/Ctrl + F): a find/replace bar in the editor itself.
• Across all files (Cmd/Ctrl + Shift + F): a project-wide search panel. Type a term, see every match across every file, click to jump.

Useful when you remember "I named a variable freshUserCheck somewhere" and want to find it without browsing the whole tree.

Things that confuse beginners

• Tabs vs files. A tab is a "currently open file." Closing a tab doesn't delete the file; it just unmounts it from the editor. The file is still in the project.
• Saving. You don't have to save constantly. The editor only writes changes when you actually edit something. Unsaved edits show a small dot on the tab so you know they're pending.
• Errors in the editor. Red squiggly underlines are TypeScript catching a problem in your code. If you see them after a manual edit, the agent will too. Ask it to fix.

Manual edits and the agent

You can edit by hand while the agent is also working. There are two things to know:

1. Don't both edit the same file at the same moment. The agent reads from your project state on each turn; if your unsaved change conflicts with what the agent is about to write, the agent's version wins. Save first, then ask the agent.
2. After you edit by hand, mention it. "I just changed the home screen header text to 'Hey there'. Use that as the canonical greeting everywhere." The agent picks it up cleanly.

If you're doing heavy manual editing, consider exporting to GitHub and using a real local editor.

Under the hood (for engineers)

• The editor is @monaco-editor/react wrapping standard Monaco.
• TypeScript IntelliSense is configured with the project's real tsconfig.json and the full set of dependency type definitions, refreshed on a 300ms debounce as the agent streams edits.
• File-tree state, open tabs, and per-file cursor positions are persisted to localStorage keyed by project ID.
• Save writes through the same API the agent uses, so your edits and the agent's edits are atomic against the same project state.

Next

Read Conversations for managing chat threads alongside your code work, or Editing Exported Code for when you're ready to move to a real local editor.