@openstage/glyph-renderer

Read-only renderer for Glyph documents. Turns a saved EditorDocument into DOM (or an HTML string) for display without loading the editor, with lazy language-aware code highlighting.

npm i @openstage/glyph-renderer

Usage

import { renderToElement, highlightThemeCss } from '@openstage/glyph-renderer';

container.replaceChildren(renderToElement(savedDocument));
// renderToHTML(doc) returns an HTML string instead (SSR / caching)

Output is built with createElement/textContent only (never innerHTML), link hrefs are scheme-allowlisted, control-obfuscated javascript:/data: URLs are stripped, and highlighted code is assembled from a parsed token tree — untrusted documents render safely. Rendered links open in a new tab (target="_blank" + rel="noopener noreferrer").

Syntax highlighting

The renderer is style-free (the host owns CSS). For highlighted code, inject the token stylesheet (re-themable via --glyph-hl-* custom properties):

const style = document.createElement('style');
style.textContent = highlightThemeCss;
document.head.appendChild(style);

renderToElement highlights progressively: it returns immediately with plain code, then upgrades the block in place once the language's grammar chunk has loaded. renderToHTML is synchronous, so preload grammars first for SSR/snapshots:

import { preloadLanguages, renderToHTML } from '@openstage/glyph-renderer';

await preloadLanguages(['typescript', 'bash']);
const html = renderToHTML(savedDocument); // now highlighted

ensureLanguage / isLanguageSupported are also exported.

Documentation

Full guide and supported-content reference: https://codeberg.org/open-stage/glyph#readme

License

MIT © Gabriel Bornea