Pablo

Pablo turns any website into a component library.

Hover any element, click once, and the full HTML + CSS lands on your clipboard, ready to paste into your editor, design tool, or AI coding agent.

WHAT PABLO CAPTURES
• Semantic HTML structure (not flattened)
• Resolved CSS, including custom properties and computed styles
• Web fonts and @font-face declarations
• CSS animations and keyframes
• GSAP timelines and tweens
• Framer Motion variants and transitions
• Optional screenshot of the captured element for visual context

FRAMEWORK-AWARE
Pablo detects the stack behind the page (React, Next.js, Webflow, Framer, Shopify, WordPress) and picks the right extraction strategy. Webflow IX2 interactions, Framer Motion props, and React component boundaries are preserved rather than flattened to raw markup.

TWO CAPTURE MODES
• Component mode. Hover, click, copy a single element with its children.
• Page mode. Capture the full visible page content in one shot.

DESIGNED FOR THE AI WORKFLOW
The output is shaped for pasting directly into Claude, Cursor, ChatGPT, or any coding agent. Bundled context (HTML + CSS + fonts + animations + screenshot) gives the model everything it needs to recreate the component in your stack.

PRIVACY
Pablo runs entirely in your browser. Nothing is sent to a server. No telemetry, no account, no cloud capture. The only network calls are the ones the page itself makes.

OPEN SOURCE
MIT licensed. Source, issues, and roadmap at https://github.com/rayan-saleh/pablo
Website and demo at https://usepablo.dev