The editor

Components

How to browse, view, describe, rename, organize, create and delete your site's components in the Components tab.

A component is a reusable building block: a section such as a hero or a pricing table, a smaller piece such as a card, or a layout piece such as the header. Pages are assembled from components. See Shared components and "used on N pages" for why that matters when you edit.

To see your components, click Pages in the left icon rail and open the Components tab.

Browse components

Components are grouped into Sections, UI and Layout. Use the buttons under the search box (All, Sections, UI, Layout) to show one group, or type in Search components or usage....

Each row shows the component's name and how many pages use it (for example 2 pages). Components can sit in folders; click a folder's arrow to open or close it.

If you have none yet, the tab says No components yet. Components appear here when you create one from a selection, insert a section, or ask the AI to build one.

View a component on its own

Click a component's row (or right-click it and choose View). The canvas shows just that component, and the top bar shows its name with Component.

The component is shown with sample values. A bar above it says Component view or, when sample values are filled in, how many preview values are injected. Click Edit values to change the sample values. They're for previewing only and aren't saved to the component.

To go back to your pages, choose a page from the page switcher in the top bar.

Describe, rename or delete

Right-click a component's row:

Describe has the AI write a short description of what the component is for. Descriptions help you and the AI choose the right component, for example in Replace with component….
Rename opens a dialog. Names must be in PascalCase, such as PricingTable, and unique on your site. The dialog tells you how many pages will be updated; every page that uses the component is updated for you.
Delete removes the component. If it's in use, the dialog lists where (Where it is used) and warns This can damage your site. Confirming with Delete component and its uses removes every instance and its content; they aren't turned back into regular elements. Delete is undoable with Cmd/Ctrl+Z for a while afterwards.

A read-only badge means the component can't be renamed, described or deleted here.

Organize into folders

Drag a component onto another component in the same group to put them in a folder together. Drag a component onto a folder to move it there, or onto the group heading (Sections, UI, Layout) to move it back out. Components can only move within their own group.

Right-click a folder to Rename or Delete it. Deleting a folder deletes the components inside it and removes their instances everywhere.

Create a component from a selection

Select an element or group of elements on the canvas.
Right-click and choose Create component….
Enter a Component name, then click Create component.

The AI turns your selection into a component while keeping its content and behavior, and puts the new component in its place. Whether it becomes a section or a UI component depends on what you selected; the dialog shows the Category.

You can also ask the AI to create components for you.

Replace something with a component

Right-click a selection on the canvas and choose Replace with component…, then pick a component. With Preserve with AI on, the AI carries your content and links into the component. With it off, you get a plain component and the original content isn't copied. See Dark Magic.

To go the other way, right-click a component instance and choose Convert to regular element. The component is replaced on that page by ordinary elements you can edit freely.

Locked components

Some components are managed by Starjay, such as the building blocks of forms. They don't appear in the Components tab. On the canvas they show a Locked badge. You can style them, but you can't add or delete elements inside them; you'll see Cannot delete elements in a structure-locked component. They're locked so a form keeps working: its fields, labels and submit button have to stay connected.