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:

QuickServe: Open With

Change the value from:

browser

to:

internalWebview

Or edit your settings.json directly:

{
    "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

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:

Conclusion

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

By setting:

"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.