Installation

Package Manager

Generative DOM is published as scoped packages under @generative-dom/. Install the core and the plugins you need:

# pnpm (recommended)
pnpm add @generative-dom/core @generative-dom/plugins

# npm
npm install @generative-dom/core @generative-dom/plugins

# yarn
yarn add @generative-dom/core @generative-dom/plugins

The @generative-dom/plugins package re-exports all official plugins. You can also install individual plugin packages if you want fine-grained control over your bundle:

pnpm add @generative-dom/core @generative-dom/plugin-markdown-base @generative-dom/plugin-markdown-inline

CDN

For quick prototyping, load Generative DOM from a CDN:

<script type="module">
  import { GenerativeDom } from 'https://esm.sh/@generative-dom/core';
  import { markdownBase, markdownInline, markdownHeading } from 'https://esm.sh/@generative-dom/plugins';

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

  md.push('# Hello from CDN');
  md.flush();
</script>

UMD Build

A UMD build is available for environments that do not support ES modules:

<script src="https://cdn.jsdelivr.net/npm/@generative-dom/core/dist/generativeDom.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@generative-dom/plugins/dist/plugins.umd.js"></script>
<script>
  const { GenerativeDom } = window.GenerativeDom;
  const { markdownBase, markdownInline, markdownHeading } = window.GenerativeDomPlugins;
</script>

Requirements

• Browser: ES2022+ (Chrome 94+, Firefox 93+, Safari 15+, Edge 94+)
• Runtime: Browser only. Generative DOM uses DOM APIs and is not designed for Node.js rendering.
• TypeScript: 5.0+ recommended for full type inference

Verifying the Installation

After installing, verify that Generative DOM loads correctly:

import { GenerativeDom } from '@generative-dom/core';

console.log('GenerativeDom loaded:', typeof GenerativeDom === 'function');

Next: Quick Start