> ## 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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.