Chrome side panel · Local-first
Inspect real computed styles, edit the page in place, preview states and responsive layouts, then export production-ready CSS, Tailwind, HTML or AI handoff.
Real product capture. The inspector reads 466 × 90 px for the selected heading —
the same value the browser used to render it.
Read
Computed styles, not the declaration you hoped survived the cascade.
Change
Your component state, your scroll position and your form data stay exactly where they are.
Verify
Hover, focus, active, disabled — then desktop, tablet and mobile, without resizing by hand.
Ship
Export CSS, Tailwind, HTML or an AI handoff generated from what you just built.
Interactive
Pick an element, change a property, check a state. The panel validates every value the same way the extension does, and the export updates from the values you actually set.
padding: 10px 18px; border-radius: 6px;
The panel validates each value with CSS.supports() before it reaches the element, exactly as
the extension does — an invalid value is rejected rather than silently dropped.
01Inspect
Read real computed styles instead of guessing from source CSS.
Final pixel dimensions, resolved colours and calculated line heights — the values actually painted.
The class and structure behind the element, with var() references traced to their source.
Selection survives re-renders, so the element you picked is still the element you are editing.
Supporting detail: the panel also reads ::before and ::after pseudo-elements, and
keeps a separate inspection session per browser tab.
02Edit
Tune the page where it lives. Nothing rebuilds, nothing unmounts, nothing resets.
Supporting detail: 28 editable properties, changes applied on a short debounce, per-property reset, and a full undo/redo history so a bad experiment costs one keystroke.
03Preview
Hold the page still and look at it the way a user will.
Interaction states
Supporting detail: hover, active and disabled are simulated and labelled as such in the panel; focus uses the browser's own focus when the element can take it.
04Export
What you tuned on screen is what lands in your repository.
CSS
A clean property block for the selector, ready to paste into a stylesheet.
Tailwind
Your values mapped onto utility classes instead of arbitrary numbers.
HTML
The rendered markup of the element and its subtree.
AI handoff
A structured brief your coding assistant can act on without a screenshot.
Supporting detail: the top export row carries only your modifications; the Pro row underneath adds the full computed style tree.
Free vs Pro
Free is not a trial. Select, inspect, edit, preview and export are all included, with no daily quota. Pro exists for the workflows that only matter once you are moving a design through a real codebase.
Discover
Similar element discovery finds the other nodes in the document that share the structure, classes or computed styles of your target, so you can jump between them instead of hunting through the DOM. Component extraction lifts a rendered subtree and its scoped styles into a reusable template.
Edit
Multi-element editing applies a synchronized change across every selected node at once, and the advanced inspection surface exposes the properties the basic panel holds back. Iterate with a full undo and redo history and per-property reset.
Ship
Full computed CSS export resolves the entire style tree rather than only your edits. Advanced Tailwind export maps values against theme presets, and design token extraction aggregates the colours, spacing and type scales you actually used.
| Capability | Free | Pro |
|---|---|---|
| Inspect and edit | ||
| Inspect and edit live CSS | Included | Included |
| State preview | Included | Included |
| Responsive preview | Included | Included |
| Basic CSS / Tailwind / HTML export | Included | Included |
| Pro workflows | ||
| Advanced Tailwind export | Not included | Included |
| Full computed CSS export | Not included | Included |
| Similar element discovery | Not included | Included |
| Multi-element editing | Not included | Included |
| Component extraction | Not included | Included |
| Design token extraction | Not included | Included |
Local-first
No account required, no telemetry, no page-content tracking. Everything you inspect is read, changed and exported on your own machine.
Steps 1–5 run on your machine. The only network request the extension makes is a Pro licence check, and it carries only your licence key and that activation’s instance id — never your DOM, HTML or CSS. Read the Privacy Policy.
Pricing
The inspection and editing engine is complete in Free, with no daily quota. Pro adds the workflow features you reach for when you are moving design decisions through a real codebase.
$0
The whole core engine. Inspect, edit, preview, undo and export with no daily quota.
Add to Chrome$5.99 / month
Every Pro workflow feature, billed monthly. Cancel from the billing portal at any time.
Get Pro Monthly$49.99 / year
Every Pro workflow feature for a year. $5.99 x 12 is $71.88, so a year costs $21.89 less.
Get Pro Annual$59.99 one-time
Every Pro workflow feature, paid once. No subscription, no renewal, no expiry.
Get Pro LifetimeFAQ
A Chrome side panel that reads and edits the real computed CSS of any element on any page.
You stop guessing from source CSS and rebuilding to find out what the browser actually rendered.
No. The DOM, HTML, CSS and computed styles you inspect are processed locally in your browser. MFI ships no analytics and no telemetry. The only network requests the extension makes are licence activation and validation calls, and those carry only your licence key, a device label and the activation’s instance id — never any page data. The Free plan makes no licensing requests at all. See the Privacy Policy.
No. MFI never asks you to create an account or set a password. Free needs nothing at all. If you buy Pro you receive a licence key and activate it inside the extension — that is the whole flow.
DevTools shows you computed styles but leaves you to write the rule by hand, in the panel, while the page underneath stays fragile. MFI keeps the DevTools reading model and adds the editing loop: change the value, watch the live page react, then export the result as code for your project. If you are only reading values, DevTools is still the right tool.
MFI is a Manifest V3 extension built on the Chrome side panel API, so it targets Chrome versions that provide side panel support. Other Chromium browsers implementing the same APIs may work, but Chrome is the supported target.
Nothing in the core loop. Free includes selection, computed-style inspection, 28 editable properties, state and responsive preview, undo/redo, and basic CSS, Tailwind, HTML and AI-handoff export, with no daily quota. Pro adds advanced Tailwind export, full computed CSS export, similar element discovery, multi-element editing, component extraction and design token extraction. The comparison table lists all ten capabilities.
Purchases are handled by Lemon Squeezy as Merchant of Record. We offer a 14-day refund for licences that have not been activated. See the Terms & Refund Policy or contact us from the Support page.
No account, no tracking. Everything you inspect stays in the page you are working in; the only thing that ever leaves your browser is your Pro licence key, and only to the licensing service that issued it.