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
Section titled “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
Section titled “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
Section titled “Open the tour page”This tour opens a dedicated tour page so you can experiment safely.
Add a Dynamic Attribute
Section titled “Add a Dynamic Attribute”Dynamic Attributes are added from Properties via the ( + ) menu. The menu changes based on the selected element.
Selected element
Section titled “Selected element”A real element is auto-selected in Design View so Properties can show element-specific Dynamic Attributes.
Orient yourself in Properties panel
Section titled “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
Section titled “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
Section titled “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
Section titled “Common patterns”These are the Dynamic Attributes you’ll use most often across projects.
Show / Hide
Section titled “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
Section titled “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
Section titled “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
Section titled “Conclusion”Next: learn Dynamic Events and the Actions Picker.
Pick your next tour
Section titled “Pick your next tour”Continue with related tours.