Dynamic values

You can connect properties of any element (including component instances) to arbitrary data.

It is already possible to insert dynamic data into Plasmic designs using code components. For instance, you can drop in building blocks that display Shopify product info, CMS content, or data from your own data sources.

But with dynamic values, you have total flexibility:

  • Make the properties of any element (including component instances) connected to data, building the exact experience you want
  • Work with arbitrary data, without needing code components to have already been developed to display that data.
  • Optionally write arbitrary code expressions in the editor, to transform or process data however you want.

To get started, simply right-click a property in the right sidebar to link it to arbitrary data.

Note: you cannot set a property to a value that is not a string, number, or boolean!

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

Plasmic provides data via a few special global variables:

  • $ctx: context-injected data from code components.
  • $props: props passed into the immediate containing component.
Was this page helpful?

Give feedback on this page