iterel
/

Workspace

Engineering and code

Generate and iterate on implementation from the same product and design context.

User-facing guide
Jump to first section

Opening the code workspace

Click Code in the sidebar. The workspace is a full development environment with a code editor, file system, terminal, and live preview.

The code editor

The main area is a Monaco-based editor with syntax highlighting, autocompletion, and multi-file editing.

File tabs

Each open file appears as a tab at the top. Tabs show the filename, a dirty indicator dot if unsaved, and a close button. Right-click a tab for options: Close, Close Others, Close All.

Quick open and command palette

  • Press Cmd+P (or Ctrl+P) to open the quick file search. Type a filename to jump to it.
  • Press Cmd+Shift+P (or Ctrl+Shift+P) to open the command palette for actions like Build, Format, and Lint.

Editor context menu

Right-click in the editor for: Format Document, Rename Symbol, Go to Definition, Find References, Quick Fix, Refactor, Toggle Line Comment.

The left panel — file browser

Click the file browser toggle to open or close the project file tree. Navigate between files, create new ones, and organize your code structure.

Surface switcher

The surface switcher dropdown lets you switch between different coding surfaces (for example, app, component, or API). Click Add surface to create a new one.

The bottom panel

A resizable panel at the bottom has these tabs:

Problems tab

Shows linting and diagnostic errors. Click any problem to jump to the file and line number. Errors show red icons, warnings show yellow.

Terminal tab

A built-in shell where you can run commands, install dependencies, and manage the development environment. Press Ctrl+C to stop a running process.

Output tab

Build logs organized by channel: Build, Lint, Tests. Switch between channels to see relevant output.

Search tab

Global search across all files with replace functionality. Toggle regex matching.

Git tab

Shows staged and unstaged files. Type a commit message and click Commit. The Engineer can pre-fill commit messages when generating code.

History tab

File change history. Click an entry to view the diff.

Live preview

A preview pane shows your running application. Changes update in the preview so you can see results immediately.

The preview toolbar includes:

  • Device switcher — Mobile (375px), Tablet (768px), Desktop (1280px), Responsive (100%)
  • Refresh button — reload the preview
  • QR code button — scan to view on your phone
  • Copy link button — copies the preview URL (shows a "URL copied" toast)
  • Open in browser — opens the preview in a new browser tab
  • Fullscreen button — toggle fullscreen preview
  • Error badge — if console errors exist, shows the count. Click to open the errors panel.

AI-assisted development

When the Engineer suggests code changes, they appear as inline diffs in the editor with colored highlights showing additions and removals. For each change:

  • Click Accept (checkmark) to apply the change
  • Click Reject (X) to discard it
  • Use Next and Previous arrows to navigate between diffs

You can also open an engineer prompt modal to describe what changes you want and click Execute to run the engineer workflow.

Progressive code generation

For larger projects, Iterel uses a phased approach:

  1. Scaffolding — project structure, configuration, and boilerplate
  2. Types and database — shared TypeScript types, schema definitions, and API contracts
  3. Components and features — individual pieces built on the scaffold
  4. Integration — connecting components, adding data flow, and polishing

Each phase builds on the previous one, so you can review and adjust at every stage.

Autonomous builds

For large-scale generation, you can trigger a fully autonomous build from the Conductor. Tell it to "Build the product" or "Run an engineering sprint" and Iterel will:

  1. Generate a build plan from your flows, design, and backend architecture.
  2. Present the plan for your review — you can approve, modify, or cancel before anything happens.
  3. Execute each phase in order, showing real-time progress in the Conductor task console.
  4. Pause at key checkpoints to show you what was built and ask for confirmation before continuing.

You can pause, resume, or cancel a running build at any time using the controls in the Conductor header. All generated files appear in the file browser as each phase completes, so you can review them immediately.

What you can and cannot do

You can:

  • Edit any file in the project
  • Run npm scripts and shell commands in the terminal
  • Install packages
  • Run development servers with live preview
  • Use TypeScript, JavaScript, and web frameworks
  • Accept or reject AI-generated code changes individually
  • Export the codebase as a ZIP

Limitations in the browser:

  • No native binaries (Python, Go, Rust command-line tools)
  • Limited network access from the runtime
  • Browser memory constraints for very large projects
  • No system-level commands

For full native capabilities, use the desktop app.

Status bar

The bottom-right shows: current language, cursor position (line:column), and diagnostic counts (errors and warnings).