Stewdio Component Extract

📦 v0.1.0

💾 244KiB

📅 2026-05-06

View on Chrome Web Store

Chrome will indicate if you already have this installed.

Overview

Stewdio Component Extractor turns any live webpage into source material for motion graphics.

Point at any element on any site, a hero headline, a pricing card, a navbar, a chart, and the extension snapshots its markup, computed styles, pseudo-elements, and web fonts into clean, self-contained code. Bring that code into Stewdio and animate it like you would a Figma frame.

What you get
- JSX — a React component with inline styles and @font-face rules already wired up
- HTML + CSS — semantic markup with a tidy stylesheet and auto-generated class names
- Live preview — see the captured component render exactly as it will in Stewdio, before you copy
- DOM breadcrumb — walk up the tree to grab the parent container without re-picking

How it works
- Open the side panel and click Pick element
- Hover anything on the page; click to capture
- Switch between JSX and HTML+CSS, copy, and paste into Stewdio