Adding Elements

There are two ways to add something to a page: the Add panel in the left rail, and Quick Insert, a search box you open from the keyboard. Both add relative to your current selection, so select an element first.

The Add panel

Open Add in the left rail. Pick Inside, Before, or After at the top, then click an element, one of your components, or a Library section, or drag it straight onto the canvas. Besides the basics (Section, Container, Heading, Paragraph, Link, Button, Image, List, Divider), there are Nav, Header, Footer, Aside, and Article for page structure, and Slot / Named slot for components (see Layouts & Slots).

Your components and your layouts are listed together under Components. The search box forgives small typos.

Quick Insert

Press ⌘E, or / while something is selected on the canvas, and start typing. Press Enter to add the highlighted result, or Esc to close.

• The new element goes inside the selection. If the selection can’t contain anything (an image, say), it goes after it instead. The line at the bottom of the box tells you which.
• Small typos are fine: dov still finds Div, and spna suggests <span>.
• Your own components and layouts show up in the results too. Adding one also adds its import to the page.
• div*5 adds five <div>s at once.

Shorthand: build several elements at once

Type a short description of the structure you want and Quick Insert offers it as a single result:

Type	You get
div>nav>p	A div holding a nav that holds a p
nav>a+a	A nav with two links side by side
ul>li*3	A list with three items
p{Hello there}	A paragraph that says “Hello there”
div.flex.gap-4	A div with the classes flex gap-4
div flex gap-4 p-6	The same, typed with spaces
section / hero	A section with the class hero

• > puts the next element inside, + puts it next to the one before, *3 repeats it, .name adds a class, and {…} sets its text.
• Classes after a space have to look like Tailwind classes (flex, p-4, md:text-lg, bg-[#fff], …), and they show up as pills inside the search box as you type. Anything else after a space is treated as a search, so sidebar layout still finds the Sidebar layout preset. Type / before your classes to make Quick Insert treat whatever follows as classes, Tailwind or not.
• Text elements come with placeholder text: a paragraph gets a line of lorem ipsum, headings say “Heading”, links say “Link” (with href="#"), buttons say “Button”, list items say “List item”. Containers come empty.
• Inside shorthand you can use everyday names: par, paragraph, or text for a paragraph, btn for a button, link for a link, heading or title for an h2, image for an image, list and item for a list and its items, box or container for a div. For example, btn{Sign up} or par text-lg.

Actions on the selection: ⌘P

⌘P opens a palette of things you can do to the selected element: insert inside it, find an element, duplicate, wrap in a div, unwrap, create a component, copy, cut, paste inside, select its parent or first child, and delete. ⌘K is still the full command palette, with everything else.

One page, or every page?

Most pages are wrapped in a layout, a shared file (in src/layouts/) that holds what every page has in common: the <body>, and usually the header and footer. Where you add something decides whether it shows up on one page or on all of them:

• Inside the page’s main content (the layout’s <main>): this page only. Pick an element in there before you add.
• Straight into <body>: the body belongs to the layout, so the new element goes into the layout and shows on every page that uses it. Plyed asks first with an Add to every page button; choose Cancel to add nothing.
• Content that already lives in the layout (like a header link) is edited, moved, and deleted directly, without a prompt. It’s already on every page.

To protect the page itself, Plyed won’t delete the layout that wraps a page. Select something inside it instead. If an extra layout got nested in by mistake, deleting the outer one removes just the nested copy.

Empty pages and pages without a layout

A page with nothing on it still shows an empty body on the canvas, so you can select Body and start adding. On a page without a layout, the body belongs to the page, so what you add there stays on this page only.

When a page has no layout, the Elements panel says so and offers an Add button for each layout in your project (for example Add PageLayout). Adding one gives the page your site’s header, footer, and global styles.

Moving around the tree

With an element selected, the arrow keys walk the element tree: ↑ selects the parent (all the way up to Body), ↓ the first child, and ← / → the previous and next sibling. This works whether the canvas or the rest of the editor has focus, as long as you aren’t typing in a field.