---
title: VS Code Extension
description: Start, stop, and restart the Jamdesk dev server from the Visual Studio Code status bar with one-click controls and auto browser preview.
---

Preview your documentation without leaving Visual Studio Code. The Jamdesk extension adds a status bar button that starts `jamdesk dev`, monitors the server, and opens your browser when it's ready. No terminal required.

## Prerequisites

- [Jamdesk CLI](/cli/overview) installed (`npm install -g jamdesk`)
- A workspace containing a `docs.json` file

## Install the Extension

Search for **Jamdesk** in the VS Code Extensions panel (`Cmd+Shift+X` on macOS, `Ctrl+Shift+X` on Windows/Linux) and click **Install**. Or install directly from the [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Jamdesk.jamdesk).

The extension activates automatically when your workspace contains a `docs.json` file. A play button appears in the status bar.

## Start the Dev Server

Click the play button in the status bar to start the dev server. The extension:

1. Spawns `jamdesk dev` as a child process
2. Monitors output to detect when the server is ready
3. Opens your browser to the local preview (if auto-open is enabled)

The status bar shows the current server state: starting, running, or stopped.

## Commands

Open the Command Palette (`Cmd+Shift+P` / `Ctrl+Shift+P`) and type "Jamdesk" to access:

| Command | Description |
|---------|-------------|
| **Jamdesk: Start Dev Server** | Start the dev server |
| **Jamdesk: Stop Dev Server** | Stop the running server |
| **Jamdesk: Restart Dev Server** | Restart the server |
| **Jamdesk: Show Output** | Reveal the CLI output channel |

## Settings

Configure the extension in VS Code settings (`Cmd+,` / `Ctrl+,`) under **Jamdesk**:

| Setting | Default | Description |
|---------|---------|-------------|
| `jamdesk.port` | `3000` | Preferred dev server port |
| `jamdesk.verbose` | `false` | Enable verbose CLI output |
| `jamdesk.clean` | `false` | Clear build cache on next start |
| `jamdesk.browserMode` | `external` | Where to open preview: `external` (system browser) or `embedded` (VS Code side panel) |
| `jamdesk.autoOpenBrowser` | `true` | Open browser when server is ready |

<Tip>
Set `browserMode` to `embedded` to open the docs preview in a VS Code side panel. This lets you edit and preview side by side without switching windows.
</Tip>

## Smart Port Handling

If your preferred port is already in use, the CLI automatically increments to the next available port. The extension detects the actual port from the CLI output, so the browser always opens to the correct URL.

## Output Channel

The extension streams all CLI output to a dedicated **Jamdesk** output channel. Open it with the **Jamdesk: Show Output** command or from the Output panel dropdown.

Use this to:
- Monitor build progress
- Debug server issues
- View verbose logs (when `jamdesk.verbose` is enabled)

## What's Next?

<Columns cols={2}>
  <Card title="Local Preview" icon="eye" href="/development/local-preview">
    CLI-based preview with custom ports and verbose mode
  </Card>
  <Card title="CLI Overview" icon="terminal" href="/cli/overview">
    Full CLI command reference
  </Card>
</Columns>