Dynamic values
We’ve added a new core capability to Plasmic: setting dynamic values in your designs.
It is already possible to insert data/content 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 now have total flexibility to build the exact experience you want:
Link the props/attributes of any element (including component instances) to data.
Conditionally show/hide elements.
Make elements repeat according to data.
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.
A simple example to start with: make any text reflect data, and simply pick and choose what data you want to show:
Or, for the code-literate, you can directly enter arbitrary JavaScript expressions to get at the data you want.
Beyond content, link any attribute/prop to data, such as image sources, button link destinations, and custom props:
Make elements repeat according to data:
Conditionally show/hide elements:
And much more!
For JavaScript expressions, you can access both context-injected data from code components via $ctx , as well as props to the immediate containing component via $props.
You can also learn how to have your own code components make data available by providing it in a DataProvider context.
Log back into Plasmic to play with the new dynamic value capabilities!