API Data Source

Use API Data Source when the page can safely call the API directly

API Data Source is the right tool when a page needs client-side access to a remote API and that request can be made from the browser without exposing secrets or server-only logic. In that model, the component becomes the page’s data contract and the page can bind the returned JSON directly into visible UI.

Client-side fetch

The browser makes the request as part of the page flow.

Bindable output

Returned JSON becomes data you can render immediately.

Property-driven setup

URL, headers, params, and caching live in the component config.

Choose API Data Source when the request belongs to page rendering, not secure server orchestration.

Confirm the API can be called safely from the browser.

Bind the response into repeaters, views, or cards once the JSON shape is clear.

A practical example is a public catalog, weather, or status feed on the page

The best first example is a public API that returns readable JSON without private credentials. Configure the endpoint, inspect the returned schema, then bind only the fields the page actually needs. That keeps the component honest and makes the next debugging pass much easier.

Start with a public or low-risk endpoint so auth is not the first complexity.

Inspect the returned JSON shape before building too much UI around it.

Use only the fields the page needs, then add filtering, formatting, or caching deliberately.

The important properties are identity, request settings, and caching behavior

For most real projects, the critical questions are not whether the component can call an API. They are whether the component has a stable id for bindings, whether request parameters and headers are correct, and whether the caching behavior matches how fresh the page data needs to be.

Stable id

The component id becomes the handle other bindings read from.

Correct request setup

URL, params, headers, and credentials must match the API contract.

Freshness choice

Caching should reflect cost and volatility, not guesswork.

Next steps

Use the generated reference when you need the full property surface, then return to the broader API tours for mental models and adjacent patterns.