render() and renderToHTML() are the reference output of the .gui format — browser-clean HTML from markup, with optional pan/zoom and mode switching.

/render

readthe reference output

The format’s reference output — render .gui markup to HTML. Browser-clean: no heavy dependencies, no browser engine bundled.

render draws into a live DOM element and can wrap the result in an interactive pan/zoom canvas; renderToHTML returns an HTML string and can preview any mode (e.g. a dark theme). Rendering to a bitmap is not here — that is /rasterize.

Signature

render(code, container, assetMap?, options?): ZoomControl | null
renderToHTML(code, assetMap?, options?): string

interface RenderOptions {
  zoom?: boolean                 // wrap in a pan/zoom canvas
  mode?: Record<string, string>  // active mode, e.g. { theme: 'dark' }
  view?: ZoomView                // restore a saved viewport
}

Use cases

Live preview in an app, the landing site, or a Figma plugin.
The reference output every other format derives from (PNG/PDF/SVG).
Feeding a rasterizer — render to HTML, then screenshot to preview.webp.

Render into a page (browser)

import { render } from '@dotgui/kit/render'

const zoom = render(markup, document.getElementById('stage')!, assetMap, { zoom: true })
zoom?.(1)   // fit-to-container

Render to a string in another mode

import { renderToHTML } from '@dotgui/kit/render'

const darkHtml = renderToHTML(markup, assetMap, { mode: { theme: 'dark' } })