@metadev/quid-ng

Render Quid UI definitions in Angular, in real time, with your own components.

You register a catalog of Angular components, services and actions. The library parses and validates a Quid text against that catalog, treats it as untrusted, and builds a plan of exactly what may be rendered. Nothing outside the catalog reaches the DOM. Text can arrive as a stream: the tree is reconciled by node key, with no remounts.

Status: 0.0.x, pre-release. The API can still change. Requires Angular 22 and @metadev/quid-core.

Install

npm install @metadev/quid-ng @metadev/quid-core

Use

import { defineQuidCatalog, provideQuid, quidComponent } from '@metadev/quid-ng';

const catalog = defineQuidCatalog({
  components: [
    quidComponent<ButtonComponent>({
      name: 'button',
      component: ButtonComponent,
      properties: { text: { type: 'string', input: 'label' } },
      events: { click: { output: 'pressed' } },
    }),
  ],
  services: {
    listOrders: { returnType: 'Order[]', params: [{ name: 'name', type: 'string' }], handler },
  },
  actions: { clear: { params: [{ name: 'path', type: 'string' }], run } },
});

bootstrapApplication(App, { providers: [provideQuid({ catalog })] });

<quid-surface [source]="text" [streaming]="streaming" (diagnostics)="show($event)" />

Every problem (parse, validation, safety policy, runtime) is reported as a diagnostic with a code and a location; the rest of the surface keeps working.

More: repository README and the architecture notes in AGENTS.md.

Licence

Apache-2.0.