Database
Stores records
Source of truth
Source of truth
First Data Flow (DB → Server Connect → Page)
Explore First Data Flow (DB → Server Connect → Page): Your first end-to-end mental model, After this tour, you’ll know, and pipeline, step by step.
Your first end-to-end mental model
Section titled “Your first end-to-end mental model”A typical dynamic page is a simple pipeline:
IMPORTANT: Avoid the beginner trap: pages, APIs, and the database are not separate topics — they are one pipeline.
Server Connect
Queries + rules
Returns JSON
Returns JSON
Page (App Connect)
Calls API
Renders UI
Renders UI
Think in pipelines, not tools: DB → API → UI.
Server is the safe boundary between UI and data.
If you can trace the pipeline, you can debug calmly.
After this tour, you’ll know
Section titled “After this tour, you’ll know”TIP: Once you can reliably move data DB → API → UI, you can build CRUD, dashboards, auth, and integrations much faster.
API
Endpoint
+ output
+ output
DB shape
Tables
matter
matter
Bind
JSON
→ UI
→ UI
Debug
Find the
break
break
What a Server Connect API is (and why it returns JSON).
How the database influences the API output shape.
How App Connect takes JSON and renders it into the UI.
Where to debug when data looks wrong.
The pipeline, step by step
Section titled “The pipeline, step by step”App Connect runs in the browser and turns events into UI updates.
So App Connect is your client-side data binding and UI updates.
Calls APIs (or listens to events).
Receives JSON data.
Updates the DOM (what you see).
If the UI is wrong, check the JSON first.
Step 1: Connect a database
Section titled “Step 1: Connect a database”NOTE: In Wappler, Database Manager handles connections and schema; Server Connect uses those connections for queries.
Connection
Credentials +
host
host
Schema
Tables +
fields
fields
Test
Run a
simple query
simple query
Create a database connection (host, user, password, database).
Verify you can list tables and run a simple query.
Use this connection in Server Connect queries.
Step 2: Create a Server Connect API
Section titled “Step 2: Create a Server Connect API”TIP: If the API returns JSON you can understand, your UI becomes much easier to build and debug.
Endpoint
A URL you
can call
can call
Query
Fetch +
shape data
shape data
JSON
Predictable
output
output
Create an API Action (endpoint).
Add a database query step.
Return the query output as JSON.
Test the endpoint to see JSON results.
Step 3: Render it in the browser (App Connect)
Section titled “Step 3: Render it in the browser (App Connect)”Call API
Fetch JSON
data
data
Bind
Repeat lists
text bindings
text bindings
Reactive
UI updates
automatically
automatically
Create an App Connect API Action on a page that calls your Server Connect endpoint.
Bind the returned data to UI components (repeat lists, text bindings, etc.).
Trigger the API on page load or on a user event.
The UI updates automatically when data changes.
What you’ve built
Section titled “What you’ve built”This is the foundation for almost everything: auth, dashboards, CRUD, and integrations.
DB
Data lives
here
here
API
Safe JSON
output
output
Page
Bind JSON
to UI
to UI
Database holds truth.
Server Connect turns truth into safe JSON.
App Connect renders JSON into the UI.
Conclusion
Section titled “Conclusion”You’ve connected the mental dots: the database stores records, Server Connect turns them into a safe JSON response, and the page (App Connect) renders the result. Next, skim the terminology reference so the words match what you now understand.
Store
DB holds
records
records
Protect
Server checks
access
access
Show
Page renders
data
data
If the UI is wrong, inspect the JSON response.
If the JSON is wrong, inspect the server workflow.
If the server is wrong, inspect the database query/model.
Continue
Section titled “Continue”Continue to Web App Terminology.