Skip to main content

Block controls and interactivity

HyperMarkdown supplies browser interactions for code blocks, tables, Mermaid diagrams, and reasoning panels. Server rendering produces stable content; these controls become active after hydration.

Default controls​

BlockControls
CodeCopy, fullscreen, and HTML preview for finished html fences
TableCopy and fullscreen
MermaidCopy diagram source, fullscreen, pan, zoom, and reset view
ReasoningExpand and collapse

Configure each block​

<HyperMarkdown
  md={markdown}
  controls={{
    reasoning: true,
    code: { copy: true, fullscreen: true, preview: false },
    table: { copy: true, fullscreen: false },
    diagram: { copy: true, fullscreen: true, panZoom: false },
  }}
/>

Passing false for code, table, or diagram disables that block's controls. Set diagram.panZoom to false to disable the diagram's zoom buttons, Ctrl/⌘ wheel zoom, and pointer or touch panning. Passing reasoning: false keeps the reasoning content but removes its disclosure wrapper.

Host callbacks​

<HyperMarkdown
  md={markdown}
  onFullscreenChange={(fullscreen) => setChromeHidden(fullscreen)}
  onAlert={(alert) => showAlert(alert)}
/>
  • onFullscreenChange reports fullscreen changes from code, table, and diagram blocks.
  • onAlert lets the host present pending or unavailable HTML preview messages instead of relying on renderer-owned UI.
  • scrollDown runs after each committed streaming update, when the new DOM can be measured.

Labels and icons​

All renderer-owned strings can be changed through translations, and toolbar icons can be replaced with inline SVG markup through icons. See Localization for the complete pattern.