DEV Community

Soraia
Soraia

Posted on

MiroMiro - The Chrome Extension That Replaces Half Your DevTools Workflow

If you work with front-end code, you've been here: you're inspecting a website, you need an asset (an image, an SVG icon, a color value) and suddenly you're 14 clicks deep in DevTools, hunting through the Elements panel, copying inline styles by hand, or right-clicking "Save As" on images that turn out to be 47px thumbnails.

I built MiroMiro because I got tired of this workflow. It's a Chrome extension that lets you inspect any website and extract what you actually need, in one click.

Here's what it does and why 6,000+ developers have installed it.

Export Any Image in One Click

Hover over any image on a page. Click. Download.

No more right-click → Save Image As.

MiroMiro detects all images on the page. One click.

Copy & Paste SVGs Instantly

This one was a personal pain point.

With MiroMiro, you hover over any SVG, click copy, and it's on your clipboard. Clean, ready to paste into your code or Figma.

You can also bulk-export every SVG on a page at once. Handy when you're studying how a site structures its icon system.

Extract Design Tokens From Any Site

Ever land on a site and think "I love this color palette" or "what font is that?" MiroMiro extracts the full design token set from any page:

  • Colors - every color used on the page, organized and ready to copy as HEX, RGB, or HSL
  • Typography - font families, sizes, weights, and line heights as actually rendered
  • Spacing - padding and margin values from any element

No more eyeballing colors in a screenshot or guessing font sizes. You get the real values, extracted directly from the computed styles.

Extract Sections to Code

See a section on a website you want to study or reference? MiroMiro lets you select any section and extract its HTML and CSS, giving you a clean starting point instead of copying spaghetti from DevTools.

This isn't about cloning sites. It's about learning. When I was starting out, I learned more from reading real production CSS than from any tutorial.

MiroMiro makes that process frictionless.

Extract Lottie Animations

If a site uses Lottie animations, MiroMiro detects and lets you export the JSON files directly. Normally you'd have to dig through network requests to find these. Now they surface automatically.

Why I Built This

I'm a front-end developer. I was spending way too much time on repetitive inspection tasks that DevTools makes unnecessarily painful. The browser's built-in tools are powerful but they're built for debugging, not for design extraction.

MiroMiro is the tool I wanted every time I thought "I just want to grab that asset." No accounts, no setup. Install the extension and it works on any site.

It hit #2 on Product Hunt, got a Chrome Web Store Featured badge, and has grown to 6,000+ installs entirely through organic growth.

If you try it, I'd love to hear what you think. MiroMiro

Top comments (0)