awesome-repositories.com
Blog
MCP
awesome-repositories.com

Discover the best open-source repositories with AI-powered search.

ExploreCurated searchesOpen-source alternativesSelf-hosted softwareBlogSitemap
ProjectMCP serverAboutHow we rankPress
LegalPrivacyTerms
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
auchenberg avatar

auchenberg/vscode-browser-preview

0
View on GitHub↗
4,383 stars·154 forks·TypeScript·MIT·19 views

Vscode Browser Preview

vscode-browser-preview is an editor-based web previewer and integrated debugger that embeds a live browser instance directly within the workspace. It utilizes headless browser integration to synchronize the browser state with the active code editor.

The project provides an integrated web debugger that allows users to set breakpoints and inspect the state of web applications without leaving the editor interface. It also enables remote developer tools access via a network URL to analyze page elements, styles, and network activity.

The system supports frontend development workflows by providing in-editor web previews for real-time viewing of styles and layouts. This includes capabilities for browser state inspection and web application debugging.

Features

  • Editor Live Previews - Provides a live web page preview directly inside the code editor to eliminate switching between environments.
  • Chrome Debugging Interfaces - Utilizes the Chrome DevTools Protocol to provide programmatic browser control and execution state inspection.
  • Debugger Integrations - Integrates a debugger that lets users set breakpoints and inspect web application state inside the editor.
  • Integrated Debuggers - Provides an integrated debugger within the editor for setting breakpoints and inspecting code execution.
  • VS Code Extensions - Provides a specialized browser preview and debugging integration as a VS Code extension.
  • Frontend Development - Facilitates a frontend development workflow by providing real-time visual feedback on styles and layouts.
  • Web Application Debugging - Connects a debugger to a browser instance to set breakpoints and inspect code execution within the editor.
  • Headless Browser Orchestrators - Manages a separate headless browser instance to render web content and expose it within the editor.
  • Browser DevTools Inspections - Allows analysis of page elements and network activity using integrated browser developer tools.
  • Remote DevTools Access - Enables remote developer tools access via a network URL to analyze page elements, styles, and network activity.
  • Process Isolation Architectures - Runs the browser as a separate system process to maintain editor stability and avoid thread blocking.
  • Webview Content Renderers - Renders the remote browser output inside a sandboxed HTML container embedded within the editor user interface.

Star history

Star history chart for auchenberg/vscode-browser-previewStar history chart for auchenberg/vscode-browser-preview

How this analysis was created: This summary and feature list were written by an AI model that read the project's README and public documentation pages. Each feature links to the documentation it came from; stars, license and language come straight from the GitHub API. The model does not read the source code, and the analysis is refreshed when the project is re-analysed. Learn more on our About page.

AI search

Explore more awesome repositories

Describe what you need in plain English — the AI ranks thousands of curated open-source projects by relevance.

Start searching with AI

Open-source alternatives to Vscode Browser Preview

Similar open-source projects, ranked by how many features they share with Vscode Browser Preview.
  • jakhuang/form-generatorJakHuang avatar

    JakHuang/form-generator

    9,330View on GitHub↗

    This is a visual form builder that generates Vue single-file components from a drag-and-drop canvas. It provides a complete workflow for designing forms visually, previewing them in real time, and exporting them as ready-to-use Vue code with validation rules already configured. The tool integrates a drag-and-drop canvas with a live preview pane, allowing you to see the generated form interactively as you build it. It includes an embedded code editor with hot reload, so changes to the generated code are reflected immediately in the preview. A VS Code extension bridge lets you open the designer

    Vueelement-uiform-designermonaco-editor
    View on GitHub↗9,330
  • tonybaloney/vscode-petstonybaloney avatar

    tonybaloney/vscode-pets

    4,105View on GitHub↗

    vscode-pets is a Visual Studio Code extension that integrates virtual pets into the editor. It functions as a developer wellness tool and a webview-based interface enhancement, providing interactive pixel-art companions that live in a dedicated panel within the workspace. The extension allows for a customizable pet population where users can spawn companions with specific types, colors, and names. These pets react to cursor movements and can engage in social behaviors or activities, such as chasing a ball during a fetch trigger. Users can personalize the environment by switching themed backg

    TypeScripthacktoberfesthacktoberfest-acceptedtypescript
    View on GitHub↗4,105
  • microsoft/vscode-recipesmicrosoft avatar

    microsoft/vscode-recipes

    5,959View on GitHub↗

    vscode-recipes is a collection of configuration patterns and guides for setting up debuggers and runtime environments within VS Code. It provides standardized templates and blueprints to connect the editor to local, containerized, or serverless runtimes across a variety of programming languages and frameworks. The project focuses on coordinating simultaneous debugging sessions across client-side and server-side processes to trace logic through full-stack applications. It offers specific patterns for integrating language runtimes and orchestrating multi-language development setups within a sin

    JavaScript
    View on GitHub↗5,959
  • jsbin/jsbinjsbin avatar

    jsbin/jsbin

    4,421View on GitHub↗

    JSBin is a collaborative JavaScript playground and online frontend sandbox for writing, executing, and debugging web code. It provides a real-time code editor and an integrated environment that instantly renders HTML, CSS, and JavaScript with a live preview. The platform is designed for live coding demonstrations and pair programming, featuring a broadcasting environment that transmits keystrokes and code changes to other users instantly. It supports real-time synchronization for multiple developers through shared live sessions and includes a transpilation tool to convert alternative programm

    JavaScript
    View on GitHub↗4,421
See all 30 alternatives to Vscode Browser Preview→

Frequently asked questions

What does auchenberg/vscode-browser-preview do?

vscode-browser-preview is an editor-based web previewer and integrated debugger that embeds a live browser instance directly within the workspace. It utilizes headless browser integration to synchronize the browser state with the active code editor.

What are the main features of auchenberg/vscode-browser-preview?

The main features of auchenberg/vscode-browser-preview are: Editor Live Previews, Chrome Debugging Interfaces, Debugger Integrations, Integrated Debuggers, VS Code Extensions, Frontend Development, Web Application Debugging, Headless Browser Orchestrators.

What are some open-source alternatives to auchenberg/vscode-browser-preview?

Open-source alternatives to auchenberg/vscode-browser-preview include: jakhuang/form-generator — This is a visual form builder that generates Vue single-file components from a drag-and-drop canvas. It provides a… tonybaloney/vscode-pets — vscode-pets is a Visual Studio Code extension that integrates virtual pets into the editor. It functions as a… microsoft/vscode-recipes — vscode-recipes is a collection of configuration patterns and guides for setting up debuggers and runtime environments… jsbin/jsbin — JSBin is a collaborative JavaScript playground and online frontend sandbox for writing, executing, and debugging web… chromedevtools/devtools-frontend — This project is a specialized browser debugging interface designed to monitor DOM elements, network traffic, and… cyrus-and/chrome-remote-interface — This project is a Node.js library and browser automation framework that provides a JavaScript interface for the Chrome…