# Preview Your Project Inside VS Code with QuickServe (No More Context Switching)

When you're building a web page, even small changes usually follow the same cycle:

1.  Save the file.
    
2.  Switch to your browser.
    
3.  Check the result.
    
4.  Switch back to VS Code.
    
5.  Repeat.
    

Those constant window switches may seem small, but over hundreds of edits they become a real productivity drain.

With **QuickServe**, you can preview your project **directly inside VS Code** using the built-in Internal Webview, allowing you to stay focused in a single workspace.

## Why use the Internal Browser?

Instead of launching your default browser every time the server starts, QuickServe can open your project inside VS Code itself.

**Benefits include:**

*   **Zero context switching** between your editor and browser.
    
*   Keep your code and preview side-by-side.
    
*   Faster iteration while tweaking HTML and Markdown.
    
*   Continue using **Live Reload** and **HMR** just like an external browser.
    
*   Great for smaller screens or single-monitor setups.
    

For many editing tasks, you never need to leave your editor.

> **Think of it like having your browser embedded next to your code.** Edit, save, and instantly see the result without changing applications.

## How to Enable It

Open **VS Code Settings** and search for:

```plaintext
QuickServe: Open With
```

Change the value from:

```plaintext
browser
```

to:

```plaintext
internalWebview
```

Or edit your `settings.json` directly:

```json
{
    "quickserve.openWith": "internalWebview"
}
```

That's it.

The next time you start QuickServe, your project opens inside VS Code instead of your default browser.

## See It in Action

![action](https://github.com/debanshup/quickserve-assets/blob/main/webview_output.gif?raw=true align="center")

## Requirements

The Internal Webview requires:

*   **VS Code v1.109 or later**
    
*   **Simple Browser** enabled (bundled with VS Code)
    

If these requirements aren't met, simply switch back to the default browser option.

## When Should You Use It?

The Internal Browser is ideal for:

*   Building static HTML pages
    
*   Writing Markdown documentation
    
*   Editing landing pages
    
*   Following tutorials
    
*   Rapid UI iteration
    
*   Testing HMR without leaving the editor
    

If you're spending most of your time making small visual changes, this workflow keeps everything in one place.

## Choosing the Right Preview Mode

QuickServe supports three preview modes:

| Option | Opens In | Best For |
| --- | --- | --- |
| `browser` | Default browser | Full browser testing |
| `internalWebview` | VS Code | **Fast development with zero context switching** |
| `none` | Doesn't open automatically | Custom workflows |

## Conclusion

Switching between applications dozens of times an hour interrupts your flow more than most developers realize.

By setting:

```json
"quickserve.openWith": "internalWebview"
```

QuickServe keeps your editor and preview together, making development faster, smoother, and more focused.

Sometimes the biggest productivity improvement isn't adding new features—it's simply **removing unnecessary context switches**.