@generative-dom/plugin-cursor

Streaming cursor indicator for Generative DOM — the blinking caret every LLM chat UI displays while tokens are still arriving.

Install

pnpm add @generative-dom/plugin-cursor

Usage

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

const container = document.getElementById('chat')!;
const cursorPlugin = cursor();          // defaults: '▍', 'ce-cursor', animated
const md = new GenerativeDom({ container, plugins: [cursorPlugin] });

cursorPlugin.attach(container);         // show while streaming
for await (const chunk of stream) md.push(chunk);
md.flush();
cursorPlugin.hide();                    // remove when the stream is complete

Combine it with the standard markdown plugins; cursor has priority 30 so it runs before everything else and never competes with real markdown.

Options

cursor({
  character: '▌',           // default '▍'
  className: 'my-cursor',   // default 'ce-cursor'
  animated: false,          // default true — adds 'ce-cursor-blink' class
});

Styling

Ship whatever CSS you like. A typical blink:

.ce-cursor { display: inline-block; color: currentColor; margin-left: 2px; }
.ce-cursor-blink { animation: ce-cursor-blink 1s steps(2) infinite; }
@keyframes ce-cursor-blink { 50% { opacity: 0; } }

API

• cursor(options?) — returns an GenerativeDomPlugin augmented with:
  • attach(container) — start tracking and append the cursor
  • show() — re-show after hide() (uses the previously attached container)
  • hide() — detach and remove the cursor from the DOM

The plugin listens for DOM mutations on the container and re-appends the cursor as the last child after each Generative DOM render, so it always stays at the end of the rendered content.