# Live Controls

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

Source: https://knowledge.estage.com/capabilities/live-controls-tag/
Part of the ESTAGE knowledge base (https://knowledge.estage.com). Full corpus: https://knowledge.estage.com/llms-full.txt

---
**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.

:::tip[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](/capabilities/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](/visual-editor/styling/) 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](/capabilities/video-library/) and
  [Courses](/capabilities/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](/building/steering-with-tags/).
:::