AutoKuak Inspector

Point at any piece of a website and take away its HTML and CSS, already cleaned up and ready to paste.

Any website Version 1.1.0 Free

Not published yet See pricing

The extension is finished; what’s missing is its Chrome store listing. Write to us if you want it sooner.

AutoKuak Inspector 1.1.0

Start

What it does and who it’s for

Copying an element off a website with the browser’s own tools is easy to start and hard to finish: you get the HTML, but the CSS is spread over five stylesheets, half the classes come from a framework and the images point at relative paths that don’t exist outside that domain.

AutoKuak Inspector handles that last part. It compares the element’s computed styles against what the browser would apply by default, keeps only the difference, groups repeated rules, picks up hover and focus states, and hands you a file that opens on its own and looks the same.

And since a capture usually needs tweaking, the panel carries an editor: change text, colour, typeface, sizes, borders, shadows and filters, and watch it change on the real page while the code updates itself. It’s free, needs no account and sends nothing anywhere.

How to use it

1

Open the panel on any site

It works on normal pages (http, https and local files). The Chrome store itself, PDF viewers and the browser’s internal screens can’t be inspected, and the panel explains why.
2

Press “Start capture” and point

Hover over the page. The wheel or the arrow keys move up and down the tree to grab the parent or the child; C freezes the hover for menus that vanish; click selects and Escape exits.
3

Look at the code

Three formats: HTML with its style block, HTML and CSS separate, or styles inlined on the tags for email. The viewer has line numbers and can be edited by hand.
4

Edit it live

Four sections — Text, Background, Box and Effects — with everything you can touch. Each change lands on the real element and shows up in the code. Undo, redo and “Restore original”.
5

Copy it, download it or save it

Copy to the clipboard, download an .html that works on its own, or save it under a name in “My captures”, the panel’s local library.

Everything it can do

Capture

Visual picking Highlights whatever is under the pointer and selects it with a click.
Move up and down the tree With the wheel or arrow keys, to grab the whole card instead of the text inside. There are also Parent and Child buttons and a clickable breadcrumb.
Freeze the hover The C key pins the state to capture dropdown menus and elements that vanish when the pointer moves.
Multi-select Shift-click adds elements within the same capture session.
Detects a lost element If the site re-renders, navigates away or you close the tab, the panel says so and offers to recapture.

The code you take away

Clean HTML No event handlers, no framework attributes and no generated ids; classes are renamed and SVGs kept intact.
CSS with only what changes It’s compared against what the browser would apply by default and the rest is dropped; inherited values aren’t repeated on descendants.
States and pseudo-elements Hover, focus and active states are collected, along with ::before and ::after and declared fonts.
Three formats HTML with a style block, HTML and CSS separate, or inlined styles for email.
Honest warnings If the element is huge it’s trimmed and you’re told; if a stylesheet from another domain can’t be read, likewise.
Editable by hand The code viewer can be edited; “Copy” always copies what you see.

Edit live

Text Content, colour, typeface, size, weight, line height, letter spacing, alignment and transform.
Background Colour, a two-stop gradient with an angle, or a background image.
Box Width, height, padding, margins, display, border with width, style and colour, radius, and a shadow with all its values.
Effects Opacity, blur, brightness, contrast, saturation, scale, rotation and transition.
Undo and restore Step-by-step undo and redo, plus a button that returns the element to how it was.

Export and save

Copy to clipboard Whichever format you’ve chosen, with whatever changes you made.
Download .html A file that opens on its own in the browser and looks the same.
My captures A local library with a name per capture: open, copy or delete.
Isolated preview Rendered from the exported code, in a frame isolated from the original site, to check it stands on its own.

The three code formats

Switch with one tap and the code is recomposed instantly.

HTML with styles

A single block with the markup and its stylesheet inside. The format for pasting anywhere.

HTML and CSS separate

Two tabs, to drop each part where it belongs in a project.

Inline styles

Every style on its own tag, which is what email clients accept.

What it needs and what data leaves your machine

Chrome 116 or later (any Chromium-based browser works too).
It works on any web page, but only looks at the tab where you press “Start capture”.
Everything happens in your browser. The extension has no server: it couldn’t send anything even if it wanted to.
Saved captures live in Chrome’s local storage, on your machine.
There’s no account, no sign-up and no allowances.
Scripts are injected only when you start capturing; outside that it touches no page.

What changed

1.1.0 Current

The panel uses the Kuak Studio skin, with light and dark modes.
Shift-click multi-select, with a counter of elements captured in the session.
A warning when the element disappears because the site re-rendered, with a button to capture it again.

1.0.0

Capture, self-contained HTML and CSS extraction, live editor, local library and .html export.

Frequently asked questions

Is it really free?

Yes. No account, no plan and no allowance. The extension talks to no server.

How is it different from the browser’s own tools?

The browser tools show you the code; this hands it over ready to paste: only the styles that change, classes renamed, URLs absolute and hover and focus states included.

Can I capture a whole section?

Yes. With the wheel or the arrow keys you climb the tree until you cover the card, the row or the whole section before clicking.

And if the page blocks extensions?

The Chrome store, PDF viewers and the browser’s internal screens can’t be inspected: those are Chrome’s own restrictions, and the panel says so clearly.

What about stylesheets from other domains?

Some can’t be read for browser security reasons. The extension warns you and falls back to computed styles, so hover states may come out incomplete.

Is it in the Chrome store yet?

Not yet. The extension is finished; what’s missing is its published listing. Write to us if you want it sooner.