> ## Documentation Index
> Fetch the complete documentation index at: https://rive-transitions-2.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
# Converters
> Transform and adapt data before it’s applied to a binding using built-in and custom converters.
export const YouTube = ({id, timestamp}) => {
const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
return ;
};
Converters transform values before they are applied to a binding.
Use them to adapt your data to match the property you're binding to—for example, converting numbers to strings, mapping values between ranges, or smoothing changes over time.
## Adding a Converter
In the Assets panel, click the `+` button and select a [converter type](#converter-types).
With the converter selected, update the settings in the right sidebar.
Most options can be data bound.
When setting or updating a binding, set the **Converter** field..
## Converter Types
Converters can be used individually or combined into [groups](#converter-groups) to perform more complex transformations.
Each converter has its own set of properties, many of which can be bound to other View Model properties.
This allows converter behavior to update dynamically. For example, you could bind the maximum value of a range map, a multiplier in a formula, or the padding amount in a string converter.
| Category | Converter | Description |
| -------- | --------------------------------------- | ----------------------------------------------- |
| String | [Pad](#pad) | Add padding to a string |
| | Trim | Remove leading or trailing whitespace |
| | Convert to String | Convert a value to a string |
| | Remove Trailing Zeros | Remove unnecessary decimal zeros |
| Number | Round | Round to the nearest value |
| | Calculate | Perform simple calculations |
| | [Range Map](#range-map) | Map a value from one range to another |
| | [Interpolator](#numeric-interpolator) | Smoothly interpolate between values |
| | [Formula](#formula) | Evaluate a custom expression |
| | Convert to Number | Convert a value to a number |
| Boolean | Toggle | Invert a boolean value |
| List | [Number to List](#number-to-list) | Generate a list of components based on a number |
| | List to Length | Get the number of items in a list |
| Color | [Interpolator](#color-interpolator) | Smoothly interpolate between colors |
| Script | [Converter Scripts](#converter-scripts) | Create your own custom converters |
### Pad
Pads a string to a target length by repeating a value at the start or end.
If the string is shorter than the specified length, the pad value is repeated and added until the target length is reached.
**Example:**
* **Value:** 1
* **Pad:** "0"
* **Direction:** Start
* **Length:** 3
**Result**: "001"
***
### Range Map
Maps a number from one range to another.
Use Range Map when you want to take an input value and convert it into a different scale.
**Example**
Convert a slider value (0–100) into an opacity value (0–1):
* **Input**: 50
* **Input range**: 0 → 100
* **Output range**: 0 → 1
**Result**:
0.5
***
### Numeric Interpolator
Smoothly transitions between number values over time, easing changes instead of jumping instantly.
***
### Formula
Formula lets you perform custom calculations using values from your View Model or the input.
You can create a formula in two ways:
**Writing it directly**
```lua theme={null}
random({{NumberConvertersVM/circleX}} / {Input}) + 2
```
`{Input}` refers to the incoming value, while `{{...}}` references View Model properties.
**Using the editor**
Click the + button to add values, operations, and functions. This builds the formula for you and generates the equivalent expression.
**Formulas don't need inputs**
The following formula would output a random number, regardless of input.
```lua theme={null}
random(2)
```
#### Random Mode
When using `random()` in your formula, the Random Mode determines when a new random value is generated.
* **Once** — Generates a random value only when the formula first runs
* **Source Change** — Generates a new value each time the input changes
* **Always** — Continuously generates new values while the input changes and during interpolation
***
### Number to List
The Number to List converter allows you to generate a specified number of Components based on a number.
See [Lists](/editor/data-binding/lists#view-model-number-with-converter) for more information.
***
### Color Interpolator
Smoothly transitions between color values over time, easing changes instead of jumping instantly.
***
### Converter Scripts
Scripting lets you create your own custom converters when you need behavior that isn’t covered by the built-in converters.
See [Converter Scripts](/scripting/protocols/converter-scripts) for more information.
## Converter Groups
Converter groups let you chain multiple converters together, where the output of one becomes the input of the next.
In the Assets panel, click the `+` button and select Converter > Group.
With the group selected, add the `+` button in the right sidebar and select an existing or new converter.
When binding a value, your converter group can now be used just like an individual converter.
### How execution works
Converters run from top to bottom:
* The first converter receives the original input
* Each converter passes its result to the next
* The final output is the result of the last converter
### Reordering converters
Drag a converter up or down to change when it runs.
Earlier converters affect all converters that follow.