VisualKit

Live Website Editor & UI Capture

Turn any webpage into a simple design lab. VisualKit lets you edit live pages, grab clean screenshots, and export selected elements as ready-to-use HTML/CSS.

No more juggling DevTools and screenshot apps. VisualKit floats on top of the page so you can inspect styles, tweak UI, and save what you need without leaving your browser.

Features

Live Inspection & Box Model HUD

Hover over any element to view computed box model metrics, gap spacing, and border radius visualizations. Instantly inspect typography details — like font family, size, and line height — plus exact color palettes used in the selected element.

Visual Style Editor

Fine-tune element typography with the full Google Fonts library, font sizing, padding, margin, and border radius. Need extra flexibility? Write custom CSS directly inside the editor to tweak any property freely.

Style Studio (Global Level)

Open the Style Studio (Shift+S) to adjust design tokens across the entire page. Change document-wide typography and brand color palettes globally in real time.

Element Navigator & DOM Tree

Navigate complex page hierarchies effortlessly between parent, child, or sibling elements. Reorder elements across sections by dragging on screen or moving them into new parent containers via the navigator.

Direct Text Edit & Asset Management

Double-click any text element to edit copy live on the page. Copy or replace selected images and SVGs inline, or download single and batch assets — including images, SVGs, and videos — directly from your selection.

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.

Translate Selection

Translate selected text elements into your target language directly on the page, letting you preview multilingual copy layouts without breaking design flows.

Multiple Element Selection

Select multiple elements at once to combine them into a Flexbox layout and edit their shared styles. Easily copy combined text or batch download all contained images, SVGs, and videos.

Privacy First & Local Execution

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

Ready to start?

Try VisualKit free during your trial with full access to all features. When it ends, unlock the permanent Pro experience anytime with a one-time $12 Polar license key.

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 [email protected]. 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

Native-Feel Web Sketching & Annotation

DailyBattery

Visualize your focus energy

Dzikr & Doa

Daily Authentic Dhikr & Prayers