Back to Blueboot Apps Practical software, made in York
Ctrl + Shift + Y Add to Chrome

Browser inspector for front-end builders

The live web,
ready for your code.

Select any element on a real page. Leave with clean HTML, CSS, Tailwind, React or design tokens—without transcribing DevTools or asking AI to guess from a screenshot.

Install Magpie UI free Inspect the output
HTML & CSS free Runs locally No page telemetry
Live inspection / 41msLocal capture

The workflow / 01—03

Point.
Select. Ship.

Magpie starts with the live page—the structure, styles and states the browser is actually rendering.

01

Point at the useful part

Press Ctrl + Shift + Y and hover. The selection box follows the DOM with tag names and exact dimensions. Arrow keys handle awkward nesting.

02

Capture the real thing

One click collects the useful markup, relevant computed styles, interaction states, inline SVG and source context—locally in your browser.

03

Take the format you need

Copy clean HTML or CSS for free. Pro adds Tailwind, React, design tokens, AI review and a detached multi-monitor workflow.

Real output / one selection

Five ways
to use it.

The source stays the same. Choose the handoff your project needs—cleaned from the live page, not reconstructed from pixels.

Selection
article.plan
Nodes
13 captured
Processing
41ms, on device
Clean-up
Defaults stripped, inheritance deduped
article.plan156 × 125 · 13 nodes
// faithful utilities, including off-scale values
<article
  class="relative p-4
  bg-white border-[3px]
  border-[#2759ff]
  outline outline-2
  outline-[#65e7ff]">
  <span class="text-xs text-zinc-500">
    Studio
  </span>
  <strong class="mt-8 block text-lg">
    £29
  </strong>
</article>
<!-- junk attributes removed; asset URLs resolved -->
<article class="plan plan--selected">
  <span class="plan__name">Studio</span>
  <strong class="plan__price">£29</strong>
</article>
/* computed defaults removed; useful declarations kept */
.plan {
  position: relative;
  padding: 16px;
  background: #fff;
}

.plan--selected {
  border: 3px solid #2759ff;
  outline: 2px solid #65e7ff;
  outline-offset: 5px;
}
export default function Plan() {
  return (
    <article className="plan plan--selected">
      <span className="plan__name">Studio</span>
      <strong className="plan__price">£29</strong>
    </article>
  );
}
{
  "color": {
    "surface": "#ffffff",
    "selection": "#2759ff",
    "focus": "#65e7ff"
  },
  "spacing": { "card": "16px" },
  "border": { "strong": "3px" }
}
browser defaults stripped · inherited values dedupedready to copy

Built for the handoff

The boring part,
done precisely.

Magpie keeps the context that makes an interface useful and removes the browser noise that makes computed output unreadable.

01

Clean, faithful CSS

Declarations are compared against real browser defaults, inherited values are deduped, and shorthands are collapsed.

02

Private capture library

Save, search, star and back up useful components locally. Magpie only runs when you invoke it.

03

States and assets intact

Carry hover and focus styles, inline SVG and resolved asset URLs—not just the resting appearance.

04

Agent-ready context

Copy structured evidence for Codex, Claude Code or Cursor instead of asking an agent to infer implementation from a screenshot.

Focused AI / Pro

AI when
you ask for it.

Magpie sends the extracted CSS—not your browsing history—to the action you choose. The result comes back as a reviewable draft beside the original.

Your source stays in control. No silent page edits. No mystery autopilot.
01

Explain

Understand unfamiliar layout, spacing, typography and interaction decisions.

02

Clean

Draft a conservative cleanup that reduces repetition without casually changing behaviour.

03

Audit

Surface responsiveness, accessibility and maintainability risks with fixes ranked first.

04

Mobile

Add narrow-screen CSS for the selected component without replacing the working desktop styles.

Why live beats static

A screenshot is a clue. The page is the source.

Visual references are useful. They just cannot carry the structure and browser context your implementation needs.

ScreenshotRecreate the DOM by eye
MagpieKeep structural HTML and inline SVG
DevToolsRead and clean rules manually
MagpieExport scoped CSS with defaults removed
Image-to-code AIGuess from visible pixels
MagpieGive your agent real markup, styles and tokens
BookmarksReturn and reverse-engineer again
MagpieKeep a searchable local capture library

Private by default

What you inspect stays on your machine.

Extraction and your capture library run locally. Magpie has no page-content telemetry and only touches the active tab when you explicitly invoke it.

Simple pricing

Try it free.
Buy it once.

Free handles the essential inspection work. Pro permanently unlocks every framework export and advanced workflow feature—no subscription.

FreeNo account

Inspect &
capture.

$0

forever · no card · no trial clock

  • Live hover inspector and dimensions
  • Keyboard-precise DOM selection
  • Clean HTML extraction
  • Clean CSS with supported states
  • Unlimited private local library
Install Magpie UI Free
ProLaunch price

Export &
move faster.

$59$99

one payment · permanent licence · no renewal

  • Everything in Free
  • Tailwind and React export
  • Page-wide design tokens
  • Detached Inspector with Live Picking
  • Explain, Clean, Audit and Mobile AI tools
  • 100 non-expiring AI credits included
  • Agent-ready implementation context
Get Magpie UI Pro — $59 once

Secure Stripe checkout · licence delivered immediately · no subscription

AI credits: top up only when you need them.

Each successful hosted AI action uses one credit. Credits never expire, and copying structured context for a coding agent is always free.

50 / $5 150 / $12 400 / $25

Questions / honest answers

Before you
install.

What Magpie can access, what it sends, and where the edges of live-page inspection are.

Which sites does it work on?

Any page you can open in Chrome, Edge or Brave—including production sites, staging and localhost. Browser-internal pages and cross-origin iframe contents are protected by the browser and cannot be inspected.

Can Magpie see what I am browsing?

No. Magpie uses the activeTab permission model, so it can only touch a page when you explicitly invoke it there. Extraction happens on your machine and there is no page-content telemetry.

What lands in my clipboard?

Exactly what the inspector shows: cleaned HTML, scoped CSS, Tailwind classes, a ready-to-paste React component, design tokens or structured context for a coding agent.

Does Tailwind match my configuration?

Values on Tailwind's default scale become named utilities. Off-scale values become faithful arbitrary values such as w-[437px] rather than being rounded to a near-enough token.

What does Magpie send to AI?

Only the extracted CSS needed for the action you press. It does not send your browsing history, let AI click the page, edit your project, or silently replace the original output.

How do AI credits work?

Pro includes 100 credits that never expire. Explain, Clean, Audit and Mobile each use one credit when the action succeeds. Copy for AI never uses a credit, and every non-AI Pro feature keeps working regardless of balance.

Is Pro a subscription?

No. Pro is a one-time purchase—$59 during launch, then $99. The licence and Pro features are permanent. You only pay again if you choose to buy more AI credits.

Is the free version actually free?

Yes. There is no account, card or trial clock. Free includes inspection, keyboard selection, clean HTML and CSS, and an unlimited private local library.