ngx-json-render (workspace)

Angular renderer for json-render: stream AI-generated JSON specs into real Angular components — signals, standalone components, zoneless (checked in CI: no Zone.js, no NgZone, every suite explicitly zoneless).

→ Package documentation: projects/ngx-json-render/README.md

→ Live demo: https://shteynu.github.io/ngx-json-render/ — four tabs: a playground that renders a spec you edit by hand against either catalog and shows the system prompt a model would receive; an interactive spec (bindings, repeat, confirm, watch); a SpecStream rendering progressively, which you can stop mid-generation and inspect half-built; and a chat where prose and UI patches arrive in the same reply. The last two replay a recording by default and call a real model if you paste in your own key — or

Workspace layout

• projects/ngx-json-render — the renderer (published as ngx-json-render).
• projects/ngx-json-render-material — a ready-made Angular Material catalog of 28 components (published as ngx-json-render-material), so a spec can be generated and rendered without writing a catalog first.
• projects/demo — demo app, four tabs: a playground (edit a spec live, switch catalogs, read catalog.prompt()), an interactive spec (state bindings, repeat, confirm, watch), a SpecStream on injectUIStream with a stop button, and a chat on injectChatUI where prose and patches share one stream. The two streaming tabs swap only their transport between a recorded generation and a live model, so what you watch is the real client either way; the key is held in sessionStorage and goes straight from the browser to the provider.

Develop

npm ci
npm start            # build the library, then serve the demo at http://localhost:4200
npm test             # vitest: renderer + Material catalog + demo
npm run build        # build renderer + Material catalog + demo

The demo consumes both built packages (dist/ngx-json-render and dist/ngx-json-render-material, which its playground renders) via tsconfig path mappings — npm start and npm test build them first, so a fresh clone needs no other step. This also makes the repo boot unmodified on StackBlitz, which always runs npm install && npm start. Keep npm run watch:lib running alongside if you're editing the library itself.

Releasing

Releases are automated via npm trusted publishing (OIDC — no tokens, provenance included). The two packages version independently, each on its own tag prefix.

The renderer, in release.yml — bump version in projects/ngx-json-render/package.json, commit, then

git tag v0.x.y && git push origin main v0.x.y

The Material catalog, in release-material.yml — bump version in projects/ngx-json-render-material/package.json, commit, then

git tag material-v0.x.y && git push origin main material-v0.x.y

Each workflow verifies the tag matches the package version, builds, runs that project's tests, publishes to npm, and creates the GitHub release.

One-time setup on npmjs.com, per package — configuring one does not cover the other, and a package with no connection gets no credentials at all in Actions and fails with ENEEDAUTH. Under package Settings → Trusted Publisher → GitHub Actions:

Field	Value
Organization or user	shteynu
Repository	ngx-json-render
Workflow filename	release.yml for the renderer, release-material.yml for the catalog — filename only, no path
Environment name	leave empty — neither workflow declares an environment:, and a name here would have to match one
Allowed actions	tick Allow npm publish; the form will not save without at least one, and npm stage publish is not what these workflows run

Manual fallback (requires 2FA OTP). It publishes without the provenance attestation the workflows attach, so reach for it only when Actions is unavailable. Pass --registry explicitly: npm reads project config from the current directory only, so the registry line in this repo's .npmrc does not apply once you cd into dist/, and the publish silently targets whatever your global ~/.npmrc points at.

npm run build:lib && cp LICENSE dist/ngx-json-render/ && cd dist/ngx-json-render && npm publish --registry https://registry.npmjs.org/

Same for the Material catalog:

npm run build:material && cp LICENSE dist/ngx-json-render-material/ && cd dist/ngx-json-render-material && npm publish --registry https://registry.npmjs.org/

The demo is deployed to GitHub Pages by ci.yml on every push to main.

Status & upstream

There is no first-party Angular renderer in the json-render monorepo, and none on npm: 28 other @json-render/* packages sit at 0.20.0, but no @json-render/angular (checked 2026-08-29). Community PR #244 has been open since March 2026 without a maintainer decision; #310 came later and was closed by its own author on 2026-08-03. This library mirrors the baseline renderer contract (React = Vue = Solid = Svelte) and is structured so its src/lib can be adapted into a packages/angular PR upstream.

License

Apache-2.0 — matching the upstream json-render project.