# Variables & Expressions

The ability to use variables within Studio greatly enhances flexibility in configuring interactivity for projects, enabling the creation of complex solutions and systems.

{% hint style="info" %}
This feature is currently in Beta as we actively refine the experience with variables and expressions. Despite ongoing improvements, it is already highly functional and enhances project capabilities significantly.
{% endhint %}

## What are Variables?

Vectary enables to create and manage variables that can be utilized across various Studio settings. These variables represent data elements such as numbers, text, or formulas, which can be created directly within Studio or imported from external sources like Google Sheets. A variable can store a specific value or use expressions to dynamically determine its value based on other parameters.

{% hint style="success" %}
Variables are also available for use in [Slider](/documentation/3d-configurator/floating-ui/slider.md) and [Input](/documentation/3d-configurator/floating-ui/input.md)
{% endhint %}

All variables are centralized for easy access and management:

{% embed url="<https://screen.studio/share/VKn4z6rw>" %}

{% hint style="info" %}
To delete or rename a variable, right-click on its name
{% endhint %}

## Expressions

Expressions provide a dynamic method for calculating parameter values using functions, binary operators, and variables.

This approach facilitates the creation of procedural effects and enables the implementation of complex solutions.

Most input fields in the UI support expressions (a detailed list can be found [here](/documentation/3d-configurator/variables-and-expressions/list-of-inputs.md)), allowing for real-time modification of various settings, parameters, and text.

## Learn more

<table data-card-size="large" data-view="cards" data-full-width="false"><thead><tr><th></th><th data-hidden data-card-target data-type="content-ref"></th><th data-hidden data-card-cover data-type="files"></th></tr></thead><tbody><tr><td><strong>Syntax</strong></td><td><a href="/pages/gpClYBjavd50LT9traID">/pages/gpClYBjavd50LT9traID</a></td><td><a href="/files/lrjLEL0JTXoCntiHh31Q">/files/lrjLEL0JTXoCntiHh31Q</a></td></tr><tr><td><strong>Functions</strong></td><td><a href="/pages/n0TWJNahcjUJIjElp5c6">/pages/n0TWJNahcjUJIjElp5c6</a></td><td><a href="/files/lrjLEL0JTXoCntiHh31Q">/files/lrjLEL0JTXoCntiHh31Q</a></td></tr><tr><td><strong>List of inputs</strong></td><td><a href="/pages/JbZktOEv3vpWw0qUfMT5">/pages/JbZktOEv3vpWw0qUfMT5</a></td><td><a href="/files/lrjLEL0JTXoCntiHh31Q">/files/lrjLEL0JTXoCntiHh31Q</a></td></tr><tr><td><strong>Data import (.csv)</strong></td><td><a href="/pages/huv9zzrgI0xxmUc5KdHV">/pages/huv9zzrgI0xxmUc5KdHV</a></td><td><a href="/files/lrjLEL0JTXoCntiHh31Q">/files/lrjLEL0JTXoCntiHh31Q</a></td></tr></tbody></table>

## Example

Let's consider a simple example using **Variables** and **Expressions**.

**Task:** create a configuration that allows parametric changes to the length and width of the tabletop.<br>

{% stepper %}
{% step %}
Create a simple table using primitives

<figure><img src="/files/iA7fAbawQGkmEqE6iACG" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Create variables: **Width** and **Length**

Assign a value of 100 to each as the base size.

<figure><img src="/files/zF80ObqzYktpnUT9Psm3" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Assign variables

Assign the created variables to the dimensions along the X and Y axes (replace the value with the variable name)

<div align="left"><figure><img src="/files/q4bl2Ef8prjTm6c8wsxD" alt="" width="323"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Expression setup

To ensure the position of the table legs changes synchronously with the table dimensions, an **expression** using the **variable** must be assigned for the position value of each leg:

<table><thead><tr><th width="116.578125">Object</th><th width="137.34765625">X</th><th width="143.63671875">Y</th></tr></thead><tbody><tr><td>Leg 1</td><td><code>-width/2+5</code></td><td><code>-length/2+5</code></td></tr><tr><td>Leg 2</td><td><code>-width/2+5</code></td><td><code>length/2-5</code></td></tr><tr><td>Leg 3</td><td><code>width/2+5</code></td><td><code>length/2+5</code></td></tr><tr><td>Leg 4</td><td><code>width/2-5</code></td><td><code>-length/2+5</code></td></tr></tbody></table>

<figure><img src="/files/BhMi9r4qGlLEaMM6ERND" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Add the **Floating UI**

Add the **Floating UI** to the scene and create a **Text** element along with a **Slider** element. The Text element will dynamically display the table size, while the **Slider** will be used to adjust the size.

<figure><img src="/files/mSAgHKbzwDo61SuicWEO" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Setup **Text** element

Setup the **Text** element using an expression so that the table size is dynamically displayed based on the size selected by the end user.\
\
Use the following expression: "Width `${width}` "

<div align="left"><figure><img src="/files/IphNNdgFttZP4jWNS0ly" alt="" width="238"><figcaption></figcaption></figure></div>
{% endstep %}

{% step %}
Setup the **Slider**

Setup the **Slider** element to allow the end user to adjust the dimensions of the table

Specify the variable **Width**, set the **Range** and **Step**:

<figure><img src="/files/EiMKDpEUwxmfdTTc8i1p" alt="" width="244"><figcaption></figcaption></figure>
{% endstep %}

{% step %}
Repeat steps 6 and 7 for the length

**Done!** The Preview mode can now be activated to check the result:

{% embed url="<https://screen.studio/share/rZf6zWna>" %}
{% endstep %}
{% endstepper %}


---

# 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://help.vectary.com/documentation/3d-configurator/variables-and-expressions.md?ask=<question>
```

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.