Understanding the editor

The IDE layout

The Spinini editor is split into four zones:

You can drag the dividers to resize each zone, or collapse panels using the icons in the toolbar.

File tree

The file tree shows every file and folder in your project's /workspace directory. Right-click any item to get options: New file, New folder, Rename, and Delete.

Click a file to open it in the editor. Multiple open files appear as tabs at the top.

Monaco editor

The editor is powered by Monaco — the same engine that drives VS Code. It supports:

•Syntax highlighting for 50+ languages

•IntelliSense / autocomplete

•Multi-cursor editing (Alt+Click to add cursors)

•Ctrl+F to search within the file

•Ctrl+Shift+F to search across all files

Files are saved automatically as you type (debounced 800 ms). You'll see a Saved ✓ indicator in the status bar when changes are written to disk.

Live preview

The preview pane shows your running application in a sandboxed iframe. It reloads automatically whenever you save a file — no manual refresh needed.

Use the toolbar above the preview to:

•Refresh — force a reload

•Open in new tab — see the app full-screen

•Copy URL — share the preview link with teammates

•Resize — toggle between desktop, tablet, and mobile viewports

Integrated terminal

The terminal connects directly to your project's Docker container. It's a full PTY — you can run any Linux command, install packages, start servers, or check logs.

Open with Ctrl + ` or click the Terminal tab at the bottom.

Tip: Run npm install or pip install -r requirements.txt here to add packages.

Spinini AI sidebar

Click the flame icon in the left toolbar (or press Ctrl+Shift+A) to open the Spinini AI panel. You can describe what you want to build and Spinini AI will write the code, create files, and run commands — all in real time.