Browser-based developer toolkit with 6 essential web development utilities. Single HTML file, zero dependencies — just open and use.
- Features
- Video Record
- Screenshot
- Color Pickers
- Element Inspector
- Text Extractor
- Usage
- Tech Stack
- License
| Tool | What It Does |
|---|---|
| Video Record | Record browser tab activity as video |
| Screenshot | Capture page screenshots using 5 different rendering engines |
| BG Color Picker | Pick background colors from any element on the page |
| Text Color Picker | Pick text colors from any element on the page |
| Element Inspector | Inspect DOM elements — dimensions, classes, styles |
| Text Extractor | Extract all text content from pages |
Record your browser tab as a video file. Uses the native MediaRecorder API and getDisplayMedia() for high-quality screen capture.
Five different screenshot methods, each with different trade-offs for rendering accuracy:
| Method | Library | Best For |
|---|---|---|
| html2canvas | html2canvas | General purpose, widely compatible |
| html-to-image | html-to-image | SVG-based, good text rendering |
| dom-to-image-more | dom-to-image-more | Fork with better CSS support |
| modern-screenshot | modern-screenshot | Modern API, web component support |
| rasterizehtml | rasterizehtml | Full CSS rendering via iframe |
Two color picker modes — background and text. Hover over any element on the page to see its computed color. Click to copy the hex value.
Hover over elements to see bounding boxes, class names, computed dimensions, and CSS properties. Similar to browser DevTools but embedded in the page.
Select a region or entire page to extract all visible text content. Useful for scraping text from pages without developer tools.
# Just open in your browser
open index.htmlOr drag index.html into any browser tab.
- Vanilla HTML/CSS/JavaScript
- html2canvas (CDN) for primary screenshot method
- Native browser APIs for video recording and color picking
- Brutalist dark terminal aesthetic
MIT