# You've built a card component

Now you want to use it ten times, each with different content. Data binding lets you define inputs on your component and set different values for each instance — one component, many variations.

## How it works

Data binding connects **inputs** (variables you define) to **properties** (things like text content or visibility). Define an input once on your component, bind it to a property, then set different values on each instance.

```text
Component: Card
├── Input: "title"
├── Input: "showBadge"
└── Text layer bound to "title"
    Image layer display bound to "showBadge"

Instance 1: title = "Welcome"    showBadge = true
Instance 2: title = "Settings"   showBadge = false
Instance 3: title = "Profile"    showBadge = true
```

## What you can bind

Not every property supports binding. Currently, you can bind inputs to:

| Property   | Type   | Use for                              |
|------------|--------|--------------------------------------|
| **Content** | String | Text content in text layers           |
| **Display** | Boolean| Show/hide layers                      |
| **Opacity** | Number | Transparency (0–100)                  |

Look for the input reference button next to these properties — that's where you connect them to your inputs.

## Setting it up

### On the component

1. Select your component
2. In the Properties panel, find the **Inputs** section
3. Click **Add input**
4. Give it a name and optional default value
5. Find the property you want to bind (Content, Display, or Opacity)
6. Click the reference button and select your input

### On each instance

1. Select an instance of your component
2. In the Properties panel, find the **Inputs** section
3. Set values for each input defined on the component

The instance will display with those specific values.

## Troubleshooting

### Why don't I see the Inputs section on my instance?

The source component has no inputs defined. Add inputs to the component first, then check the instance again.

### Why can't I bind this property?

Only Content, Display, and Opacity support input binding. Other properties (like color or size) can't be bound to inputs.

### My bound value isn't showing

Check that:

1. The property is actually bound (reference button should show the input name)
2. The instance has a value assigned for that input
3. You're viewing the instance, not the source component.

## Coming soon

These features are planned but not yet available:

- **Variable binding** — Bind to file-level or project-level variables instead of component inputs.
- **Variable expressions** — Use expressions that reference and transform variables.
- **Computed variables** — Define variables that derive their value from other variables.