Documentation / Desktop IDE

Workbench

v1.0 Beta

Understand Explorer, editor, AI panel, and terminal layout in ACE IDE.

Desktop IDE Workbench

The workbench includes explorer, editor tabs, AI panel, and run/terminal surfaces.

Main areas

  • Left activity + explorer
  • Central editor
  • Optional Live Preview pane (embedded dev server, Ctrl+Shift+V)
  • Right AI panel
  • Bottom terminal/output/tasks (includes IoT Monitor for USB serial devices — see IoT Serial Monitor)

Live Preview

Embedded browser pane for whatever local URL your project uses — frontend (Vite, Next, Angular), backend (Django, Rails, Laravel), or full-stack dev servers. It is not tied to APP_URL (IDE API host).

  • Toggle: View → Toggle Live Preview (Ctrl+Shift+V), toolbar preview button, or Tasks → Open in Live Preview
  • Default URL: BDL_IDE_DEV_SERVER_URL in desktop-ide/ide.env (default if unset: http://localhost:5173)
  • Examples: http://localhost:5173 (Vite), http://localhost:3000 (Next/CRA), http://localhost:4200 (Angular), http://127.0.0.1:8000 (Django/Laravel)
  • Drag the divider to resize; URL and open state are saved in IDE settings
  • If nothing is listening on that port, the pane shows instructions instead of errors — start your dev server, then press Go or refresh

Split editor

Split editor requires an active file tab. If no file is open, split mode stays disabled.

  • Quick Open: Ctrl/Cmd + P
  • Command Palette: Ctrl/Cmd + Shift + P
  • Toggle sidebar: Ctrl/Cmd + B
Was this helpful?