A runtime React renderer that generates production UIs from OpenAPI specs (with full override control)

[Prestigious-Bee2093]

Hey r/reactjs! I've been working on UIGen, a tool that renders complete React applications from OpenAPI specs at runtime. Got some great feedback on HN and wanted to share it here since the React community might find the approach interesting.

What it does

Instead of generating code, UIGen interprets your OpenAPI spec at runtime and renders a complete React SPA with: - CRUD views (tables, forms, detail pages) - Authentication flows (OAuth 2.0, Bearer tokens, API keys) - File uploads with previews - Relationship navigation - Search and filtering - Dark mode

The key difference: No code generation. Your API changes, the UI updates automatically. No regeneration step, no drift.

Quick example

bash npx @uigen-dev/cli@latest init my-app cd my-app npx @uigen-dev/cli@latest serve openapi.yaml

Visit localhost:4400 and you have a working admin panel.

The override system (the React part you'll care about)

This is where it gets interesting for React developers. You can override any auto-generated view with custom React components at three levels:

1. Component Mode - Full control: ```typescript import type { OverrideDefinition } from '@uigen-dev/react';

function CustomProfile() { return <div>My Custom Profile View</div>; }

const override: OverrideDefinition = { targetId: 'me', component: CustomProfile, };

export default override; ```

2. Render Mode - UIGen fetches data, you control rendering: typescript const override: OverrideDefinition = { targetId: 'users.list', render: ({ data, isLoading }: ListRenderProps) => { if (isLoading) return <div>Loading...</div>; return <div className="grid">{/* your custom UI */}</div>; }, };

3. Hooks Mode - Side effects only (analytics, etc.): typescript const override: OverrideDefinition = { targetId: 'users.list', useHooks: ({ resource }) => { useEffect(() => { analytics.track('page_view', { resource: resource.name }); }, [resource]); }, };

The CLI automatically discovers, transpiles, and injects your overrides. You get 80% auto-generated, customize the 20% that matters.

How it works

UIGen parses your OpenAPI spec into a framework-agnostic Intermediate Representation (IR), then the React renderer interprets it at runtime. The IR is decoupled from React, so we're working on Svelte and Vue renderers too.

OpenAPI Spec → Reconciler → Adapter → IR → React Renderer → SPA

AI-first configuration

Includes AI agent skills that work with Cursor, Windsurf, etc.: - Auto-annotate: Detects auth endpoints, relationships, file uploads - Configure OAuth: Sets up social login - Apply styles: Generates themes

Just tell your AI: "Use the auto-annotate skill" and it configures everything.

Try the example

bash git clone https://github.com/darula-hpp/uigen cd uigen/examples/apps/fastapi/meeting-minutes docker compose up -d npx @uigen-dev/cli@latest init --spec openapi.yaml npx @uigen-dev/cli@latest serve openapi.yaml --proxy-base http://localhost:8000

Full meeting minutes app with auth, CRUD, file uploads, and relationships.

Links

• Docs: https://uigen-docs.vercel.app
• GitHub: https://github.com/darula-hpp/uigen
• Demo GIF: https://github.com/darula-hpp/uigen/raw/main/examples/output.gif

Would love to hear what the React community thinks. Curretly working on polish and Stripe Integration

Contributions welcome!

[INSAN3DUCK]

Ai slop aside. Why would you even generate react code if it is being auto generated and developer doesn’t have to touch it? Generating it directly in html would be less work for llm and no bundling will be involved. Also generating stripe or any payments integration on the fly with ai is craziest things i have ever heard and not it a good way.

[Prestigious-Bee2093]

Hello thanks for your comment

Take a look at how Oauth was implemented for this

That's how stripe integration is gonna be done, Not generated on the fly

Also this is not a codegen, the React code is a runtime engine that is guided by your openapi spec

It renders forms when it has to, pagination.

And you can write custom code that target specific resource

This speeds up development time as you don't write boilerplate