State
A Variable holds the count.
Counter (reactivity starter)
A compact App Connect starter in Wappler: a Variable stores state, a button updates it, and a bound text label reflects the new value immediately.
Counter: reactivity in 60 seconds
You will walk through the smallest App Connect feedback loop in Wappler: select the Variable that holds state, inspect the button action that changes it, and confirm how the bound label redraws instantly.
What you’ll learn
By the end, you should be able to explain the whole reactive chain in plain language: where the state lives, which event triggers the update, which action changes the value, and why the UI refreshes without manual DOM code.
Action
A button increments the Variable.
Binding
A text binding shows the value.
Select components in App Structure
Inspect bindings in Properties
Use the Data Picker to explore scope
Where you work
Keep Page Panels (Structure) and Selection Panels (Properties) visible.
State: a Variable
A Variable stores a value you can bind to and update through actions.
Variable component
The Variable stores the counter state. We’ll select it to review its properties. This step matters because Variable component is part of the Structure panel, and understanding that context makes the next action easier to repeat in your own project.
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 Review the component ID and see how it fits into this area.
Review the component ID
The ID is how you reference the Variable in bindings and actions (for example: counter.value, counter.setValue(…)).
Review the initial value
For Variables, prefer binding the initial value as an expression (dmx-bind:value=“0”) so it’s a real number, not an HTML string. Convert toNumber() mainly when values come from HTML inputs where the user types.
tip: App Connect expressions are declarative. Don’t use JavaScript callbacks/functions inside dmx-* expressions.
Action: increment on click
Events trigger actions. The action updates state, and bindings react automatically.
Increment button
This button increments the counter by running the Click action. We’ll select it to inspect the event.
Inspect the Click event
The Click event row in Properties is where this button’s event action is configured. Here it runs an action list that calls counter.setValue(…) to update state, and bindings update the UI automatically.
tip: Open the Actions Picker to explore the action list and configure action inputs instead of hand-typing expressions.
Actions Picker
The Actions Picker has opened from the Click event row. This is the popup where you inspect the event action list before focusing on its specific areas.
tip: Use the Actions Picker to add actions and fill their inputs safely, without hand-typing long expressions.
Actions Picker popup
The Actions Picker lets you choose actions (like setValue) and builds the Click event’s action list for you.
Available Actions and quick navigation
Use the Available Actions area to browse categories, search, and use the quick navigation controls along the top to move through long action lists faster. This step matters because this is the main browsing surface of the Actions Picker before you focus on the selected action list and action inputs.
Selected Actions (center)
This list is what runs when the Click event fires. Order matters.
Action Properties (right)
Select an action in the list to configure its inputs here (for example, the value you pass into setValue(…)). This step matters because Action Properties (right) is part of Popup Actionspickup Layout Layout Panel Preview, and understanding that context makes the next action easier to repeat in your own project.
Close Actions Picker
Close the Actions Picker to return to Properties. Use Cancel or the window close button to return to the Properties panel.
Binding: show the value
Bindings connect UI properties to data. When data changes, the UI updates automatically.
Counter display
This label is bound to the counter value. We’ll select it to inspect its text binding expression.
Text binding expression
This field contains the expression that fills the text (counter.value). Click the picker icon to inspect it with the Data Picker.
tip: Use the Data Picker to avoid typos and stay within the correct scope.
Data Bindings Picker popup
The Data Bindings Picker shows what’s in scope and lets you insert valid expressions into the field.
Data tree (scope browser)
Expand nodes to browse components and their properties. Selecting an item builds the expression for you.
Expression preview
This preview shows the final expression that will be inserted back into the field.
Close Data Picker
Close the Data Picker to return to Properties. This step matters because Close Data Picker is part of Popup Databindingspickup Button Cancel, and understanding that context makes the next action easier to repeat in your own project.
See it live
Switch to Preview mode and click the button to watch the UI update.
Switch to Preview mode
Preview mode makes the page interactive so you can use it like a user would.
Click Increment
Click the Increment button a few times. The Variable updates, and the bound text updates instantly.
Return to Edit mode
Switch back to Edit mode to continue learning.
Next steps
Now that you’ve seen the simplest reactive loop, continue with a slightly richer example or the full App Connect overview.
Pick your next tour
Continue learning App Connect gradually.