Wappler documentation
App Connect
Your guided index of App Connect tours: reactive model, data components, bindings, events/actions, and common workflows — explained visually in Wappler’s panels and pickers.
Use this hub when you are building reactive behavior with App Connect. Start with the first-step tours, then move into categories, forms, state, interactions, and reference hubs.
Start here (15)
Add App Connect to Your PagesUnderstand when a page needs App Connect and how to introduce reactive behavior without turning a simple page into unnecessary complexity.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.Calculator (expressions + toNumber)Build a small reactive calculator in Wappler and use it to understand expressions, input scope, and why toNumber() is essential before doing numeric math in bindings.App Connect Quick OverviewA hands-on intro to App Connect in Wappler: review key components, configure Properties, and attach an event action.Bootstrap 5 dynamic modals (App Connect)Control Bootstrap 5 modals reactively with App Connect: bind visibility, call show/hide actions, and handle modal events.Demo walkthrough: Dynamic Real Estate SiteGuided walkthrough of the renewed Real Estate demo: Server Connect APIs, App Connect Data Views, filters, map, and repeated listings.Contact list to detail route handoffUse the real contacts and contact detail pages to see how App Connect turns a repeated list, route parameter, and detail loader into one continuous record flow.Contact create and success handoffUse the real contact add page to see how App Connect combines lookup data, submission state, and the success handoff into the new contact detail page.Contact delete confirmation and return handoffUse the real contact edit page to see how App Connect keeps the destructive delete flow explicit with confirmation, request state, and a return-to-contacts handoff.Files library stats, links, and navigationUse the real files page to see how App Connect turns loaded file rows into summary cards, outbound file links, and project-navigation links.Browser component (navigation + viewport)Use the Browser component for navigation, online/offline state, viewport, scroll, and history events.Flows (multi-step client workflows)Learn when App Connect flows are worth introducing, how they differ from a single event → action handler, and how to think about multi-step client workflows before building them.Newsletter: Properties Panel clipA short Demo Projects HQ tour used to capture the 7.8.0 newsletter clip for the updated Properties panel workflow.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.Core concepts (expressions + bindings)Understand App Connect’s reactive model, expression rules, scoping, and how to use Wappler’s data/action pickers to build bindings visually.
Browse categories
Core componentsData-oriented building blocks: data components and common data sources.State managementKeep UI state in URL and browser storage (Query/Cookie/Session/Local).Data bindings & formattingExpressions, bindings, pickers, and formatter chains for display-ready values.InteractionWire events to actions, and work with Dynamic Events/Attributes.FormsBind form inputs, configure validation, and build repeatable sections using concrete Demo Projects HQ pages where possible.
Reference hubs
Component referenceChoose the component library, then look up its settings, bindings and actions.Web components and Bootstrap 5Find settings for App Connect components, HTML elements, Bootstrap 5 layouts and starter blocks.Framework7 and device componentsFind Framework7 8 UI settings, mobile layouts and Capacitor device components.
Best practices
Organization best practices (data-first)Keep App Connect pages readable and fast: organize non-visual data components (Variables, Data Stores, Server Connect) at the top, named and grouped before UI usage.Performance: conditional rendering (dmx-if)Improve App Connect performance by using conditional regions (dmx-if) and placing conditional-only data/components inside them so they don’t render or process until needed.