Skip to content

Connect your first dynamic data

A beginner-friendly path from the first data-flow mental model into Database Manager, Server Connect, and App Connect so you can render real data on a page.

Back to API and JSON

Connect your first dynamic data

A beginner-friendly path from the first data-flow mental model into Database Manager, Server Connect, and App Connect so you can render real data on a page.

This is the beginner path from a static page to a page that shows real data.

The learning goal is simple:

understand the DB → API → page pipeline
know where database connections live
see how a first Server Connect action is created
understand how a page loads JSON and renders it
know what to learn next when you want more control

You do not need to master databases, APIs, or bindings here. You only need one clear end-to-end path that makes the moving parts feel predictable.

Recommended order

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.

Database Manager: Quick Overview

Get a quick overview of Database Manager: what it is, where to find it, and how it fits in your workflow.

First Server Connect Action

First Server Connect action: add steps, test the API response, and use it in a page or component.

Server Connect components (data + forms)

Load data and submit forms via Server Connect components, using built-in state (executing/lastError/data).

After this

Workflows: Guided path

Pick a guided path for Server Connect Actions or App Connect Flows, then explore editors and recipes.

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.

First Success Path

A guided path from first project to first page and first data flow, designed to get new users to a visible result quickly.

Go to

Onboarding: Guided start

A curated onboarding path for new users that can be completed in stages: learn the basics, create your first project, build your first UI, and continue when you are ready.

Wappler Docs Index

Browse Wappler tours by topic and jump into areas like Why Wappler, Learning the Basics, and Wappler's UI.

Build your first page layout

A beginner-friendly path from Pages Manager to the HTML Editor and Bootstrap basics so you can build your first real page layout.