When you add a text element and type in some text content like “Jane Doe,” you’re setting that text to a fixed or static value.
However, let’s say you want that text to show the name of the current user. Or you want it to show the description of the current product that the user is looking at. There needs to be a way for the user to set the text to “whatever is the current user’s name,” or “whatever is the product currently being viewed.”
Then you want that text to show a dynamic value.
Dynamic values are used all over the place in Plasmic Studio:
- Connect element properties (e.g. text content, props, visibility, and variants) to data to build interactive user experiences.
- Work with interactions and state
- Optionally, transform or process data with code expressions
You can usually set a dynamic value by right-clicking a property and clicking “Use dynamic value”. This will bring up the data picker, which shows you all the data available in the current component or page.
A fallback value is used if the dynamic value includes a data query that is still loading.
If you are unexpectedly seeing the fallback value, there might be an error evaluating the dynamic value.
A common error is when you try to access an object that is
You can try to fix this by using optional chaining or conditional expressions.
Data queries can only be used from the same component or page. Read the data queries documentation to learn how to fix this issue.
If you’re not seeing a state variable from your own stateful component, you might need to configure its external access.
Beyond content, bind any attribute/prop to data, such as image sources, link destinations, and custom props:
Writing code is optional. You can build many interactive experiences without writing a single line of code. However, adding just a sprinkling of code can take your projects to the next level.
If you want to transform or process data, click “Switch to Code” to open the code editor. The currently selected data will automatically be converted to code for you.
|Boolean||Invert a boolean|
|Boolean||Check a AND b|
|Boolean||Check a OR b|
|Boolean||Invert a boolean|
|Text||Get length of text|
|Text||Check text is not empty|
|Number||Compare a number|
|Number||Round a number|
|Number||Round a number down|
|Number||Round a number up|
|Array||Get length of array|
|Array||Access item in array|
|Object||Access value in object by name|
Note arrays are 0-indexed, so the first item is 0
Access only if object exists
Data is referenced via a few special global variables:
|State variables available to the current component or page.|
|Props passed into the current component.|
|Page URL path params (e.g. |
|Page URL query params (e.g. |
|Any other data provided by code components.|
|Object containing data from data queries. Link to documentation|
|Object containing data from previous actions. Only available in interactions. Link to documentation|
|Object containing data about the logged-in user. Only available when auth is enabled. Link to documentation|
Only the following globals are permitted: