|
|
@@ -1,3 +1,30 @@
|
|
|
+# json-render — Oivo fork
|
|
|
+
|
|
|
+A fork of [vercel-labs/json-render](https://github.com/vercel-labs/json-render) with real image support, two **self-contained** interactive components, and a live playground wired to the [ai.mm.mk](https://ai.mm.mk) gateway.
|
|
|
+
|
|
|
+**🔴 Live demo:** https://jsonrender-demo.oivo.com/playground — type a sentence (e.g. *"landing page for a coffee shop with a photo gallery and a sign-up button"*) and watch a UI build from the JSON spec.
|
|
|
+
|
|
|
+## What this fork adds
|
|
|
+
|
|
|
+- **`Image` takes a real `src`** — renders an actual `<img>` (object-cover) when given a URL; falls back to a placeholder otherwise. Galleries use `https://picsum.photos/seed/<word>/<w>/<h>`.
|
|
|
+- **`Pressable`** — a clickable container that wraps arbitrary children and emits a `press` event.
|
|
|
+- **`Lightbox`** — a self-contained photo gallery: thumbnail grid + fullscreen overlay with prev/next, keyboard nav, and click-outside/✕ close. Manages its own React state, so it works in the live preview without any `setState` action.
|
|
|
+- **`Modal`** — a self-contained modal: the element *is* the trigger button (`triggerLabel`) and renders its children inside a centered popup with Esc/backdrop/✕ close. Also fully self-stated — no `Dialog` + `setState` wiring.
|
|
|
+
|
|
|
+> Why "self-contained": the playground preview doesn't reliably drive `setState`-action → cross-component re-renders, so click-to-open interactions (lightbox, modal) are built as components with their own `useState` instead.
|
|
|
+
|
|
|
+**Key files**
|
|
|
+
|
|
|
+| What | Path |
|
|
|
+|------|------|
|
|
|
+| Component implementations | `apps/web/lib/render/registry.tsx` |
|
|
|
+| Component catalog (types + AI descriptions) | `apps/web/lib/render/catalog.ts` |
|
|
|
+| Generation route + prompt rules + gateway | `apps/web/app/api/generate/route.ts` |
|
|
|
+
|
|
|
+The generate route is pointed at the OpenAI-compatible **ai.mm.mk** gateway (default model `anthropic/claude-haiku-4.5`) via `AI_API_URL` / `AI_API_KEY` / `AI_GATEWAY_MODEL`.
|
|
|
+
|
|
|
+---
|
|
|
+
|
|
|
# json-render
|
|
|
|
|
|
**The Generative UI framework.**
|
root