Live Controls

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”

A component with no controls yet also shows an “Add controls with AI” button that does the same. With no hint at all, Genesis inspects 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	A fixed set of choices
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

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

This is what makes Live Controls imba: 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.

A real example

Select a “What our clients say” section and ask to “let me edit these testimonials from the sidebar.” You get a list where each item has a quote, an author, and an avatar — add, reorder, and edit clients yourself, forever, without ever asking the AI again.

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 — list editors sit near the top, scalar controls below. Genesis figures out which element you clicked by walking up from your selection, so clicking anywhere inside a controlled section opens the right panel.

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.
• 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).
• The components built by the Video Library and Courses integrations arrive with their controls already exposed.

Note

Just describe what you want — say “let me edit this section from the sidebar” and Genesis understands you want the Live Controls panel, not a one-off edit. See Getting the AI to do what you want.