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.

State

A Variable holds the count.

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 runs an action list. Here it calls counter.setValue(…) to update state, and bindings update the UI automatically.

note: Tip: open the Actions Picker to explore the action list and configure action inputs (instead of hand-typing expressions).

Actions Picker

The Actions Picker icon opens the actions list for the Click event. This step matters because Actions Picker is part of Selection Panels Properties Click, and understanding that context makes the next action easier to repeat in your own project.

tip: Use the Actions Picker to add actions and fill their inputs safely, without hand-typing long expressions.

The Actions Picker lets you choose actions (like setValue) and builds the Click event’s action list for you.

Available Actions (left)

Browse actions by category and use Search / Expand / Collapse to navigate quickly. This step matters because Available Actions (left) is part of Popup Actionspickup Layout Layout Panel Left, and understanding that context makes the next action easier to repeat in your own project.

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. This step matters because Close Actions Picker is part of Popup Actionspickup Button Cancel, and understanding that context makes the next action easier to repeat in your own project.

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.

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.