Live Controls

Turn any component into a panel you edit yourself — text, colors, images, and whole reorderable lists — with zero AI turns per change.

Live Controls is one of the most powerful things in Genesis. Point it at any part of your site and it becomes a panel you edit yourself — change text, swap colors and images, tune numbers, and manage entire reorderable lists (products, testimonials, logos, features, gallery items) directly in the sidebar. The AI wires it up once; after that every tweak is instant, with no AI request and no waiting.

How to trigger it

1. Select the component in the preview (this one needs a selection).
2. Just describe what you want editable — no special syntax needed. For example:

• "let me edit this component from the sidebar"
• "expose the heading, accent color, and testimonials as live sidebar controls"

You can name specific option names or describe the control in plain English — Genesis figures out what to wire up:

• "let me edit these testimonials, the accent color, and the number per row"
• "add a control for the spacing between icons"
• "let me control the x and y position of this div element"

You can also pick /controls Live Controls in the / menu, and a selected component with no controls yet shows an Add controls with AI button in its Live Controls section. Both send "Add live controls with useful options for this element": with no hint, Genesis looks at the component and exposes what makes sense.

What it sets up

Genesis moves the component's editable content into a data file behind the scenes and builds a matching control panel. From then on:

• The panel is your editor — edit there, not in chat.
• Changes save instantly and show a Saving… → Saved status.
• Everything is stored in a real data file, so your edits survive reloads, re-publishes, and even future AI edits to the design — they never get wiped.

What you can edit

A single panel can mix any of these:

Control	For
Text / Textarea	Headings, labels, paragraphs
Number / Range slider	Counts, sizes, items-per-row — and layout values like spacing, gap, or x/y position
Toggle	Show/hide, on/off options
Dropdown / Multi-select	One choice, or several, from a fixed set
Tags	A free list of short labels
Date / Date and time	Event dates, deadlines
Color	Color picker + hex
Image	URL, or pick from your Library / upload — with a live thumbnail
Link (URL)	Buttons and link targets
List	A repeating collection — see below
Group	A labeled block of related fields, for example the settings for one mode

A panel can also switch what it shows: one dropdown picks a mode (say, image or video) and only that mode's group of controls appears. The values of hidden groups are kept, not wiped.

It's not limited to "content" — describe a layout knob and you get a slider for it: "control the spacing between icons" → a gap slider; "control the x and y position of this div" → two position sliders. Set the range once, then nudge it live.

Lists — the powerful part

A control can be a whole list of items — your testimonials, pricing tiers, team members, logo wall, gallery. The panel gives you a full editor for it:

• + Add a new item
• Drag to reorder with the handle
• Duplicate an item
• Delete an item
• Expand an item to edit its own fields — each item carries its own text, image, link, etc.

Items show a smart label (their title/name) and a thumbnail (if they have an image), so a long list stays easy to scan.

Smart catalog binding

If the list you're exposing already powers other pages — say a product catalog that also feeds individual product pages — Live Controls binds to that same catalog instead of making a copy. Add an item in the panel and it appears everywhere that catalog is used, with no duplicate-data bugs. (This is the shared foundation behind the Product list tool — same editor, same data model.)

Where the panel lives

When you select an element that has Live Controls, its panel appears in the editor sidebar. Clicking anywhere inside a controlled section opens the right panel.

To see every editable part of the page at once, click the Live Controls button in the toolbar. It lists the page's controls (with how many items or fields each has); pick one to edit it. Highlight outlines the editable areas on the canvas.

Good to know

• Live Controls are for the knobs you'll reuse — content, options, and specific layout values (spacing, position, size). For one-off restyling, the style panel and chat are still quicker.
• List items can hold text, numbers, colors, images, links — but not a list inside a list. A group holds fields one level deep.
• If an edit doesn't show up in the preview, refresh it. Most changes apply live, but in some cases the preview needs a reload to pick them up — use the Reload preview button in the toolbar (your edits are already saved; the refresh just re-renders).
• A course catalog built from /estage Courses usually arrives with its options already exposed — see Courses. Video galleries have no Live Controls.