@generative-dom/astro

Official Astro integration for Generative DOM.

Three things in one small package:

1. renderMarkdownToHTML() — a synchronous build-time helper that turns a markdown string into an HTML string using a throw-away jsdom window. Zero global state, safe to call once per page.
2. defineGenerativeDomIntegration() — a minimal AstroIntegration factory you drop into astro.config.mjs.
3. Framework subpath re-exports — @generative-dom/astro/react, /vue, /svelte, /lit so islands can import from a single namespace.

Astro is a peer dependency. @generative-dom/astro works without Astro installed when you only need the SSR helper.

Installation

pnpm add @generative-dom/astro @generative-dom/core
# plus whatever plugins your markdown needs, e.g.:
pnpm add @generative-dom/plugin-markdown-base @generative-dom/plugin-markdown-heading

1. Build-time SSR

Render a markdown string into HTML during your Astro build:

---
// src/pages/post.astro
import { renderMarkdownToHTML } from '@generative-dom/astro';
import { markdownBase } from '@generative-dom/plugin-markdown-base';
import { markdownHeading } from '@generative-dom/plugin-markdown-heading';
import { markdownInline } from '@generative-dom/plugin-markdown-inline';

const html = renderMarkdownToHTML(
  '# Hello\n\nThis paragraph is **rendered at build time**.',
  [markdownBase(), markdownHeading(), markdownInline()],
);
---

<article set:html={html} />

Each call spins up and tears down its own jsdom window. Calling it hundreds of times across many pages is safe — no state leaks between invocations.

2. Astro integration

Register the integration so build-time diagnostics are logged through Astro's standard logger:

// astro.config.mjs
import { defineConfig } from 'astro/config';
import { defineGenerativeDomIntegration } from '@generative-dom/astro';

export default defineConfig({
  integrations: [defineGenerativeDomIntegration()],
});

This integration is intentionally minimal today — it logs that Generative DOM is wired up and serves as the extension point for future features.

3. Island components (framework subpaths)

Import your preferred framework wrapper through @generative-dom/astro without adding each wrapper to your own package.json:

// src/components/Streamed.tsx
import { GenerativeDomRenderer } from '@generative-dom/astro/react';
import { markdownBase } from '@generative-dom/plugin-markdown-base';

export default function Streamed({ text }: { text: string }) {
  return <GenerativeDomRenderer markdown={text} plugins={[markdownBase()]} />;
}

<!-- src/components/Streamed.vue -->
<script setup lang="ts">
import { GenerativeDomRenderer } from '@generative-dom/astro/vue';
import { markdownBase } from '@generative-dom/plugin-markdown-base';
const plugins = [markdownBase()];
</script>
<template>
  <GenerativeDomRenderer :markdown="text" :plugins="plugins" />
</template>

Svelte (@generative-dom/astro/svelte) and Lit (@generative-dom/astro/lit) are exposed the same way.

License

MIT