# Custom Controls
The **Custom Control** tab (🎚️ Controls in Simple Mode) lets you pin any numeric parameter from the Inspector directly into the operator's view — no code needed. Pinned parameters become live sliders or number inputs that any operator can adjust from the Control View without touching the composition editor.
## Why Use Custom Controls?
* **Expose only what operators need** — instead of handing someone the full editor, give them a clean set of labelled knobs.
* **Change values live** — adjustments fire to the engine immediately, with no need to stop playback.
* **Share across the network** — the Control View is a web page; any browser on the venue network can adjust the same controls simultaneously.
* **Integration** — every pinned control also generates a REST API endpoint and an HTML snippet for embedding in external systems.
***
## Pinning a Parameter from the Inspector
Any parameter shown as a **fader** (slider), **number input**, or **number pair** in the Inspector can be pinned to the Control Panel.
### Step 1 — Select the clip or layer
Click a clip in the Timeline (or a layer in the composition canvas) to show its properties in the Inspector on the right.
### Step 2 — Find the parameter
Locate the parameter you want to expose — for example **Opacity**, **Volume (dB)**, an effect's **Brightness**, or a custom shader **Uniform** value.
### Step 3 — Open the parameter's options
Click the small **link icon** (🔗) that appears to the right of the parameter's label. A tooltip expands showing three tabs:
| Tab | Content |
| ------------ | ----------------------------------------------------- |
| **cURL** | REST command to set this parameter programmatically |
| **HTML** | HTML `` snippet for embedding in a custom page |
| **📌 Panel** | Add / remove this parameter from the Control Panel |
### Step 4 — Click "Add to Control Panel"
Switch to the **📌 Panel** tab and click **Add to Control Panel**. A toast notification confirms the action:
> 📌 Added to Control Panel!
The parameter immediately appears as a control item in the **Custom Control** tab of the Control View.
> **Tip:** The button toggles. If the parameter is already pinned, the button shows **Added to Panel** with a ✓ checkmark. Click it again to remove the parameter from the panel.
***
## Control Types
The control widget that appears in the Custom Control tab depends on the Inspector component you pinned:
### Range Slider (Fader)
Pinned from a **Fader** component (e.g. Volume, Master Brightness, Opacity).
```
┌──────────────────────────────────────────────┐
│ Master Brightness │
│ path: layer.0.brightness │
│ ━━━━━━━━━●━━━━━━━━━━━━━━━━━━━━━━━ 75.0 │
│ 0 100 │
└──────────────────────────────────────────────┘
```
* Drag the slider or type a value in the numeric field.
* The min / max range is inherited from the Inspector parameter definition.
* Step size defaults to `0.1`.
### Number Input with +/− Buttons
Pinned from a **DraggableInput** or **InputPair** component (e.g. X/Y position, pixel offsets, integer values).
```
┌──────────────────────────────────────────────┐
│ Output Level │
│ path: comp.0.output.level │
│ [−] −6.0 [+] │
│ 0 100 │
└──────────────────────────────────────────────┘
```
* Click **−** or **+** to step the value by the parameter's `step` amount.
* Type directly in the field for a precise value.
***
## Renaming a Pinned Control
By default, the control label is derived from the property name (e.g. "Brightness", "Volume"). To give it a more descriptive name:
1. In the **Custom Control** tab, click the label text of the control.
2. It becomes an editable text field. Type the new label (e.g. "Stage Brightness" or "Lead Mic Level").
3. Press **Enter** or click elsewhere to save.
The custom label is stored in the project and persists across sessions.
***
## The Path Property
Each pinned control shows its **path** — the internal property address used to communicate with the engine:
```
comp.MainTimeline.layer.0.opacity
```
This path is also what's used in the REST API (see below). You can use it to:
* Verify you have pinned the correct property.
* Build external control integrations.
***
## Removing a Control
| Method | How |
| ------------------------------ | ------------------------------------------------------------------------------------------------------------ |
| **From the Control Panel tab** | Hover over the control → click the × icon in the top-right corner |
| **From the Inspector** | Click the 🔗 icon on the parameter → Panel tab → the button now shows "Added to Panel" → click to remove |
| **Clear all** | In the Custom Control tab header, click the **Clear All** (🗑) button to remove every pinned control at once |
***
## REST API Integration
Every pinned control automatically has a REST endpoint. Expand the **cURL** tab on the Inspector link icon to see the full command:
```bash
curl -X POST http://192.168.1.5:8123/data \
-H "Content-Type: application/json" \
-d '{"type":"exaObj","path":"comp.MainTimeline.layer.0.opacity","values":{"value":75}}'
```
This lets you set any pinned parameter from a lighting console, show-control system, or any tool that can send HTTP requests.
### HTML Snippet
The **HTML** tab gives you a ready-made `` element pre-configured with the correct endpoint. Paste it into any web page or custom operator panel to add an instant live control.
***
## Adding a Pinned Control to a User Panel
Pinned controls in the Custom Control tab can also be pushed to a [User Panel](/v3/user-interface/user-panel-builder.md) for end-user access:
1. In the **Custom Control** tab, hover over a pinned control.
2. A small **+** icon appears.
3. Click **+** and select the target User Panel from the drop-down.
The control now appears in both the Custom Control tab and the chosen User Panel.
***
## Tips
* **Group related controls** by renaming them with a prefix (e.g. "Act 1 — Brightness", "Act 1 — Volume").
* **Live changes are instant** — the engine receives the update on every slider movement; no "Apply" button needed.
* The Custom Control panel is **shared across all browser sessions** connected to the same engine. If two operators adjust the same slider simultaneously, the last write wins.
* Controls are **saved in the project file** and reload automatically when the project is reopened.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://docs.exaplay.one/v3/user-interface/custom-controls.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.