<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Soraia</title>
    <description>The latest articles on Forem by Soraia (@soraiadev).</description>
    <link>https://forem.com/soraiadev</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3876630%2F1fa21a04-7fda-4cef-b128-b935e1fa9589.png</url>
      <title>Forem: Soraia</title>
      <link>https://forem.com/soraiadev</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/soraiadev"/>
    <language>en</language>
    <item>
      <title>MiroMiro - The Chrome Extension That Replaces Half Your DevTools Workflow</title>
      <dc:creator>Soraia</dc:creator>
      <pubDate>Tue, 14 Apr 2026 20:34:19 +0000</pubDate>
      <link>https://forem.com/soraiadev/miromiro-the-chrome-extension-that-replaces-half-your-devtools-workflow-57id</link>
      <guid>https://forem.com/soraiadev/miromiro-the-chrome-extension-that-replaces-half-your-devtools-workflow-57id</guid>
      <description>&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;Here's what it does and why 6,000+ developers have installed it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Export Any Image in One Click
&lt;/h2&gt;

&lt;p&gt;Hover over any image on a page. Click. Download.&lt;/p&gt;

&lt;p&gt;No more right-click → Save Image As.&lt;/p&gt;

&lt;p&gt;MiroMiro detects all images on the page. One click.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkb1wtdg6cykua108otes.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fkb1wtdg6cykua108otes.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Copy &amp;amp; Paste SVGs Instantly
&lt;/h2&gt;

&lt;p&gt;This one was a personal pain point. &lt;/p&gt;

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

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

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw4va40rrm2iq40u7uhkp.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw4va40rrm2iq40u7uhkp.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Extract Design Tokens From Any Site
&lt;/h2&gt;

&lt;p&gt;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:&lt;/p&gt;

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

&lt;p&gt;No more eyeballing colors in a screenshot or guessing font sizes. You get the real values, extracted directly from the computed styles.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fg2nmfvkumpz6w40ajq.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F7fg2nmfvkumpz6w40ajq.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Extract Sections to Code
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;MiroMiro makes that process frictionless.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faqrvau8d1ikv261lmegl.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Faqrvau8d1ikv261lmegl.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Extract Lottie Animations
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Funp46vr6sb02gxi8ay3v.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Funp46vr6sb02gxi8ay3v.jpg" alt=" " width="800" height="600"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I Built This
&lt;/h2&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

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

&lt;p&gt;If you try it, I'd love to hear what you think. &lt;a href="https://miromiro.app/" rel="noopener noreferrer"&gt;MiroMiro&lt;/a&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>showdev</category>
      <category>tooling</category>
      <category>webdev</category>
    </item>
  </channel>
</rss>
