Skip to main content

​
compileDocument()

Compile a self-contained HTVG document to SVG. This function accepts a complete document with metadata and content in a single object. 
function compileDocument(doc: HtvgDocument | string): CompileResult
​
doc
HtvgDocument | string
required
A complete HTVG document object or JSON string containing:
  • meta: Compilation options (width, height, fonts, etc.)
  • content: The root element tree to render
​
CompileResult
object
​
svg
string
Generated SVG string
​
width
number
Computed output width in pixels
​
height
number
Computed output height in pixels
​
warnings
string[]
Array of warning messages from compilation

​
Examples

import { init, compileDocument } from "htvg";

await init();

const result = compileDocument({
  meta: { 
    width: 400,
    fonts: [
      { family: "Inter", url: "https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2" }
    ]
  },
  content: {
    type: "flex",
    style: { 
      width: 400, 
      padding: 20, 
      backgroundColor: "#ffffff", 
      flexDirection: "column", 
      gap: 12 
    },
    children: [
      { 
        type: "text", 
        content: "Hello, HTVG!", 
        style: { fontSize: 24, fontWeight: "bold", color: "#1a1a1a" } 
      },
      { 
        type: "text", 
        content: "JSON to SVG, simple as that.", 
        style: { fontSize: 14, color: "#666" } 
      },
    ],
  },
});

console.log(result.svg);    // SVG markup
console.log(result.width);  // 400
console.log(result.height); // auto-computed

​
Using JSON strings

You can also pass a JSON string directly: 
const docJson = JSON.stringify({
  meta: { width: 400 },
  content: {
    type: "text",
    content: "Hello",
    style: { fontSize: 32 }
  }
});

const result = compileDocument(docJson);

​
compile()

Compile an element tree with separate options. This is useful when you want to reuse the same element tree with different compilation settings. 
function compile(
  element: Element | string,
  options: CompileOptions
): CompileResult
​
element
Element | string
required
The root element tree to render. Can be an Element object or JSON string.
​
options
CompileOptions
required
Compilation options object:
  • width (number, required): Output width in pixels
  • height (number, optional): Output height in pixels (auto-computed if omitted)
  • fontSize (number, optional): Default font size (default: 16)
  • fontFamily (string, optional): Default font family for text elements
  • fonts (FontSource[], optional): Custom fonts to register
​
CompileResult
object
Same as compileDocument() return value

​
Examples

import { init, compile } from "htvg";

await init();

const element = {
  type: "flex",
  style: { flexDirection: "column", gap: 8 },
  children: [
    { 
      type: "text", 
      content: "Title", 
      style: { fontSize: 20, fontWeight: 700 } 
    },
    { 
      type: "text", 
      content: "Subtitle", 
      style: { fontSize: 14, color: "#666" } 
    },
  ],
};

// Compile with different widths
const small = compile(element, { width: 300 });
const large = compile(element, { width: 800 });

​
With custom fonts

const element = {
  type: "text",
  content: "Custom Font Text",
  style: { 
    fontSize: 32, 
    fontFamily: "Inter",
    fontWeight: 600 
  }
};

const result = compile(element, {
  width: 400,
  fonts: [
    {
      family: "Inter",
      url: "https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiA.woff2",
      weight: 600
    }
  ]
});

​
Error Handling

Both functions throw errors if:
  • WASM module is not initialized (call init() first)
  • Invalid JSON format
  • Invalid element structure
  • Missing required fields
try {
  const result = compileDocument({
    meta: { width: 400 },
    content: { type: "text", content: "Hello" }
  });
  console.log(result.svg);
} catch (error) {
  console.error("Compilation failed:", error.message);
}

​
Performance Tips

  • Call init() once at application startup
  • Reuse element structures when possible
  • Use compile() when rendering the same content at different sizes
  • In serverless environments, initialize WASM outside the request handler when possible

Build docs developers (and LLMs) love

Get started for freeTalk to us