> ## Documentation Index
> Fetch the complete documentation index at: https://magicpatterns.mintlify.site/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Controls

> Compare design variants and tune meaningful options directly in Preview.

Controls let you compare intentional design variants and tune meaningful details without asking the agent to regenerate the design after every change.

<Frame>
  <video autoPlay muted loop playsInline preload="auto" src="https://cdn.magicpatterns.com/uploads/kTkHGZWQ6S4SQXVQ27aZBZ/controls.mp4" />
</Frame>

## Use Controls

<Steps>
  <Step title="Open Controls">
    Click the sliders icon in the Preview toolbar.
  </Step>

  <Step title="Try different options">
    Switch between variants, toggle behaviors, or adjust the available values.
    The design updates immediately without refreshing the preview.
  </Step>

  <Step title="Keep your choices">
    When you have active changes, click **Make defaults**. Magic Patterns puts
    your selected values into the agent prompt so you can review and send the
    request.
  </Step>
</Steps>

The badge on the Controls icon shows how many values differ from the design's defaults. Click **Reset** to restore every Control to its original value.

## Add Controls to a design

If a design has no Controls, open the panel in the editor and click **Ask Agent**. Describe the variants, behaviors, or structural choices you want to compare, then send the completed prompt.

Good Controls represent decisions with multiple valid answers:

* Different layouts or complete visual treatments
* Behavior changes, such as a static list versus a carousel
* Coordinated choices that affect many elements, such as density or theme
* Structural options, such as showing a column or changing a section count

Controls are not intended for one-off copy, colors, spacing, typography, or sizing. Use Visual Edit for those direct changes.

<Tip>
  Keep the set focused. Two or three meaningful Controls are usually more useful
  than making every detail configurable.
</Tip>

## Changes are local

Control changes are temporary and local to the current browser tab. They do not update the source, design history, collaborators, shared links, or published output.

To make your current choices part of the design:

1. Open Controls in the editor.
2. Change the values you want to keep.
3. Click **Make defaults**.
4. Review and send the prefilled agent prompt.

People viewing a preview link can use available Controls for their own comparison, but their choices are also local and temporary. Adding Controls or making values the defaults requires access to the editor.