---
title: Variables
description: "Parameterize compositions so the same source can render different content."
---
Variables let you declare named, typed slots in a composition and fill them at render time — from a parent composition, from the CLI, or from an API call. A card composition that takes `title` and `color` can be embedded a hundred times with a hundred different values without duplicating any HTML.
## Declaring Variables
Add `data-composition-variables` to a composition's declaration root. For a full-document composition that's the `` element; for a template / fragment sub-composition (which has no `` shell of its own) it's the composition root element — the `[data-composition-id]` div. Its value is a JSON array of variable declarations — one object per variable:
```html compositions/card.html
```
Every declaration requires four fields: `id`, `type`, `label`, and `default`. `id` must be unique within the composition.
## Variable Types
| Type | `default` value | Extra options |
|------|----------------|---------------|
| `string` | `"some text"` | `placeholder?: string`, `maxLength?: number` |
| `number` | `0` | `min?: number`, `max?: number`, `step?: number`, `unit?: string` |
| `color` | `"#rrggbb"` | — |
| `boolean` | `true` / `false` | — |
| `enum` | one of the option values | `options: [{value: string, label: string}]` |
The Studio editing UI uses `label`, `type`, and the type-specific options to render the right input widget for each variable.
## What can be a variable
Variables come in two layers. The five [declared types](#variable-types) above cover typed primitive data — strings, numbers, colors, booleans, enums. For everything else, a `string` variable holding a URL is the escape hatch: your composition reads the URL and assigns it to whatever DOM element needs it.
### Parameterizing media assets
The same composition can render different images, video clips, or audio tracks just by swapping URLs through a string variable:
```html compositions/product-card.html
```
The runtime probes the DOM after your composition script runs, so a `
The same pattern covers the three media element types:
- **``** — assign from a string variable. Chrome fetches it during capture like any other image; no extra config.
- **`