@generative-dom/lit

Official Lit wrapper for the Generative DOM streaming markdown renderer.

Exposes a single custom element — <generative-dom-renderer> — built on LitElement. Because the output is a native Custom Element, you can use it from any framework or vanilla HTML.

Lit is a peer dependency (lit >= 3). No other runtime deps.

Installation

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

Vanilla HTML

<generative-dom-renderer markdown="# hello"></generative-dom-renderer>

<script type="module">
  import '@generative-dom/lit';
  import { markdownBase } from '@generative-dom/plugin-markdown-base';
  import { markdownHeading } from '@generative-dom/plugin-markdown-heading';

  const el = document.querySelector('generative-dom-renderer');
  el.plugins = [markdownBase(), markdownHeading()];
</script>

From any framework

import '@generative-dom/lit';
import { markdownBase } from '@generative-dom/plugin-markdown-base';
import { markdownHeading } from '@generative-dom/plugin-markdown-heading';

const el = document.createElement('generative-dom-renderer');
el.plugins = [markdownBase(), markdownHeading()];
el.markdown = '# streamed';
document.body.appendChild(el);

Properties & attributes

| Property | Attribute | Type | Notes | | ------------ | -------------- | ----------------------------------- | --------------------------------------------------- | | markdown | markdown | string | Reflected from attribute. Triggers reset + re-feed. | | debounceMs | debounce-ms | number | Default 16 (~1 frame). | | plugins | (no attr) | GenerativeDomPlugin[] | JS-only. Changing it recreates the Generative DOM instance. | | onGenerativeDomError | (no attr) | (err: GenerativeDomError) => void | Forwarded to Generative DOM's onError. |

Events

The element dispatches a bubbling generative-dom-event CustomEvent for each plugin event. The event detail is:

interface GenerativeDomEventDetail { name: string; data: unknown }

document.querySelector('generative-dom-renderer').addEventListener('generative-dom-event', (e) => {
  console.log(e.detail.name, e.detail.data);
});

Light DOM vs shadow DOM

GenerativeDomRendererElement renders into the light DOM (it overrides createRenderRoot() to return this). That is intentional — Generative DOM plugins render headings, code, links, and custom elements that need to be styleable by the page's global CSS. Encapsulating them inside a shadow root would hide them from page stylesheets and break any plugin that relies on global styling (e.g. .hl-* syntax highlight tokens, .prose class, user-supplied typography).

If you need style isolation, wrap <generative-dom-renderer> in your own shadow-hosting element.

Why a wrapper?

@generative-dom/core is framework-agnostic and does not depend on Lit. The wrapper exists so consumers can use Generative DOM as a drop-in custom element and pass plugins as a JS property, with proper lifecycle management (reactive updates, teardown on disconnect).

License

MIT