parseXml turns .gui markup into a resolved model with tokens, styles, and modes resolved — DOM-free, runs in the browser, Node, edge, and the Figma sandbox.

/parser

readmarkup → resolved model

Turns .gui markup into a resolved model — tokens, styles, and modes already resolved — ready for rendering, scoring, or analysis.

It runs anywhere: parseXml is DOM-free. It uses the platform’s native DOMParser when present (browser, Figma UI) and falls back to @xmldom/xmldom everywhere else — Node, edge, the Figma sandbox. No DOM shim needed.

Signature

parse(bytes: Uint8Array): ParsedGUI | null
parseXml(xml: string, assetMap?: Record<string, string>): ParsedGUI | null

resolveTokenValue(def, modes, activeMode): string | undefined
flattenTokens(tokenDefs, modes, activeMode): Record<string, string>

Use cases

Feed the renderer — parseXml → model → renderToHTML.
Static analysis — walk ParsedNode for linting, metrics, accessibility.
Token / theme resolution — compute concrete values for any active mode.
Round-trip tooling — Figma import/export reads the resolved model.

Parse markup into a model

import { parseXml } from '@dotgui/kit/parser'

const model = parseXml('<gui name="demo" platform="web-desktop"><frame name="root"/></gui>')
console.log(model?.platform)   // "web-desktop"
console.log(model?.root)       // ParsedNode tree

Resolve tokens for a specific mode (dark theme)

import { flattenTokens } from '@dotgui/kit/parser'

const values = flattenTokens(model.tokens, model.modes, { theme: 'dark' })
// { "color.bg": "#000", "color.fg": "#fff", ... }