DOM Studio

Data

API-backed UI

Fully working interface controls that behave as though they are connected to a backend API.

Overview

API-backed application components

Components in the data section are fully working user interface controls designed to communicate with a backend API. The docs emulate those backends locally and define their interfaces, so examples can run without infrastructure while still behaving like server-backed product surfaces.

Demos should follow a server-in-the-loop design: the component sends the same query, mutation, pagination, and refresh messages it would send in production, then renders the emulated response. From the component's point of view, it is talking to an API.

Boundaries

What belongs here

Define the backend interface beside the component, including query params, payloads, and response shape.

Use emulated endpoints so demos exercise loading, error, empty, mutation, and refresh states.

Keep local primitives transport-free while data components own server-in-the-loop workflows.

Roadmap

First data components

Data grid

Reference

Uses the existing grid as the reference for loading SQL-style resources, then sends search, filters, sort, and pagination back to the emulated API.

Month calendar

Reference

Requests remote event windows, renders loaded availability or schedule data, and writes event changes through a defined endpoint contract.

Team invites

Planned

Shows pending invitations with email, role, status, and created date, then calls a remove-invite mutation when access should be withdrawn.