Binding fields
Some components expose a property field (with a picker icon) that supports expressions.
Reactive basics (data → UI)
A beginner-friendly mental model for App Connect: how data, bindings, events, actions, and Dynamic Attributes combine into reactive UI updates.
Reactive basics
Section titled “Reactive basics”Build an accurate mental model for App Connect: data drives UI, and events run actions that update data. Wappler’s pickers help you wire this visually.
The reactive loop (mental model)
Section titled “The reactive loop (mental model)”Think of App Connect reactivity like a constellation:
Your job is to connect UI properties to data. When data changes, the connected parts update automatically — no manual UI refresh steps.
tip: If the UI looks wrong, check the selected component (scope) and the binding expression.
State holds values (Variable / Store / API)
Bindings read state and render UI
Events trigger actions that update state
Where data can come from (DB / JSON / API)
Section titled “Where data can come from (DB / JSON / API)”App Connect doesn’t care where the data came from — once it’s in state, bindings can use it.
The usual Wappler workflow is: Server Connect action loads/writes the database, then bindings display the result.
Most common: database via a Server Connect action (query/insert/update)
Also common: load JSON (file or generated) into state
Or fetch from an external API — then bind the values to UI
Hierarchy + loading (visual model)
Section titled “Hierarchy + loading (visual model)”This view avoids “expression syntax” and focuses on the visual principles:
Selection defines scope → loading fills data → bindings keep UI + state in sync.
Select something → the Data Picker shows that scope
Loading happens first → data isn’t ready yet
Data arrives (products.data from DB) → values become pickable
Bindings keep UI + state in sync (toggle updates styles)
Same idea, classic view
Section titled “Same idea, classic view”If you prefer a “loop” mental model, this is the same concept in a simpler sketch:
The key takeaway stays the same: change data → App Connect re-evaluates bindings → the UI stays in sync.
App Structure sets the scope
Section titled “App Structure sets the scope”Use App Structure to select what you’re working on. The selection determines what data and actions are “in scope” for pickers.
Properties is where you wire reactivity
Section titled “Properties is where you wire reactivity”Most reactive setup happens in Properties: bindings, expressions, events, and actions. Look for picker buttons to select data and actions visually.
Data → UI (reactive bindings)
Section titled “Data → UI (reactive bindings)”Bindings connect UI properties to data. When the data changes, App Connect re-evaluates expressions and updates the UI.
Bindings are “live” connections
Section titled “Bindings are “live” connections”A binding connects a property to an expression (often a data value). When any input changes, App Connect re-evaluates and updates the UI automatically.
note: You usually don’t need “refresh UI” actions. Updating data is enough.
Use the Data Picker to build expressions
Section titled “Use the Data Picker to build expressions”When a field supports bindings, click its picker button and choose data from the tree. This keeps you in the correct scope and avoids typos.
tip: If you can’t find a value in the picker, change your selection in App Structure first (scope).
Scope changes what you can pick
Section titled “Scope changes what you can pick”The Data Picker is context-aware. Selecting a different component or changing where you are in the hierarchy changes which data and methods are available.
Events → actions → data
Section titled “Events → actions → data”User interactions trigger event handlers. Those handlers run actions that update your state (variables/stores) and refresh the UI.
From event to UI update
Section titled “From event to UI update”Interactive pages follow a simple loop:
Most of the time, your job is just: wire the event and pick the action. The UI updates when the data changes.
Pick an event (click/submit/...)
Pick an action (setValue/load/...)
Bindings re-evaluate → UI updates
Common: form → action → database
Section titled “Common: form → action → database”This is the most common production pattern in Wappler apps:
The form doesn’t talk to the database directly — it calls a Server Connect action, which validates input and writes/reads the database.
User fills inputs (local state updates live)
Submit → Server Connect action receives POST data
Action validates + runs DB query/insert/update
Response updates state → UI shows success/errors
Events belong to components
Section titled “Events belong to components”Events are attached to the selected component (button, form, input, etc.). Select the element first, then configure its events in Properties.
Actions Picker and action inputs
Section titled “Actions Picker and action inputs”The Actions Picker lets you choose what should happen (setValue, toggle, load, insert, update…) and then wire its inputs from the Data Picker.
tip: A good workflow: pick an action first, then wire its inputs from the Data Picker.
Dynamic Attributes ( + )
Section titled “Dynamic Attributes ( + )”Some reactive behavior is added as attributes and events via the ( + ) button, not as a pre-defined property field.
Add Dynamic Attributes with ( + )
Section titled “Add Dynamic Attributes with ( + )”Some bindings are added as attributes (like show/hide, class, repeat, on click, …). In the Dynamic Attributes section, use the ( + ) button to add them to the selected element.
tip: If you don’t see the Dynamic Attributes section, try selecting a different element (or insert a component that supports those attributes).
Two ways to add reactivity
Section titled “Two ways to add reactivity”Dynamic Attributes
Others are added via ( + ): show/hide, class, repeat, on click, and more.
Same model
Both create reactive expressions: when inputs change, the result updates.
If you don’t see a field, look for ( + )
If you don’t see a value, change scope
Let data changes drive UI updates
Why the ( + ) list changes
Section titled “Why the ( + ) list changes”The Dynamic Attributes list is context-aware: it changes based on the selected element and the installed component rules. If you don’t see an attribute, try selecting a different element or inserting the related component first.
Conclusion
Section titled “Conclusion”Recap the mental model and pick a next tour.
What to remember
Section titled “What to remember”If you keep this loop in mind, App Connect becomes predictable and easy to debug.
Data
State lives in Data components and stores.
Bindings
UI reads data through expressions in Properties.
Events
Events run actions that update data.
Select the right component (scope)
Use pickers to build expressions/actions
Update data → UI updates automatically
Next steps
Section titled “Next steps”Choose a focused tour to practice the loop (data → UI) and the pickers.
Hands-on starter
Build something small end-to-end.
Deeper concepts
Learn scoping, expressions, and common patterns.
Interaction
Wire real events and actions.
Quick Overview: insert a Variable + wire an event
Core concepts: expressions + pickers + scope
Events & actions: practical interaction patterns