> ## 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/YIVCUWHdHRLtQYF8/images/screenshots/vs-code-extension/filemode.webp?fit=max&auto=format&n=YIVCUWHdHRLtQYF8&q=85&s=dad1e7dc958898d9c49dcea115583b82" alt="VS Code Extension Create Request" width="2710" height="1610" data-path="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/YIVCUWHdHRLtQYF8/images/screenshots/vs-code-extension/gui-view.webp?fit=max&auto=format&n=YIVCUWHdHRLtQYF8&q=85&s=37df5860543366aa76f6ffdbe450e144" alt="VS Code Extension Create Request" width="2710" height="1574" data-path="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/YIVCUWHdHRLtQYF8/images/screenshots/vs-code-extension/collection.webp?fit=max&auto=format&n=YIVCUWHdHRLtQYF8&q=85&s=7eeed0718477a355d8d43989b888daf6" alt="VS Code Extension Create Request" width="2710" height="1574" data-path="images/screenshots/vs-code-extension/collection.webp" />
