jfluents is a zero-configuration utility that takes a JSON data instance and instantly generates a beautiful, interactive Microsoft Fluent UI v9 form. Export the same JSON to Python as a Pydantic model — either from a browser stub or via the FastAPI backend.

Monorepo Structure

Package	Description
jfluents-web/	Next.js (App Router) frontend — JSON editor, recursive UI renderer, export source switcher
jfluents-api/	FastAPI backend — Pydantic model generation via datamodel-code-generator

Export Sources

The toolbar Browser | Backend control selects where Export to Python runs. The generated dialog labels the active source (Browser stub or FastAPI + datamodel-code-generator).

Browser

• JSON parsing, recursive UI generation, and form state run entirely in the browser via React Context.
• Export to Python uses a lightweight client-side Pydantic stub — no server required.
• Default when running pnpm dev without Docker.

Backend

• Select Backend in the toolbar (shown as unavailable if the API is not running or not configured).
• Export to Python proxies through Next.js (/api/generate-pydantic) to FastAPI (POST /generate/pydantic).
• Uses datamodel-code-generator to return a real Pydantic v2 model string.

Quick Start — Browser Only

cd jfluents-web
pnpm install
pnpm dev

Open http://localhost:3000. Load a template from the dropdown or paste JSON on the left; the Fluent UI preview updates live on the right. Browser is selected by default — click Export to Python anytime.

Live demo: edvardhov.github.io/jfluents (Browser export only — no backend on GitHub Pages).

Quick Start — with Backend (Docker)

docker compose up --build

• Web: http://localhost:3000
• API: http://localhost:8000/docs

Docker starts the web app with Backend pre-selected (BACKEND_ENABLED=true). Click Export to Python to receive a generated Pydantic model from FastAPI.

Quick Start — with Backend (Local Dev)

Terminal 1 — API:

cd jfluents-api
python -m venv .venv && source .venv/bin/activate
pip install -r requirements.txt
uvicorn app.main:app --reload --port 8000

Terminal 2 — Web:

cd jfluents-web
pnpm install
API_URL=http://localhost:8000 BACKEND_ENABLED=true pnpm dev

Select Backend in the toolbar before exporting. BACKEND_ENABLED=true lets the UI detect and report backend availability; API_URL points the Next.js proxy at your local FastAPI instance.

Architecture

JsonEditor + Templates
        │
        ▼
  SchemaContext (form state)
        │
        ▼
  SchemaRenderer (recursive Fluent UI mapping)
        │
        ▼
  PreviewPanel

Toolbar → DataProvider (Adapter)
   ├─ Browser: BrowserDataProvider (client stub)
   └─ Backend: BackendDataProvider → /api/generate-pydantic → FastAPI

Toolbar

Control	Purpose
Theme toggle	Switch light / dark mode
Help	Welcome dialog and guided tour
Fluent UI	Open Microsoft Fluent UI v9 docs
Browser | Backend	Python export source
Export to Python	Generate and show Pydantic code

Type → Component Mapping

JSON Type	Fluent UI Component
string	Input / Textarea (long strings)
number	SpinButton
boolean	Switch
array (primitives)	TagGroup + add input
array (objects)	List of Cards
object	Accordion / Card (recursive)
null	Disabled Input placeholder
$ui directive	Explicit control — 48 directives covering inputs, display, layout, navigation, data views, and overlays

Use $ui on any object to opt into richer Fluent UI controls while keeping plain JSON working unchanged.

Recursion is bounded by MAX_DEPTH = 20 with stable path-based React keys.

Environment Variables

Variable	Default	Description
API_URL	http://localhost:8000	FastAPI base URL (Next.js server-side proxy)
BACKEND_ENABLED	unset	Set to true to enable backend availability checks and export via FastAPI
NEXT_PUBLIC_BACKEND_MODE	demo	Initial toolbar selection: demo → Browser, full-stack → Backend
WEB_ORIGIN	http://localhost:3000	CORS origin for FastAPI

Deployment

GitHub Pages

The web app deploys automatically to GitHub Pages on every merge to main:

https://edvardhov.github.io/jfluents/

• Static export via .github/workflows/deploy-pages.yml (runs after merge)
• CI (.github/workflows/ci.yml) runs build checks on every pull request
• main is branch-protected — changes land only via pull request
• Browser export works; Backend requires Docker or local FastAPI (API routes are not available on Pages)
• Local static build: cd jfluents-web && pnpm build:pages → output in jfluents-web/out

Tech Stack

• Frontend: Next.js 16, React 19, Fluent UI v9 (makeStyles / Griffel)
• Backend: FastAPI, Pydantic v2, datamodel-code-generator
• Orchestration: Docker Compose

License

MIT — see LICENSE.