Add elements and sections

Open the Elements panel from the left icon rail. It has a search box and these tabs:

Tab	What's in it
All	Every element and pattern below.
Text	Heading 1 to Heading 6, Paragraph, Span.
Interactive	Link, Button.
Container	Div, Section.
List	Unordered List, Ordered List, List Item.
Media	Image, Horizontal Rule.
Patterns	Small ready-made groups: CTA Group, Feature Card, Hero Block, Nav Links, Stats Row, Testimonial.
Sections	Ready-made page sections: Hero, Features, CTA, Stats, Testimonials, Blank.
Components	Your site's own components.

The Dark Magic switch at the top of the panel is on by default. While it's on, the AI restyles what you add so it fits your brand. See Dark Magic.

Add an element or pattern

You can drag or click:

• Drag an element from the panel onto the canvas. A line shows where it will land. You don't need to select anything first.
• Click an element to insert it next to your selection. Select something on the canvas first. If you selected an element inside a section, the new element goes right after it. If you selected a whole section or component, the new element goes inside it, at the end. The panel briefly shows Inserted!.

With nothing selected, the panel says Drag an element onto the canvas — or select one to insert beside it.

To add an element with the keyboard, use Quick insert.

Add a ready-made section

1. Open the Sections tab.
2. Drag a section onto the page. Sections drop between the existing sections of the page, not inside them.
3. Or right-click a section in the list. A menu titled Insert {name} lets you choose At the top, After {section}, or At the bottom.

Section	What you get
Hero	Headline, subtitle, and call-to-action buttons
Features	Three-column feature card grid
CTA	Call-to-action with heading, text, and button
Stats	Key metrics displayed in a row
Testimonials	Customer testimonial cards with quotes
Blank	Empty section wrapper — add your own content

Add one of your components

The Components tab lists your site's section components and UI components (smaller pieces such as cards or badges). Header, footer and other layout components aren't listed; see Header, footer and navigation.

• Section components go between sections, like ready-made sections. Drag one onto the page, or click Insert and choose where to place it (At the top, After {section}, At the bottom).
• UI components go next to your selection. Drag one onto the page, or select something and click Insert.

If a component needs some values before it can be placed, a Configure {name} card asks for them. Fill in the required fields and click Continue. When Dark Magic is off, the card shows all of the component's options; leave optional ones blank to use the component's defaults.

Replace your selection with a component

For UI components, a second button replaces what you've selected:

• Replace selection swaps the selected element for the component.
• Swap component appears instead when your selection is itself a component.

With Dark Magic on, you confirm with Replace with Magic or Swap with Magic. The AI carries your content and links into the new component, and the original stays visible until the replacement is ready.

With Dark Magic off, you confirm with Replace, and nothing is carried over: Raw replacement removes the selected element's content, links, behavior, and styling. Nothing is copied into {name}.

You can also right-click a selection on the canvas and choose Replace with component….

What gets refused, and why

Starjay won't insert something where it would break the page. You'll see a short message instead:

Message	Why
Select an element on the page first	You clicked to insert with nothing selected. Select something, or drag instead.
Can't add <div> inside <p> — would break the page layout (and similar)	That element isn't allowed inside the selected one in HTML. Select a different spot.
Can't insert here — element is inside a decorative container	The selection is inside an image, video, icon or similar.
Cannot add elements to a structure-locked component	The selection is inside a component Starjay manages, such as a form.
Editing is currently locked.	The AI is working, or the site is publishing. Wait until it finishes.

While the AI is working, the panel shows Editing locked — AI is generating and you can't add anything.

Related

• Quick insert
• Dark Magic
• Components
• The Navigator