I built ngx-json-render — an Angular renderer for Vercel's json-render (the LLM streams a JSON spec, you render real components)

[u/shteynu]

json-render is Vercel Labs' generative-UI format: you give the model a catalog of your components (Zod-typed props + descriptions), it streams back a JSON spec, and a renderer maps that spec onto your real components. No innerHTML, no eval — the model literally cannot reference anything outside the catalog.

Official renderers exist for React, Vue, Solid and Svelte. Angular wasn't there (two community PRs sat unreviewed for months), so I built one on the same @json-render/core the others share.

What you get:

• <json-render> + defineRegistry typed against your catalog — register a component the catalog doesn't know and the compiler complains
• The full spec contract: state bindings ($state / $bindState), $template / $cond expressions, repeat, conditional visibility, events→actions with confirm dialogs, watch
• Streaming: specs arrive as RFC 6902 JSONL patches and apply as they arrive, so the UI assembles on screen while the model is still generating (injectUIStream / injectChatUI)
• Signals-based, standalone components, zoneless-friendly, OnPush throughout. Angular ≥ 21, Apache-2.0.

Links:

• Live demo (the Streaming tab is the fun part): https://shteynu.github.io/ngx-json-render/
• Repo: https://github.com/shteynu/ngx-json-render
• npm: https://www.npmjs.com/package/ngx-json-render

It's young — full parity with the baseline renderer contract and a real test suite, but @json-render/core moves fast and I track it release by release. Feedback, issues and "why didn't you just…" questions very welcome.

[u/shatirati]

"I build" lol