UIGenv0.18.1·2026-05-27
Blog

Introduction

UIGen is a runtime frontend generator for OpenAPI-described APIs. Point it at any OpenAPI 3.x or Swagger 2.0 spec and it serves a fully functional, interactive frontend: tables, forms, detail views, authentication, search, and more, with zero boilerplate and zero code to write.

What UIGen does

UIGen reads your API spec and generates a complete UI at runtime:

  • List views: paginated, sortable tables for every collection endpoint
  • Detail views: read-only record pages with related resource links and embedded child streams
  • Create / edit forms: validated forms derived from request body schemas
  • Search: global and per-resource filtered search using query parameters from the spec
  • Dashboard: auto-generated overview with resource counts and quick links
  • Multi-step wizards: triggered automatically for large or nested forms
  • Charts: line, bar, pie, and scatter charts above list views when x-uigen-chart is configured
  • Live WebSocket streams: declarative x-uigen-websocket merges live data into list, detail, and chart views
  • Landing pages: hero, features, pricing, and FAQ sections at /
  • Authentication: Bearer token, API Key, HTTP Basic, OAuth 2.0 social login, and credential-based login
  • Payments: Stripe, PayPal, Square integration with pricing pages and payment gates
  • Overrides: replace any auto-generated view with custom React components

All API calls are live (UIGen proxies requests to your real backend, so there is no mocking and no stub data).

Who it's for

UIGen is useful for:

  • API developers who want an instant admin UI or internal tool without building a frontend
  • Embedded and IoT developers who expose REST endpoints from firmware and need a control panel for GPIO, sensors, and device config
  • Teams that need a quick way to explore and test a new API
  • Prototypers who want to demo an API to stakeholders without writing UI code

How it works

UIGen reconciles your .uigen/config.yaml with the spec, parses the result into an Intermediate Representation (IR), then uses that IR to drive a React SPA. The CLI injects the IR into the app at startup and starts a local server.

OpenAPI Spec + Config → Reconciler → Adapter → IR → React SPA → Your API

See How It Works for a deeper look at the data flow.

Packages

UIGen ships as three packages:

Package Purpose
@uigen-dev/cli The uigen serve command (the fastest way to get started)
@uigen-dev/core Framework-agnostic adapters and IR (use this to build your own renderer)
@uigen-dev/react The React renderer (the default UI layer)

Optional distribution targets (for example @uigen-dev/target-electron for desktop) wrap an existing renderer. See Electron Target.

Example apps

The repository includes reference apps for web APIs and embedded devices:

Next steps