Interactive HTML renderer for Shumoku. Wraps the canonical @shumoku/renderer static SVG output in a self-contained page with pan, zoom, tooltips, and — for large networks — multi-sheet navigation. Legacy prepared layouts without ResolvedLayout remain compatible through @shumoku/renderer-svg.
Install
npm install @shumoku/renderer-html @shumoku/coreQuick start
import { YamlParser } from '@shumoku/core'
import { renderGraphToHtml } from '@shumoku/renderer-html'
const { graph } = new YamlParser().parse(yaml)
const html = await renderGraphToHtml(graph, { title: 'My Network', toolbar: true })API
| Function | Description |
|---|---|
renderGraphToHtml(graph, options?) | async — parse-to-HTML convenience |
renderGraphToHtmlHierarchical(graph, options?) | async — convenience with sheet navigation |
renderHtml(prepared, options?) | sync — render a PreparedRender to HTML |
renderHtmlHierarchical(prepared, options?) | async — render with sheets |
Options (HTMLRenderOptions)
| Field | Type | Notes |
|---|---|---|
title | string | Page / document title |
branding | boolean | Show the Shumoku mark |
toolbar | boolean | Show the pan/zoom toolbar |
theme | 'light' | 'dark' | Override graph.settings.theme |
sheets | Map<string, SheetData> | Pre-computed hierarchical sheets (skips recomputation) |
The one-liner and prepared-render pipelines use ResolvedLayout and the same SVG geometry as CLI, PNG, server output, and the Svelte renderer. The generated SVG retains node, port, link, and sheet data attributes required by the tooltip and navigation runtime.
Embedding
The interactive behavior ships as an IIFE bundle. Use getIIFE() / setIIFE() / INTERACTIVE_IIFE to inline or supply it, and initInteractive() to wire up an already-rendered SVG in the browser.
License
AGPL-3.0-only. For commercial licensing, contact [email protected].