ngx-json-render weekly downloads statistics

ngx-json-render

Generative UI for Angular: a renderer for json-render. Give an LLM a catalog of your components, stream back a JSON spec, and render it as real Angular components. No innerHTML, no eval, no framework lock-in on the wire format.

Built on @json-render/core (the same spec format, expressions, state store, actions, and streaming compiler used by the React, Vue, Solid, and Svelte renderers) and idiomatic modern Angular: standalone components, signals, OnPush everywhere, and zoneless — no NgZone, no Zone.js.

This is an Angular adapter over the official core, not a second implementation of it — @json-render/core is a peer dependency, and the spec your model emits is the same one the React, Vue, Solid and Svelte renderers consume. A catalog and a spec written here move to another framework unchanged.

Works with: AG-UI agents, CopilotKit and LangGraph among them · MCP Apps in Claude, ChatGPT and VS Code · the Vercel AI SDK · Genkit · any endpoint that streams text. The AG-UI and AI SDK paths run against the real clients in CI.

Live demo — opens on a sales dashboard streaming in patch by patch, which you can stop mid-generation; plus a playground, an interactive spec (bindings, repeat, confirm, watch), and a chat where prose and UI patches arrive in one reply. Both streaming tabs replay a recording, or call a real model on your own key (source) — or

Install

ng add ngx-json-render

ng add installs the package and adds its peers, @json-render/core and zod, at the ranges it admits. By hand, that is

npm install ngx-json-render @json-render/core zod

Requires Angular ≥ 19. CI proves both ends of that range on every push: the library builds on Angular 19 (the floor), and its suite passes on 20 and on 22 (the current release) as well as on the 21 the workspace itself pins — Angular 19's CLI has no unit-test builder to run it with. What npm serves is checked too: the package built on 21 is installed into a fresh app on 19, 20 and 22, built with strict templates and driven in Chrome. On Angular 19 the ngx-json-render/testing harness uses 19's provideExperimentalZonelessChangeDetection by itself. The Material catalog, ngx-json-render-material, needs Angular ≥ 20. The same goes for @json-render/core: 0.20 and 0.21 are both admitted (>=0.20.0 <0.22.0), the workspace pins the newest and CI tests the floor.

Zoneless, and checked as such. Zone.js appears in no manifest here, NgZone in no source file, and neither in the published bundles; every suite runs under provideZonelessChangeDetection(). CI asserts all four on each commit (npm run check:zoneless), so this is a tested property rather than a statement of intent — which matters because zoneless is the default for new applications from Angular 21 on.

Agent skill

Using an AI coding agent (Claude Code, Cursor, Codex, …)? Install the skill that teaches it this package's API, so the catalogs, components and streaming code it writes compile against what actually ships:

npx skills add shteynu/ngx-json-render --skill ngx-json-render

The source is skills/ngx-json-render/SKILL.md; the Material catalog has one too (--skill ngx-json-render-material). An agent that reads llms.txt instead can start from https://shteynu.github.io/ngx-json-render/llms.txt.

The shortest path: a ready-made catalog

Writing a catalog is the honest first step, but you do not have to take it to see a spec render. ngx-json-render-material ships 33 Angular Material components already registered, so a generated spec renders with nothing else wired up:

ng add ngx-json-render-material

Those are real Material components, so the app needs a Material theme and the icon font; ng add sets both up through Material's own ng add when the workspace has no Material yet (see the catalog's README for installing by hand).

import { Component, signal } from '@angular/core';
import { JsonRenderer, type Spec } from 'ngx-json-render';
import { materialRegistry } from 'ngx-json-render-material';

@Component({
  selector: 'app-root',
  imports: [JsonRenderer],
  template: `<json-render [spec]="spec()" [registry]="registry" />`,
})
export class App {
  readonly registry = materialRegistry;
  readonly spec = signal<Spec>({
    root: 'card',
    state: { name: '' },
    elements: {
      card: { type: 'Card', props: { title: 'Profile' }, children: ['name', 'hi'] },
      name: { type: 'Input', props: { label: 'Name', value: { $bindState: '/name' } } },
      hi: {
        type: 'Text',
        props: { content: { $template: 'Hello, ${/name}!' } },
        visible: { $state: '/name', neq: '' },
      },
    },
  });
}
```…