whatisgithub

What is projectvisbug?

googlechromelabs/projectvisbug — explained in plain English

Analysis updated 2026-06-26

5,735JavaScriptAudience · designerComplexity · 1/5LicenseSetup · easy

In one sentence

VisBug is a browser extension that lets designers edit any live webpage visually, tweak text, swap images, check spacing, without writing code or waiting for a developer. Works on any site in Chrome, Firefox, Safari, and Edge.

Mindmap

mindmap
  root((VisBug))
    Visual Editing
      Tweak text
      Swap images
      Adjust spacing
      Move elements
    Browser Support
      Chrome
      Firefox
      Safari
      Edge
    Use Cases
      Layout testing
      Accessibility checks
      Developer handoff
    Design Workflow
      Live page editing
      No code needed
      Any website
    Project Info
      Google Chrome Labs
      Apache 2 license
      Open source
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

What do people build with it?

USE CASE 1

Test a layout or spacing change on a live site without touching code

USE CASE 2

Show a developer exactly what needs to move by editing it directly in the browser

USE CASE 3

Spot accessibility or alignment issues on any webpage in real time

USE CASE 4

Try out content or image swaps on a production page before handing off to a developer

What is it built with?

JavaScriptBrowser ExtensionChromeFirefoxSafariEdge

How does it compare?

googlechromelabs/projectvisbugbowser-js/bowserfengyuanchen/compressorjs
Stars5,7355,7355,739
LanguageJavaScriptJavaScriptJavaScript
Setup difficultyeasyeasyeasy
Complexity1/52/52/5
Audiencedesignerdeveloperdeveloper

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Install from the Chrome, Firefox, Safari, or Edge extension store. No account or configuration needed, the toolbar appears immediately on any page you visit.

Apache 2.0, free to use, modify, and distribute, including commercially. Just keep the license notice.

So what is it?

VisBug is a browser extension that lets designers and content creators make visual edits to any live webpage, without touching code or waiting for a developer. Once installed in Chrome, Firefox, Safari, or Edge, it adds a small toolbar to your browser that turns any site into something you can point at, click, and adjust directly. You can tweak text, swap images, check spacing, and inspect how elements are aligned, all while looking at the actual running page. The tool is intended to close the gap between what a designer sees in a design application and what actually ends up on screen. Instead of drawing something in a separate design tool and then waiting to see how it renders in the browser, you can go straight to the real page and try ideas there. It works on any website regardless of the underlying technology, including production sites, prototypes, and pages that happen to be in unusual states. VisBug is not meant for creating new work from scratch. It does not connect to or enforce a design system, and it does not track changes for other collaborators to review. Think of it as a scratchpad you can draw on top of any page, useful for testing a layout idea, catching an accessibility issue, or showing a developer exactly what needs to move a few pixels. The project comes from Google Chrome Labs and is open source under the Apache 2 license. Community contributions are welcome via GitHub, and the project includes a wiki, a full keyboard shortcut reference, and chat channels for questions and discussion.

Copy-paste prompts

Prompt 1
I have VisBug installed. How do I use it to check spacing and alignment between elements on a live webpage?
Prompt 2
Using VisBug, what's the fastest way to show a developer that a button needs to move 8px to the right on our live site?
Prompt 3
I want to test how a different hero image looks on our homepage without editing any code. Walk me through doing this with VisBug.
Prompt 4
What are the most useful VisBug keyboard shortcuts for a designer doing a quick visual review of a webpage?
Prompt 5
How do I use VisBug to catch accessibility issues like low contrast or misaligned labels on a live page?

Frequently asked questions

What is projectvisbug?

VisBug is a browser extension that lets designers edit any live webpage visually, tweak text, swap images, check spacing, without writing code or waiting for a developer. Works on any site in Chrome, Firefox, Safari, and Edge.

What language is projectvisbug written in?

Mainly JavaScript. The stack also includes JavaScript, Browser Extension, Chrome.

What license does projectvisbug use?

Apache 2.0, free to use, modify, and distribute, including commercially. Just keep the license notice.

How hard is projectvisbug to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is projectvisbug for?

Mainly designer.

Open on GitHub → Ask about another repo

This repo across BitVibe Labs

Verify against the repo before relying on details.