> ## Documentation Index
> Fetch the complete documentation index at: https://bruno-a6972042-docs-restructure-by-product.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-restructure-by-product/iXfQojjH1dWZ_kmR/v2/images/screenshots/vs-code-extension/filemode.webp?fit=max&auto=format&n=iXfQojjH1dWZ_kmR&q=85&s=84da8f02ab4140ad028c19cd9c1c297d" 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-restructure-by-product/iXfQojjH1dWZ_kmR/v2/images/screenshots/vs-code-extension/gui-view.webp?fit=max&auto=format&n=iXfQojjH1dWZ_kmR&q=85&s=5ede89453445f0f49344193b4a3761f9" 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-restructure-by-product/iXfQojjH1dWZ_kmR/v2/images/screenshots/vs-code-extension/collection.webp?fit=max&auto=format&n=iXfQojjH1dWZ_kmR&q=85&s=2808edd4aa0712438d5822f36303a95b" alt="VS Code Extension Create Request" width="2710" height="1574" data-path="v2/images/screenshots/vs-code-extension/collection.webp" />
