MiroMiro: Streamlining Front-End Asset Extraction for 6,000+ Developers

MiroMiro - The Chrome Extension That Replaces Half Your DevTools Workflow

Soraia developed MiroMiro to address the friction of manually extracting assets from the browser’s Elements panel. The extension currently supports over 6,000 users and secured the #2 spot on Product Hunt. It automates the extraction of images, SVGs, and design tokens that usually require deep navigation in standard DevTools.

Why This Matters

While browser DevTools are powerful, they are primarily optimized for debugging and performance analysis rather than asset and design token extraction. Front-end engineers often face significant overhead when attempting to retrieve clean SVG code, Lottie JSON files, or computed typography styles from production environments. This friction often results in manual workarounds, such as ‘Save As’ workflows for tiny thumbnails or copying inline styles by hand. MiroMiro addresses this by bridging the gap between raw browser data and developer-ready assets, reducing the click-depth required for routine inspection tasks.

Key Insights

• MiroMiro achieved a ‘Featured’ badge on the Chrome Web Store and reached 6,000+ installs through organic growth as of 2026.
• Automated SVG extraction allows users to copy clean markup directly to the clipboard or bulk-export all vector assets from a page.
• Design token extraction captures real values for HEX, RGB, and HSL colors alongside computed typography directly from rendered styles.
• Lottie animation detection surfaces JSON files that are typically buried within complex network requests in standard DevTools.
• The tool enables selective extraction of page sections into clean HTML and CSS for study and reference purposes.

Practical Applications

• Use Case: Design system audits where developers need to extract accurate font families and color palettes from live production sites.
• Pitfall: Manual extraction of inline styles which often results in spaghetti code instead of clean, reusable HTML and CSS sections.
• Use Case: Frontend asset management where users download images or copy SVGs in a single click instead of navigating deep DOM trees.
• Pitfall: Hunting through network requests for Lottie JSON files, which can be avoided through automatic asset surfacing.

References:

• https://dev.to/soraiadev/miromiro-the-chrome-extension-that-replaces-half-your-devtools-workflow-57id