Add
Use ( + ) to add a dynamic attribute allowed on the selected element.
Dynamic Attributes
Dynamic Attributes overview: use Properties ( + ) to add attributes, then inspect and bind values with picker icons and valid expressions.
Introduction
Dynamic Attributes let you add reactive behavior to an element as attributes (show/hide, bind:class, repeat, and more) without typing raw markup.
What you’ll learn
You’ll locate the Dynamic Attributes section, preview the ( + ) menu (categories → submenus), then inspect an existing attribute on a real element.
Bind
Use the picker icons to insert valid expressions from scope.
Result
Your HTML stays clean, and bindings stay valid.
Select an element
Add a Dynamic Attribute
Bind it to data/state
Open the tour page
This tour opens a dedicated tour page so you can experiment safely.
Add a Dynamic Attribute
Dynamic Attributes are added from Properties via the ( + ) menu. The menu changes based on the selected element.
Selected element
A real element is auto-selected in Design View so Properties can show element-specific Dynamic Attributes.
Orient yourself in Properties panel
Start with the wider context in the Properties panel so the next control makes sense in the full workflow. In the next step, you will focus on Dynamic Attributes menu and see how it fits into this area.
Dynamic Attributes menu
This ( + ) menu lists the available Dynamic Attributes for the selected element, grouped into categories and, in some cases, submenus.
Inspect an existing Dynamic Attribute
This input already has a binding (dmx-bind:value). You can review and adjust it here, and use the picker icon to insert valid expressions instead of typing.
note: Dynamic Attributes and binding fields share the same expression rules and scope. If the picker doesn’t show something, it’s usually a scope issue.
Common patterns
These are the Dynamic Attributes you’ll use most often across projects.
Show / Hide
Use show/hide attributes for simple visibility toggles based on state and data.
warning: Show/Hide toggles visibility but doesn’t prevent processing. For performance, use Conditional Region (dmx-if) when appropriate.
Use for UI toggles
Hide a block while loading; show a message when a list is empty.
Expression-driven
The attribute value is an expression; when it changes, the UI updates.
Good for visibility
Not a performance boundary
Combine with Conditional Region for heavy UI
Bind class / style
Bind classes and styles to reflect state (active, disabled, error) without writing conditional code by hand.
Class bindings
Toggle classes based on data (e.g. selected/active).
Style bindings
Bind style values for small visual tweaks.
Repeat vs Data View / Repeater
Use repeat attributes for simple lists. Use Data View + Repeater for larger datasets, filtering, sorting, and paging.
Repeat attribute
Quick and lightweight for small lists.
Data View + Repeater
More control for real datasets.
Conclusion
Next: learn Dynamic Events and the Actions Picker.
Pick your next tour
Continue with related tours.