Client
UI + events
Runs in browser
Runs in browser
App Connect + Server Connect (The Big Picture)
Understand the big picture: how App Connect (UI/data binding) and Server Connect (APIs/actions) work together in a Wappler app.
Two halves of a modern Wappler app
Section titled “Two halves of a modern Wappler app”Wappler helps you build both halves of a modern web app: the browser UI (client) and the server workflows (backend).
IMPORTANT: Every web app has these parts. Wappler’s advantage is making the connections clear while still generating real, editable code.
Server
Workflows + rules
Runs on server
Runs on server
Data
Tables + records
Stored safely
Stored safely
Client (browser) renders and reacts to events.
Server runs trusted logic and returns data.
Database stores long-term truth; server is the gatekeeper.
What you should understand after this tour
Section titled “What you should understand after this tour”Browser
UI +
bindings
bindings
Server
Rules +
workflows
workflows
JSON
API
responses
responses
Bootstrap
Layout +
components
components
What runs in the browser vs on the server (and why that separation matters).
Why UI interactions often become an API call that returns JSON.
Where data lives (database) and why the server is the gatekeeper.
Where Bootstrap fits (layout + components), separate from data binding.
Client ↔ Server
Section titled “Client ↔ Server”Think in two big layers, plus the data layer:
In practice: App Connect triggers a request → Server Connect builds a JSON response → App Connect renders it in the UI.
Client (browser): UI, events, state, rendering.
Server (backend): workflows, validation, permissions, data access.
Data (database): tables + references, queried by the server.
App Connect (client-side)
Section titled “App Connect (client-side)”IMPORTANT: App Connect expressions are not JavaScript. They’re a declarative binding language.
Bindings
Show live data
in the UI
in the UI
Events
Clicks, submits
page load
page load
Actions
Call APIs
update state
update state
Runs in the browser (client-side).
Binds data to the UI (reactive updates).
Turns user events into actions (often an API call).
Keeps UI interactive without lots of custom JS.
Server Connect (server-side)
Section titled “Server Connect (server-side)”NOTE: A Server Connect action is essentially an API endpoint you can call from App Connect.
Workflows
Steps + logic
and output
and output
Protection
Validate +
permissions
permissions
JSON output
Structured
responses
responses
Runs on the server (backend).
Executes workflows (queries, conditionals, transforms).
Enforces validation + permissions (safe boundary).
Returns structured JSON for the client.
Where Wappler helps
Section titled “Where Wappler helps”A helpful mental model: Bootstrap shapes the UI, App Connect fills it with data, Server Connect protects and produces the data.
Bootstrap
Shapes the
UI
UI
App Connect
Fills it
with data
with data
Server Connect
Protects +
produces data
produces data
Design UI visually (and still generate clean code).
Create API workflows visually (and still have real server-side logic).
Bind UI to server data predictably (strong output schemas).
Use Bootstrap for layout + components, while App Connect focuses on data binding.
Conclusion
Section titled “Conclusion”App Connect runs in the browser, Server Connect runs on the server, and the database stores long-term data. Most features are just this loop repeated: UI event → API call → JSON response → UI updates.
Event
User does
something
something
API
Server runs
workflow
workflow
Update
UI binds
new data
new data
UI event → API call → JSON response → UI updates.
Server is where you validate and protect.
Client is where you render and interact.
Continue
Section titled “Continue”Continue to rendering models (SSR vs CSR).