Click the Code tab at the top of the workspace to open the editor view. The right panel splits into a file sidebar and the editor/terminal area.
File tree
The Files tab in the sidebar shows your entire project as a collapsible tree.
- Open a file — click its name. The file opens in the Monaco editor.
- Expand / collapse folders — click the folder icon or the disclosure arrow.
- Right-click a file or folder for context-menu options (rename, delete).
- Drag files from your computer into any folder in the tree to upload them. Text files (
.ts, .tsx, .json, .md, etc.) are imported as UTF-8; binary files (images, fonts, WASM) are written as raw bytes.
Large files (.zip, video, etc.) may be slow to upload because each file is streamed up to the sandbox. Import only what your project actually needs.
Monaco editor
The editor is built on Monaco — the same engine that powers VS Code.
What it supports out of the box:
- Syntax highlighting for TypeScript, JavaScript, JSX, TSX, CSS, JSON, HTML, Markdown, and more
- IntelliSense autocomplete based on the current file
- Go-to-definition and hover documentation
- Multi-cursor editing (
Cmd+D / Ctrl+D to add a cursor at the next match)
- Auto-closing brackets, quotes, and tags
- Find and replace (
Cmd+H / Ctrl+H)
- Code folding on function and block boundaries
Saving your work:
Press Cmd+S (Mac) or Ctrl+S (Windows/Linux), or click the Save button that appears in the toolbar when there are unsaved changes. Saving writes the file to the sandbox filesystem immediately — the dev server picks up the change and the preview reloads.
Your sandbox keeps files on a persistent disk and Botflow snapshots it automatically, but it’s good practice to save regularly and use GitHub sync if you’re making important changes. File search
Click the Search tab in the sidebar to do a full-text search across all files in your project. Type a query and results appear as you type, grouped by file with surrounding context lines. Click any result to jump directly to that line in the editor.
Terminal
The terminal panel lives at the bottom of the Code view. It’s a real shell running inside your project’s Linux sandbox — the same environment the dev server and the AI agent use. Anything you’d run on a normal Linux dev box works here: pnpm, node, git, and native binaries alike.
The terminal stays connected for the life of the session and shares one working directory with your project (the sandbox’s project root). Because each line you enter runs as its own command, a bare cd won’t persist on its own — chain directory changes into the command that needs them (e.g. cd packages/api && pnpm test).
Common commands:
# Install dependencies
pnpm install
# Start the dev server manually
pnpm dev
# Run tests
pnpm test
# Add a new package
pnpm add zod
# Work with Git directly
git status
Keyboard shortcuts
Speed up your workflow with these keyboard shortcuts:
Editor shortcuts
| Shortcut | Action |
|---|
Cmd+S / Ctrl+S | Save current file |
Cmd+D / Ctrl+D | Add cursor at next match |
Cmd+F / Ctrl+F | Find in file |
Cmd+H / Ctrl+H | Find and replace |
Cmd+G / Ctrl+G | Go to line |
Cmd+P / Ctrl+P | Quick open file |
Cmd+/ / Ctrl+/ | Toggle line comment |
Option+Up/Down | Move line up/down |
Shift+Option+Up/Down | Copy line up/down |
Cmd+Enter / Ctrl+Enter | Insert line below |
Cmd+Shift+Enter / Ctrl+Shift+Enter | Insert line above |
Navigation shortcuts
| Shortcut | Action |
|---|
Cmd+B / Ctrl+B | Toggle file tree sidebar |
Cmd+Shift+F / Ctrl+Shift+F | Focus file search |
Cmd+Shift+E / Ctrl+Shift+E | Focus ENV panel |
? | Show all keyboard shortcuts |
Workspace shortcuts
| Shortcut | Action |
|---|
Cmd+Enter / Ctrl+Enter (in chat) | Send message to AI agent |
Escape | Close modal or panel |
Downloading your project
Click the Download button (arrow icon) in the top-right toolbar to export the entire project as a .zip file. This includes all source files, node_modules is excluded. Use this to move your project to a local machine or another host.
