Quick Start

This page walks through a complete working example in under 20 lines.

Minimal Example

import { GenerativeDom } from '@generative-dom/core';
import { markdownBase, markdownInline, markdownHeading } from '@generative-dom/plugins';

const md = new GenerativeDom({
  container: document.getElementById('output'),
  plugins: [markdownBase(), markdownInline(), markdownHeading()],
});

// Simulate streaming
const text = '# Hello\n\nThis is **bold** and *italic*.';
for (const char of text) {
  md.push(char);
}
md.flush();

That is all you need. Let's break it down.

What Happens

1. Create an instance. GenerativeDom takes a container element and a list of plugins. Plugins define what markdown syntax is supported.

2. Push chunks. Call md.push(chunk) with any string -- a single character, a word, a line, or an entire document. Generative DOM buffers the input and schedules a render.

3. Flush. Call md.flush() to force an immediate render of any buffered content. This is useful at the end of a stream to ensure everything is displayed.

Streaming from a Fetch Response

Generative DOM works naturally with any streaming source. Here is an example with fetch:

import { GenerativeDom } from '@generative-dom/core';
import { markdownBase, markdownInline, markdownHeading, markdownCode } from '@generative-dom/plugins';

const md = new GenerativeDom({
  container: document.getElementById('output'),
  plugins: [
    markdownBase(),
    markdownInline(),
    markdownHeading(),
    markdownCode(),
  ],
});

const response = await fetch('/api/stream');
const reader = response.body!.getReader();
const decoder = new TextDecoder();

while (true) {
  const { done, value } = await reader.read();
  if (done) break;
  md.push(decoder.decode(value, { stream: true }));
}
md.flush();

Rendering a Complete String

If you do not need streaming, push the entire string at once:

md.push('# Complete Document\n\nAll at once.');
md.flush();

Cleaning Up

When you are done with an Generative DOM instance, call destroy() to release all resources:

md.destroy();

This removes DOM elements, drains the object pool, unregisters plugins, and removes event listeners. After calling destroy(), the instance cannot be reused.

To clear the output and start over without destroying the instance, use reset():

md.reset();
md.push('# Fresh start');
md.flush();

Next: Core Concepts