The short answers. For the longer version, the linked pages go deeper.
What is Xtractly and what does it do?
Xtractly is a browser extension and web app that lets you extract real code from any live website — components, colors, fonts, and assets — in one click. Instead of recreating designs from screenshots or digging through DevTools, you grab the actual rendered styles and paste clean code straight into your project or AI tool.
Does it work on React, Vue, and heavily JavaScript-driven sites?
Yes. Xtractly reads the rendered DOM, not the source. It works on every framework we've tested — Next.js, Nuxt, SvelteKit, Webflow, Framer, you name it. A handful of sites with strict CSP headers may limit certain extractions, but that's rare.
Can AI tools like Claude, Cursor, or v0 use Xtractly directly?
Yes. Xtractly ships an MCP server — add it as a connector in Claude Code, Cursor, or Codex and your AI agent can extract component code, design tokens, colors, fonts, and assets from any live site on its own. You paste the URL, your agent does the rest. Credits are only spent when you generate inside the Xtractly app itself, not when an external AI drives the MCP.
How do I inspect fonts, colors, or assets without DevTools?
Open the Xtractly panel on any page. The Colors tab shows every color on the page or just the element you clicked — HEX, RGB, HSL, Tailwind token, all one-click to copy. The Fonts tab lists every typeface loaded, with live specimen previews and CSS/Tailwind export. The Assets tab finds every image, SVG, icon, and Lottie animation on the page so you can download or copy them directly. No Inspect panel, no Network tab.
What do exported components look like?
Components come out as clean React + Tailwind CSS, shadcn/ui-ready, so they drop straight into a modern Next.js project. The extension can also copy a scraped element as plain HTML, JSX, a Vue SFC, or a Svelte component. Every file is yours to edit in the Playground before you export.
What is the Playground?
The Playground is Xtractly's in-browser code editor for components you've saved. Open any saved component, edit the files, and see a live preview update as you type. You can copy the final code, download a zip, or use the AI chat to ask for changes. The History menu lets you restore any earlier version.
Can I go back to an earlier version of a component?
Yes. Every time you save an edit in the Playground, Xtractly snapshots the previous state automatically. Open the History menu to see the full timeline and restore any earlier version — restoring also snapshots your current state first, so you can never lose work.
What's the difference between the extension and the web app?
The extension is what you use in the browser — hover, click, and extract code, colors, fonts, and assets from any live site in real time. The web app is where your saved components live: a personal library with a Playground editor, AI chat, version history, and project export. Most people use both together.
Is it legal? Am I copying copyrighted designs?
Xtractly is an inspector, the same category as your browser's built-in DevTools or 'View Source' — just faster and more useful. Inspecting how a page is built, and learning from its CSS, spacing, and structure, is how the web has always worked. What you do with what you extract is your call: most people grab references, migrate their own design systems, or rebuild their own past work. Respect copyright for logos, brand assets, and anything you ship commercially — exactly as you would with a screenshot.
Is my browsing data sent to your servers?
No. Extraction runs entirely in your browser. We cannot see what sites you visit or what you copy. We store anonymous usage counts for plan limits. That's it.
What browsers does Xtractly support?
Chrome and Chromium-based browsers: Chrome, Brave, and Edge are fully supported. Firefox support is in progress. If you're an Arc user, the sidebar API can conflict with the extension panel — use Chrome alongside Arc for now.
Are there any limitations to Xtractly?
Sites that generate content heavily at runtime (server-streamed HTML, canvas-rendered UIs) may produce incomplete extractions. A handful of sites with strict Content Security Policy headers may also limit some panel features. If you hit a tricky case, report it — even imperfect output is usually a usable starting point.
Does the Agent Bridge use my credits?
No. When Claude Code, Cursor, or Codex drives Xtractly over MCP, generation runs on your own agent subscription — not your Xtractly credit balance. Credits are only spent on in-app AI generations.
Didn't find it?
- Plans, credits & troubleshooting — billing and common fixes
- Getting started — install and first component
- Email support@xtractly.com