googlechromelabs/projectvisbug — explained in plain English
Analysis updated 2026-06-26
Test a layout or spacing change on a live site without touching code
Show a developer exactly what needs to move by editing it directly in the browser
Spot accessibility or alignment issues on any webpage in real time
Try out content or image swaps on a production page before handing off to a developer
| googlechromelabs/projectvisbug | bowser-js/bowser | fengyuanchen/compressorjs | |
|---|---|---|---|
| Stars | 5,735 | 5,735 | 5,739 |
| Language | JavaScript | JavaScript | JavaScript |
| Setup difficulty | easy | easy | easy |
| Complexity | 1/5 | 2/5 | 2/5 |
| Audience | designer | developer | developer |
Figures from each repo's GitHub metadata at analysis time.
Install from the Chrome, Firefox, Safari, or Edge extension store. No account or configuration needed, the toolbar appears immediately on any page you visit.
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.
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.
Mainly JavaScript. The stack also includes JavaScript, Browser Extension, Chrome.
Apache 2.0, free to use, modify, and distribute, including commercially. Just keep the license notice.
Setup difficulty is rated easy, with roughly 5min to a first successful run.
Mainly designer.
This repo across BitVibe Labs
Verify against the repo before relying on details.