@generative-dom/string-renderer

Render Generative DOM streaming markdown to an HTML string in Node.js using jsdom.

Useful for testing (snapshot assertions, streaming parity checks), CLI pipelines (.genui → HTML), and any server-side scenario where you need the final rendered HTML without a real browser.

Installation

npm install --save-dev @generative-dom/string-renderer

Usage

Batch render

import { renderToString } from "@generative-dom/string-renderer";
import { markdownPreset } from "@generative-dom/preset-markdown";

const html = renderToString("# Hello\n\nWorld.", {
  plugins: markdownPreset(),
});
// → '<h1>Hello</h1><p>World.</p>'

Streaming render (stateful)

import { StringRenderer } from "@generative-dom/string-renderer";

const r = new StringRenderer({ plugins: markdownPreset() });

r.push("## Hel");
r.push("lo\n\n");
r.flush();

console.log(r.html()); // → '<h2>Hel</h2><p>lo</p>'
r.destroy();

Replay a recorded LLM stream

import { playRecording, StringRenderer } from "@generative-dom/string-renderer";

const recording = {
  chunks: [
    { text: "## ", ts: 0 },
    { text: "Hello\n\n", ts: 200 },
  ],
};

// Fast mode — join all chunks, single push + flush
const html = playRecording(recording, { plugins, mode: "fast" });

// Stepped mode — push & flush after each chunk, returns an array of HTML snapshots
const steps = playRecording(recording, { plugins, mode: "stepped" });
// steps[0] → '<h2></h2>'   (incomplete heading)
// steps[1] → '<h2>Hello</h2>'   (complete)

Real-time replay (debugging)

import { playRecordingRealtime } from "@generative-dom/string-renderer";

const html = await playRecordingRealtime(recording, {
  plugins,
  onProgress: (html, index) => console.log(`#${index}: ${html.length} chars`),
});

API

renderToString(markdown, options)

| Param | Type | Default | Description | | ------------------------ | ----------------------- | ------- | ----------------------------------- | | markdown | string | — | Markdown text to render | | options.plugins | GenerativeDomPlugin[] | — | Plugin list | | options.debounceMs | number | 0 | Render debounce interval | | options.timingProvider | TimingProvider | — | For deterministic scheduler control |

Returns string — rendered HTML.

new StringRenderer(options)

| Method | Description | | -------------- | ------------------------------------------------- | | .push(chunk) | Feed the next chunk of markdown text | | .flush() | Force an immediate render of all buffered content | | .html() | Get current rendered HTML | | .destroy() | Clean up DOM and JSDOM window |

playRecording(recording, options)

| Mode | Returns | Behaviour | | ----------- | ---------- | ---------------------------------------------------------- | | 'fast' | string | Join all chunks, single push + flush | | 'stepped' | string[] | Push & flush after each chunk; one HTML snapshot per chunk |

playRecordingRealtime(recording, options)

Returns Promise<string>. Respects the ts timestamps — real-time delays between chunks.

Notes

• Each StringRenderer creates its own isolated JSDOM instance to avoid cross-test pollution.
• The renderToString helper creates and destroys a renderer per call — convenient but slightly slower than reusing a StringRenderer for multiple chunks.
• For deterministic streaming tests pass a timingProvider (see the SC-2 tests in the checks/ workspace for an example).