VisualKit

Live Website Editor & UI Capture

Turn any webpage into your personal design lab. VisualKit is a powerful browser extension for live webpage editing and simple screenshots.

Download selected element HTML and capture screenshots by section or full size — giving you perfect flexibility for AI references or Figma files.

Instead of juggling browser DevTools, separate screenshot apps, and bulky inspection utilities, VisualKit sits floating gently above your page — giving you instant access to inspect computed styles, tweak individual elements or global themes, modify text, replace assets, and export clean, production-ready HTML/CSS without ever leaving your browser.

Live Inspection & Box Model HUD

Hover over any element to instantly surface computed styles, dimensions, and exact padding and margin values. VisualKit even visualizes Flexbox and Grid gaps directly on the page.

Visual Style Editor (Element Level)

Open the floating Visual Editor from the HUD to modify typography, size, colors, backgrounds, spacing, borders, and border radius for any selected element.

Style Studio (Global Level)

Launch the Style Studio (Shift+S) from the global bar to adjust site-wide design tokens in real time, including document theme colors and global heading or body typography.

Element Navigator & DOM Tree

Navigate complex page hierarchies with a draggable, resizable Layers Panel (Shift+E) or use HUD breadcrumbs to select hard-to-reach parent, child, or sibling elements.

Direct Text & Asset Replacement

Double-click any text element to edit its content live on the page. Easily replace images, backgrounds, or SVGs instantly with assets from your clipboard.

Advanced Capture & Stealth Mode

Capture pixel-perfect Visible Area (Shift+1), stitched Full Page (Shift+2), or isolated Component screenshots.

Production-Ready HTML/CSS Export

Export any element as a self-contained, clean HTML/CSS package complete with embedded @font-face rules, external font links, and dynamic pseudo-classes.

Privacy First & Local Execution

Every inspection, edit, and screenshot stays entirely on your device. No tracking, no external servers — just your work.

Love VisualKit? Use it for free during the trial period, or support its journey by unlocking the lifetime Pro experience. You get full access to advanced tools like the Element Navigator, Style Studio, full-page stitching, and clean HTML export.

After your trial concludes, VisualKit transitions to a Limited Mode. You can unlock the full Pro suite permanently by purchasing a secure Polar license key ($12), keeping VisualKit actively maintained and improving.

PRICING

$12 / lifetime

Get it free

Frequently Asked Questions

Everything you need to know about the product.

General

What is VisualKit?

VisualKit is a Chrome Extension that turns any webpage into a live design lab. You can inspect element styles, edit them visually, capture screenshots, and export clean HTML/CSS — all without leaving your browser.

What is the difference between Visual Style Editor and Style Studio?

Visual Style Editor is accessed via the element HUD and focuses on specific elements — fine-tuning typography, dimensions, colors, backgrounds, spacing, borders, and border radius. Style Studio (Shift+S) is global: it adjusts document-wide design tokens like color palettes and site-wide heading or body typography.

Is my data private?

Yes. Every inspection, edit, and screenshot stays entirely on your device. VisualKit has no access to your browsing history or personal data, and no data is ever sent to external servers.

How does the trial and licensing work?

VisualKit is free to use during the trial period. After the trial, it transitions to a Limited Mode. You can unlock the full Pro suite permanently with a one-time $12 Polar license key.

What keyboard shortcuts are available?

Shift+1 — Capture Visible Area
Shift+2 — Capture Full Page
Shift+S — Toggle Style Studio
Shift+E — Toggle Element Navigator
Shift+C — Toggle Live Comparison Mode
Cmd+Z / Cmd+Y — Undo / Redo
Arrow Keys — Traverse parent, child, and sibling elements

How can I share feedback or report a bug?

You can reach the team at hi@sidiqprihatno.com. Include a brief description of the issue and the URL of the page you were editing.

Screenshots & Capture

Can I capture a full-page screenshot?

Yes. Press Shift+2 to capture a stitched full-page screenshot. VisualKit scrolls and stitches the page automatically, producing a single continuous image.

Where do my captures and exports go?

All screenshots and HTML exports are downloaded directly to your browser's default downloads folder. Nothing is uploaded to the cloud.

Will the VisualKit HUD or floating panels appear in my screenshots?

No. VisualKit automatically hides all its own UI elements before capturing, so your screenshots are always clean.

Which websites does VisualKit work on?

VisualKit works on virtually all public websites. A small number of sites with strict Content Security Policies may restrict canvas or script injection.

More Apps

Small useful apps I build for myself, then share with others.

PencilKit

Draw & Annotate on Any Webpage

DailyBattery

Your Day Has a Battery. See It.

Dzikr & Doa

Daily Authentic Dhikr & Prayers