> ## Documentation Index
> Fetch the complete documentation index at: https://docs.instapods.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web IDE

> Edit code directly in the browser with the Monaco-powered web IDE.

The web IDE is a browser-based code editor built on Monaco (the same engine as VS Code). Edit files, manage your project, and deploy changes — all without leaving the browser.

## Accessing the IDE

1. Go to your pod's detail page at `/dashboard/pods/{name}`
2. Click the **Open IDE** button in the top-right corner
3. The IDE opens in a new browser tab

Direct URL: `https://app.instapods.com/ide/{pod-name}`

## Interface

The IDE has three main areas:

* **Sidebar** (left) — File tree showing your pod's app directory
* **Tab bar** (top) — Open files as tabs, up to 10 simultaneously
* **Editor** (center) — Monaco editor with syntax highlighting, line numbers, and minimap

## File Operations

| Action            | How                                                             |
| ----------------- | --------------------------------------------------------------- |
| **Open file**     | Click a file in the sidebar tree                                |
| **Create file**   | Right-click a folder → **New File**, or click the `+` icon      |
| **Create folder** | Right-click a folder → **New Folder**, or click the folder icon |
| **Rename**        | Right-click → **Rename** (inline editing)                       |
| **Duplicate**     | Right-click → **Duplicate**                                     |
| **Delete**        | Right-click → **Delete** (with confirmation)                    |
| **Download**      | Right-click a file → **Download**                               |
| **Copy path**     | Right-click → **Copy Path**                                     |
| **Upload**        | Drag and drop files onto the sidebar                            |

## Keyboard Shortcuts

| Shortcut               | Action                              |
| ---------------------- | ----------------------------------- |
| **Ctrl+S** / **Cmd+S** | Save the active file                |
| **Esc**                | Close context menu or cancel rename |
| **Enter**              | Confirm rename or new file name     |

## Multi-Tab Editing

* Open up to **10 files** simultaneously
* Unsaved files show an asterisk (`*`) next to their name
* Closing a tab with unsaved changes shows a **Save / Discard / Cancel** dialog
* Tab positions persist in your browser session — reopen the IDE and your tabs are restored

## Drag and Drop Upload

Drag files or entire folders from your computer onto the IDE sidebar:

1. Files appear with a blue drop overlay
2. Folder hierarchies are preserved automatically
3. Existing files are overwritten
4. Open tabs refresh if their files were updated

## Syntax Highlighting

The editor auto-detects language from the file extension. Supported languages include:

JavaScript, TypeScript, HTML, CSS, SCSS, PHP, Python, Go, Rust, Ruby, JSON, YAML, Markdown, SQL, Shell, XML, and more.

## When to Use the IDE vs Other Tools

| Task                      | Best Tool                       |
| ------------------------- | ------------------------------- |
| Quick config file edits   | **Web IDE**                     |
| Browsing project files    | **Web IDE**                     |
| Writing small scripts     | **Web IDE**                     |
| Large project development | **Local editor + `files sync`** |
| Bulk file operations      | **CLI `files` commands**        |
| Running commands          | **Web Terminal**                |
| Git operations            | **SSH or Web Terminal**         |

<Note>
  The IDE works within your pod's app root directory. All changes are saved directly to the pod — there's no separate deploy step. The pod must be running for the IDE to load files.
</Note>