The library
Components in the sidebar shows every component across all your projects. Each card runs a live preview.
- Favourite with the heart — favourites sync to your account (and are visible to the Agent Bridge), so they're the same on every device.
- Filter by All / Newest / Oldest / Favourites, or search by title.
- Click a card to open it — Preview and Code tabs, copy per file, or jump to its project.
The Playground
Open the Playground tab in any project to edit a component in place:
The left side is a code editor over the component's real files (with a file tree when there's more than one). The right side is a live preview that updates about half a second after you stop typing.
Save writes your changes back to the component. Reset discards unsaved edits.
Edits are made against the raw generated files, so what's saved stays faithful —
"use client" and @/ import paths are preserved.
Tip
The Playground edits the same files the Agent Bridge's update_fragment tool
writes to. You can tweak a component here and an agent can pick it up, or vice
versa.
Version history
Every time you save an edit, Xtractly snapshots the previous state. Open the History menu in the Playground header to see the timeline and restore any earlier version.
Restoring also snapshots your current state first — you can't lose work by rolling back.
Exporting
From the Playground's Export menu:
| Option | Result |
|---|---|
| Copy component | The main component file to your clipboard. |
| Copy all files | Every file, separated by // ==== path ==== markers. |
| Download .zip | The whole component as a zip. |
The exported code is React + Tailwind, shadcn‑ready. For other framework shapes (HTML, Vue, Svelte), use the extension's Extract tool on a rendered element.