@generative-dom/plugin-interactive

Stateful interactive elements (md-button, md-toggle, md-input) for Generative DOM.

Installation

pnpm add @generative-dom/plugin-interactive

Usage

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

const md = new GenerativeDom(container, { plugins: [interactive()] });

md.on('button-click', ({ text, clickCount }) => console.log(text, clickCount));
md.on('toggle', ({ label, checked }) => console.log(label, checked));
md.on('input-change', ({ value }) => console.log(value));

md.push('<md-button>Submit</md-button>\n');
md.push('<md-toggle label="Dark mode" checked="true" />\n');
md.push('<md-input placeholder="Search..." />\n');

Matching

Matches self-closing md-toggle and md-input, and content-bearing md-button:

<md-button>Label</md-button>
<md-toggle label="Enable feature" checked="false" />
<md-input placeholder="Enter value" value="default" />

Configuration

• priority: 45
• level: block (default)
• matchDescriptor: { startChars: '<' }

State is preserved across re-renders: if the raw source of a token is unchanged and the element is still in the DOM, the existing element is returned rather than recreated. This keeps user interaction state (checkbox checked, input value) intact during streaming.

Rendered Output

| Element | DOM | Event emitted | |---------|-----|---------------| | md-button | <button> | 'button-click' with { text, clickCount } | | md-toggle | <label><input type="checkbox"> | 'toggle' with { label, checked } | | md-input | <input> | 'input-change' with { value } |

Subscribe with generativeDom.on(eventName, handler).