# Interpolation

### What It Does

Replaces placeholder variables in a string template with actual values. It allows you to create dynamic text by inserting variable content into a predefined template.

### Inputs

| Name      | Description                                       | Type   | Required |
| --------- | ------------------------------------------------- | ------ | -------- |
| template  | The string template with placeholders like {name} | String | Yes      |
| (dynamic) | Values to insert into the template                | Any    | No       |

### Outputs

| Name  | Description                           | Type   |
| ----- | ------------------------------------- | ------ |
| value | The final string with replaced values | String |

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2FfqGxGd3RYIbWK58p9EPi%2FCleanShot%202025-03-24%20at%2011.02.28%402x.png?alt=media&#x26;token=50122818-1b61-4c82-a6bc-ad57c87328ff" alt=""><figcaption></figcaption></figure>

### How to Use It

1. Drag the Interpolation node into your graph.
2. Connect your template string with placeholders in curly braces like "color.{base}.500" to the "template" input. Here the placeholder is "base".
3. Add custom inputs by right-clicking the node and adding inputs with names matching your placeholders.&#x20;
4. Connect values to each named input to replace the corresponding placeholders. Like "red".
5. The output of the node is "color.red.500", the placeholder "base" is replaced by the named input "red".

<figure><img src="https://3657049418-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fy0SFXZjN1sdgdxYM7QPE%2Fuploads%2Fzikfxvs5B5JjbbHJJOJI%2FCleanShot%202025-03-24%20at%2011.08.54%402x.png?alt=media&#x26;token=b315f1c4-0321-452d-974e-81299b82b6d6" alt=""><figcaption></figcaption></figure>

### Tips

* Input names must exactly match the placeholder names in your template (without the curly braces).
* Placeholders that don't have a matching input will remain unchanged in the output.

### See Also

* [**Join**](https://documentation.tokens.studio/graph-engine/available-nodes/string/join): For combining multiple strings into one without using a template.
* [**Replace**](https://documentation.tokens.studio/graph-engine/available-nodes/string/replace): For simpler find-and-replace text operations.

### Use Cases

* **Message Generation**: Create personalized messages by injecting names or other dynamic content.
* **URL Construction**: Build dynamic URLs by inserting variable parameters into a template.
* **Naming Patterns**: Generate consistent naming patterns for design tokens with variable components.