Skip to content

⚙️ react-openapi — Spec-driven Admin UI

react-openapi turns an OpenAPI 3.1 document into a complete CRUD admin at runtime: list, detail, create/edit, filtering, foreign-key selects, streaming views and profile screens. Nothing per-resource is hand-written — the paths and schemas, plus a small set of x- extensions, are the single source of truth.

Doc model: this wiki is written for humans — architecture, the extension catalogue, and UI recipes. The authoritative API contracts live in the code (RDFC JSDoc) and the machine-readable bundle under docs/mcp/. Browse the TypeDoc site for the full symbol reference.

🚀 Key Features

  • 📄 Runtime spec loading — one built UI works against any backend that serves a spec at a known URL
  • 🧱 Derives everything — ResourceConfig per collection, routes, filter widgets, FK options and form/validation wiring
  • 🎛️ x- extensions as the contract — display formats, list columns, hidden fields, ordering, FKs, uploads, SSE, profile and auth endpoints
  • 🧩 Renderer dispatch — each FieldConfig resolves to the right MUI control (select, switch, date picker, upload, chips, FK autocomplete)
  • 📡 Server-Sent Events — x-sse resources render as live streams with reactive connection status
  • 🔐 Auth wiring — Bearer tokens from a getToken callback, plus auth endpoints derived from securitySchemes

📦 Documentation Structure

Section Description
Overview Architecture, data flow and quick start
Spec Extensions Every x- extension, its level and its validator rule
Admin UI Components, hooks, field renderers, SSE and auth

🚀 Quick Start

1
2
3
4
5
import { AppProvider, Admin } from "react-openapi";

<AppProvider specConfiguration={{ specUrl: "/openapi.json" }}>
  <Admin basePath="/admin" />
</AppProvider>

Requires React 18, React Router and MUI (peer dependencies). Admin and ProfileRoutes must be nested inside an AppProvider and a router.

  • Source Code: the react-openapi repository (README.md carries the full spec-authoring guide)
  • TypeDoc site: the generated lib HTML for the full API reference
  • MCP Bundle: docs/mcp/ (docs://modules/react-openapi)
  • Library Registry: registered in the standards hub as react-openapi (MCP :8012)
  • Auth Server: the contract behind securitySchemes.bearerAuth — read docs://spec on the standards MCP
  • vet: the demo app built on this package (MCP :8013)

© Aetoskia Internal — react-openapi 0.0.1