Components & the Library

Open the Add panel in the left rail. 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

Every .astro file in your project’s src/components/ and src/layouts/ shows up under Components (and in Quick Insert). Click one to insert it, or drag it into the canvas — the import is added to the page for you. If a component has slots, you can drop content straight into them; see Layouts & Slots.

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.

One instance, or every instance

Selecting a component on the canvas shows its name at the top of the Inspector, with a count of how many times it’s used on this page and across the site. What you change from there depends on what you’re editing:

• Content and props — text, links, and other properties shown in the Inspector always apply to just the selected instance. Removing a value (×) reverts it to the component’s own default instead of deleting it outright.
• Style — selecting a component starts the Style panel on the component’s name (with its icon): your changes restyle every instance at once, and an Editing all … instances notice sits in the canvas’s bottom-right corner while you do. Click Instance to change only the selected one; that choice holds until you select something else. Layouts are the exception: selecting a layout starts on Instance, because its content is the page’s own. See Editing on the Canvas.
• Classes passed in by the instance — some components let each use add its own classes to an inner element (the starters’ Section does this with contentClass). Styling that inner element with This … selected saves the change on this instance, so other uses stay as they are.
• Structure — editing the component’s own content (opening it and changing its markup) changes every instance, everywhere it’s used.

To break one instance away from the component entirely — so future edits to the component no longer affect it — click Detach instance next to its name in the Inspector. This replaces it with its own independent markup.

Copy a section to another page or project

Select a section or other parent container, then use ⌘C and ⌘V on the destination element.

• In the same project, Plyed keeps it as a component-backed section and adds any import the destination page needs.
• In a different open project, Plyed pastes an independent rendered copy. It keeps the visible structure, content, and Tailwind classes, but is not connected to the component in the original project.

This makes it safe to borrow a finished section without creating hidden links between projects. Bring over any project-specific image, custom CSS, or code separately when the destination needs it.

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.
• After the first insertion, drag an installed 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. 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, Plyed keeps your version and tells you so in the status bar.

Essentials

The Essentials library starts with three interactive components:

• Slider: a content carousel with previous/next controls.
• Accordion: expandable sections for FAQs and other stacked content.
• Tabs: switch between related content panels with keyboard support.

Select an element, choose Inside, Before, or After, then click a component to install and insert it. Each includes its HTML, Tailwind styling, and any JavaScript it needs. The source lives in src/components/essentials/ and belongs to your project, so you or the assistant can customize it.

Libraries can have sublibraries, shown as Library / Sublibrary. Search matches library names as well as component names and descriptions. Your own .astro components continue to appear under Components.

Icons

The Icons section at the bottom of the Add panel searches thousands of open-source icons (permissively licensed — MIT, Apache-2.0, or ISC — 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

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.