Dynamic values

Dynamic values are used all over the place in Plasmic Studio:

  • Connect element properties (e.g. visibility, variants) to data to build interactive user experiences
  • Work with interactions and state
  • Optionally, transform or process data with code expressions

Dynamic values can use any data available in the project, such as from state variables, built-in data integrations, and data provided from code components.

Using dynamic values

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 comopnent or page.

interactions 03 data picker

If you’re not seeing a state variable from your own stateful component, you might need to configure its external access.

Video examples

Tutorial video

Connect text to dynamic data

Connect props to dynamic data

Beyond content, bind any attribute/prop to data, such as image sources, link destinations, and custom props:

Make elements repeat according to data

Conditionally show/hide elements

Use JavaScript code expressions in dynamic data

## Writing code expressions

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.

Code expressions are JavaScript code with a few limitations.

Common code expressions

TypePurposeCode expression
BooleanInvert a boolean!$state.boolean
BooleanCheck a AND b$state.a && $state.b
BooleanCheck a OR b$state.a || $state.b
BooleanInvert a boolean!$state.boolean
TextGet length of text$state.text.length
TextCheck text is not empty$state.text.length > 0
TextConcatenate text"Hello, " + $state.givenName + " " + $state.familyName
TextSubstitute text`Hello, ${$state.givenName} ${$state.familyName}`
NumberCompare a number$state.number > 0
$state.number <= 10
NumberRound a numberMath.round($state.number)
NumberRound a number downMath.floor($state.number)
NumberRound a number upMath.ceil($state.number)
NumberAdd numbers$state.a + $state.b
NumberSubtract numbers$state.a - $state.b
NumberMultiply numbers$state.a * $state.b
NumberDivide numbers$state.a / $state.b
ArrayGet length of array$state.array.length
ArrayAccess item in array$state.array[i]
ObjectAccess value in object by name
Note arrays are 0-indexed, so the first item is 0
$state.object["name"]
$state.object.name
ObjectOptional chaining
Access only if object exists
$state.object?.name
GeneralConditional expression$state.boolean ? $state.text : "Fallback text"

Fallback value

A fallback value is used if there’s an error evaluating the code expression.

A common error is when you try to access an object that is null or undefined. You can try to fix this by using optional chaining or conditional expressions.

Special global variables

Data is referenced via a few special global variables:

Global variableDescription
$stateState variables available to the current component or page.
$propsProps passed into the current component.
$ctx.paramsPage URL path params (e.g. /path/[path_param]/).
$ctx.queryPage URL query params (e.g. /path?query_param=<value>).
$ctx.<name>Any other data provided by code components.

Limitations

Only the following globals are permitted:

Array Date JSON Map Math Object RegExp Set String TypeError console

Was this page helpful?

Give feedback on this page