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.

Week planner

Reference

Reuses the calendar record contract for fixed-width day swim lanes, precise timed placement, and horizontally scrolling multi-week ranges.

Agent chat

Reference

Uses a Pinia store and emulated streaming API for AI conversations, tool calls, reasoning summaries, text/audio handoff, and a resizable app shell.

Document editor

Reference

Uses a client-only editor runtime with structured JSON output, AI rewrite suggestions, media insertion, video embeds, and optional Yjs collaboration adapters.

Media browser

Reference

Uses a Pinia store and emulated media API for folder navigation, breadcrumbs, optimistic mutations, drag/drop uploads, and picker-style selection.

Team invites

Planned

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