@generative-dom/angular

Official Angular wrapper for the Generative DOM streaming markdown renderer.

Exposes a single standalone component — <generative-dom-renderer> — built on Angular's signal-based input() / output() APIs (Angular 17.3+). Works with Angular 20+ zoneless change detection out of the box.

@angular/core, @angular/common, and rxjs are peer dependencies.

Installation

pnpm add @generative-dom/angular @generative-dom/core @angular/core @angular/common rxjs
# plus whatever plugins you want, e.g.:
pnpm add @generative-dom/plugin-markdown-base @generative-dom/plugin-markdown-heading

Usage

import { Component } from '@angular/core';
import { GenerativeDomRendererComponent } from '@generative-dom/angular';
import { markdownBase } from '@generative-dom/plugin-markdown-base';
import { markdownHeading } from '@generative-dom/plugin-markdown-heading';

@Component({
  selector: 'my-view',
  standalone: true,
  imports: [GenerativeDomRendererComponent],
  template: `
    <generative-dom-renderer
      [markdown]="text"
      [plugins]="plugins"
      [debounceMs]="0"
      (generativeDomEvent)="onEvent($event)"
    ></generative-dom-renderer>
  `,
})
export class MyView {
  text = '# hello';
  plugins = [markdownBase(), markdownHeading()];
  onEvent(detail: { name: string; data: unknown }) { console.log(detail); }
}

Inputs & outputs

| Name | Kind | Type | Notes | | -------------- | -------- | ----------------------------------- | ----------------------------------------------- | | markdown | input | string (default '') | Changing re-renders without tearing down. | | plugins | input | GenerativeDomPlugin[] (default []) | Changing recreates the Generative DOM instance. | | debounceMs | input | number (default undefined) | Changing recreates the Generative DOM instance. | | generativeDomError | input | (err: GenerativeDomError) => void | Forwarded to Generative DOM's onError. | | generativeDomEvent | output | GenerativeDomEventDetail | { name, data } for each plugin event. |

Host element

The component's template is empty; Generative DOM renders directly into the host element. This mirrors the behavior of @generative-dom/lit so plugin-rendered DOM (headings, code blocks, links, custom elements) is reachable by page-level CSS. If you need style isolation, wrap <generative-dom-renderer> in your own encapsulated component.

Zoneless change detection

Works with provideZonelessChangeDetection (Angular 20+) — no zone.js required. The wrapper never relies on zone-patched callbacks; all updates flow through signals.

License

MIT