Fast start
Use a file\nwithout a database
JSON Data
Learn when to use JSON files as a simple data source in Wappler, wire one into a page, and pass that data into components and bindings.
JSON Data in Wappler
JSON is the quickest way to move structured sample or remote-exported data into a page. In Wappler, the important mental model is simple: a JSON file becomes a data source, the data source exposes a collection, and components like Data View or repeat regions render that collection in the UI.
Structured data
Objects and arrays\nready for binding
Practical bridge
Move from static\nmarkup to live data
Point a component at a JSON file.
Bind the exposed collection into a UI component.
Keep the sample small so the data flow stays obvious.
A dedicated playground sample keeps the example concrete
The most reliable example for this topic now lives in the checked-in App Connect playground sample at app/Shared/DMXzone/dmxAppCreator/UI/tours/fixtures/appConnect/playground.html. It exists specifically to show small, readable App Connect patterns without the extra moving parts of a larger demo application.
Small surface
One file keeps the data flow easy to inspect.
Real components
The sample uses the same App Connect components you add in Wappler.
Reusable sample
The same sample can support docs, tours, and future examples.
A JSON Data Source is just a component that points at a file
In the playground sample, the JSON component is intentionally minimal. That is the pattern to remember: give the component a clear id, point it at a file, and let other components consume its output instead of hard-coding the file path everywhere.
The id becomes the handle other bindings read from.
The url points at the JSON file you want to load.
This component is about loading and exposing data, not rendering it directly.
Data View should consume the JSON output, not replace it
The sample pairs the JSON source with a Data View. That separation is the practical lesson: the JSON component fetches data, while Data View gives you filtering, sorting, slicing, and pagination without mutating the original source.
TIP: When your page grows, keep the raw source and the shaped view separate. It makes debugging and reuse much easier.
Use the JSON source for raw data access.
Use Data View when the page needs a filtered or sorted subset.
Bind repeat regions, tables, or cards to the shaped view.
Use JSON when the sample is simple; move to APIs when the app needs authority
JSON is a good fit for static catalogs, sample data, onboarding examples, and public datasets that do not need private credentials or server-side authorization. Once the app needs protected data, request inspection, caching strategy, or user-specific output, move that responsibility into Server Connect or an API Data Source.
Good fit
Static catalogs, docs samples, lightweight client-side datasets.
Upgrade path
Move to API Data Source or Server Connect when the source becomes dynamic or protected.
Debugging rule
If the data is visible but the UI is wrong, inspect the binding. If the data never arrives, inspect the source.
Wrap-up
You now have the practical JSON baseline: load a file through a dedicated component, shape it through App Connect components, and keep the example small enough that the data flow stays readable.
Next steps
Continue with component-level App Connect guidance or jump into the generated reference when you need exact JSON Data Source properties.