react-openapi - a spec-driven admin UI for OpenAPI/REST backends.

Point it at an OpenAPI document and it derives a full CRUD admin (list, detail, create/edit, filtering, FK selects, streaming views) from the paths and schemas, plus optional profile screens and auth wiring. No per-resource hand-written screens are required.

Quick start

import { AppProvider, Admin } from "react-openapi";

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

How it works

• AppProvider loads the spec, validates it, builds a ResourceConfig per collection, parses x-profile operations, derives auth endpoints and initializes the shared axios client.
• useAppContext exposes that state; useResource(name) adds CRUD helpers and filter widgets for one resource.
• Admin renders the sidebar + routes; the field renderers (ListCellRenderer, DetailFieldRenderer, FormFieldRenderer) turn each FieldConfig into the right UI; SseStreamView renders live streams.

Spec extensions

• x-primary-key, x-display-format, x-list-columns, x-order, x-label, x-description, x-hidden, x-filterable, x-sortable, x-ui-type, x-edit-as, x-autocomplete
• x-fk (foreign keys), inline $ref/oneOf object handling
• x-upload/x-upload-url (file/image fields)
• x-sse (streaming collections)
• x-profile (current-user operations)
• securitySchemes.bearerAuth x-server-url, x-login-path, x-register-path, x-logout-path, x-me-path, x-introspect-path

Notes

• Requires React 18, React Router and MUI (all peer/consumed deps).
• Admin and ProfileRoutes must be nested inside an AppProvider and a router.