Built-in Plugins

Generative DOM ships with a set of official plugins that cover standard markdown syntax and several stress-test extensions. All plugins are available from the @generative-dom/plugins package.

Standard Markdown Plugins

Plugin	Factory	Priority	Handles
markdown-base	markdownBase()	300	Paragraphs, line breaks, escaping, horizontal rules
markdown-inline	markdownInline()	200	Bold, italic, strikethrough, inline code
markdown-heading	markdownHeading()	100	ATX headings (h1--h6)
markdown-code	markdownCode()	100	Fenced code blocks
markdown-quote	markdownQuote()	100	Blockquotes (including nested)
markdown-list	markdownList()	100	Ordered and unordered lists
markdown-link	markdownLink()	200	Links, images, autolinks

Stress Test Plugins

Plugin	Factory	Priority	Handles
highlight	highlight()	95	Syntax highlighting for code blocks
custom-elements	customElements()	50	Custom Web Components (<md-clock>, <md-plot>, <md-counter>)
events	events()	40	Invisible event elements (<progress>, <status>, <milestone>)
interactive	interactive()	45	Interactive elements (<md-button>, <md-toggle>, <md-input>)

Import

// Import all plugins from the umbrella package
import {
  markdownBase,
  markdownInline,
  markdownHeading,
  markdownCode,
  markdownQuote,
  markdownList,
  markdownLink,
  highlight,
  customElements,
  events,
  interactive,
} from '@generative-dom/plugins';

Recommended Plugin Sets

Minimal

For plain text with headings:

const plugins = [markdownBase(), markdownHeading()];

Standard

Full markdown support without extensions:

const plugins = [
  markdownBase(),
  markdownInline(),
  markdownHeading(),
  markdownCode(),
  markdownQuote(),
  markdownList(),
  markdownLink(),
];

Full

All plugins including extensions:

const plugins = [
  markdownBase(),
  markdownInline(),
  markdownHeading(),
  markdownCode(),
  markdownQuote(),
  markdownList(),
  markdownLink(),
  highlight(),
  customElements(),
  events(),
  interactive(),
];

Plugin Options

Some plugins accept configuration through their factory functions:

highlight({
  languages: ['javascript', 'typescript', 'html', 'css', 'json'],
  theme: 'dark',
})

customElements({
  allowedTags: ['md-clock', 'md-plot', 'md-counter'],
})

See each plugin's documentation page for available options.