> ## Documentation Index
> Fetch the complete documentation index at: https://bruno-a6972042-docs-timeline-scripts.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Install and Configure

To start using the Bruno VS Code extension, install it from the official [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=bruno-api-client.bruno), or simply open the Extensions panel in your editor and search for **Bruno**.

Once installed, open a Bruno collection and begin sending API requests right from your editor.

## Usage

### Dual View Mode

Bruno VS Code extension offers two distinct viewing modes to suit different workflows:

1. **Using the Explorer** - File mode with syntax highlighting
2. **Using the Extension** - GUI mode with visual interface

### Using the Explorer

If you already have loaded Bruno collection into the editor the File mode will be default view to switch GUI mode click on **Bruno** icon.

<img src="https://mintcdn.com/bruno-a6972042-docs-timeline-scripts/qLeHtpKFpf3RFoq7/v2/images/screenshots/vs-code-extension/filemode.webp?fit=max&auto=format&n=qLeHtpKFpf3RFoq7&q=85&s=d7a6b7106063470c374164810952aeda" alt="VS Code Extension Create Request" width="2710" height="1610" data-path="v2/images/screenshots/vs-code-extension/filemode.webp" />

### Using the Extension

By clicking the extension in VS Code, you will have a similar experience to the Bruno Desktop App.
To switch between view modes, click the arrow icons in the top right of your editor.

<img src="https://mintcdn.com/bruno-a6972042-docs-timeline-scripts/qLeHtpKFpf3RFoq7/v2/images/screenshots/vs-code-extension/gui-view.webp?fit=max&auto=format&n=qLeHtpKFpf3RFoq7&q=85&s=185c2ab538b054f62cbcb6abf639ca35" alt="VS Code Extension Create Request" width="2710" height="1574" data-path="v2/images/screenshots/vs-code-extension/gui-view.webp" />

## Working with Collections

Similar to the desktop application, the extension will first start as a clean slate. Click the "+" icon to either open, create, or import a collection.

<img src="https://mintcdn.com/bruno-a6972042-docs-timeline-scripts/qLeHtpKFpf3RFoq7/v2/images/screenshots/vs-code-extension/collection.webp?fit=max&auto=format&n=qLeHtpKFpf3RFoq7&q=85&s=7e785be26ae3301aee6a61087074d93f" alt="VS Code Extension Create Request" width="2710" height="1574" data-path="v2/images/screenshots/vs-code-extension/collection.webp" />
