Components & the Library
Open the Insert tab in the left sidebar. Everything on this page inserts relative to your current selection (inside, before, or after — pick at the top), or can be dragged straight onto the canvas.
Your components
Section titled “Your components”Every .astro file in your project’s src/components/ shows up under
Components. Click one to insert it, or drag it into the canvas — the
import is added to the page for you.
To turn something you’ve built into a component, select it on the canvas and
choose Create component… from the canvas or Elements tree context menu.
It moves the selection into a
new file in src/components/ and replaces it with the component tag —
editing the component’s content afterwards edits it everywhere it’s used.
The Library
Section titled “The Library”Below your components you’ll find the Library: ready-made sections you can add to any project. Hover a card for a description.
- Click a card to add it to your project and insert it at the selection.
- Drag a card onto the canvas to place it where you drop it.
The first time you use a library component, its files are copied into your
project — you’ll see the card switch to installed. From then on it’s a
normal component in src/components/: select it on the canvas and edit it
like anything else you built. It’s yours; there’s no link back to the
library, and updating the library never overwrites your edits.
If you re-add a library component you’ve customized, Plyy keeps your version and tells you so in the status bar.
The Icons section at the bottom of the Insert tab searches thousands of open-source icons (MIT/Apache licensed — free to use in your site, no attribution needed). Type what you’re looking for and press Enter.
- Click an icon to insert it at your selection, or drag it onto the canvas.
- Icons are inserted as inline SVG code, sized by classes and colored with
currentColor— they automatically follow the surrounding text color. - ⌥-click saves the icon into your project’s
public/icons/folder instead, for use as a regular image asset.
Your own SVG files work the same way: open one in the Assets panel and use Insert as code (keeps its colors) or Insert as icon (recolors with the text color). SVGs are automatically cleaned on import, and large photos can be converted to the lightweight AVIF format from the same panel (Convert to AVIF — the original is always kept).
The AI knows the library too
Section titled “The AI knows the library too”The chat assistant can browse and install the same library — ask for “a scrolling announcement banner” and it will reach for the Marquee component instead of building one from scratch. Skills (like the WebGL effects bundles) work the same way but add capabilities for the AI rather than sections for the canvas — see Editing with AI.