Skip to main content

​
Welcome to HTVG

HTVG (HyperText Vector Graphics) is a static compiler that transforms JSON element trees into pure, self-contained SVG with pixel-perfect text layout and full flexbox support.

Quick Start

Get started in under 5 minutes with a working example

Installation

Install HTVG for Rust, Node.js, or use the CLI

API Reference

Explore the complete API documentation

Examples

Browse real-world examples and use cases

​
Why HTVG?

HTVG solves the challenge of generating complex, text-rich vector graphics programmatically. Unlike traditional SVG generation, HTVG provides:
  • Correct Text Layout - Powered by Parley for proper text shaping, line breaking, and glyph positioning
  • Flexbox Layout - Full CSS Flexbox support via Taffy for responsive layouts
  • Simple JSON API - Familiar element tree structure matching JSX/VDOM patterns
  • Pure SVG Output - Static, self-contained SVG with no JavaScript dependencies
  • WASM Compatible - Runs in browsers, Node.js, Cloudflare Workers, and edge runtimes
HTVG is perfect for generating Open Graph images, social media cards, badges, charts, and any vector graphics that require complex text layout.

​
How It Works

HTVG takes a JSON element tree and compiles it to SVG through a multi-stage pipeline: 
JSON Element Tree
       │
       ▼
┌──────────────────────┐
│ 1. DESERIALIZE       │  serde_json → Element tree
└──────────────────────┘
       │
       ▼
┌──────────────────────┐
│ 2. LAYOUT TREE       │  Map elements → Taffy tree
└──────────────────────┘
       │
       ▼
┌──────────────────────┐
│ 3. LAYOUT COMPUTE    │  Taffy + Parley measure
└──────────────────────┘
       │
       ▼
┌──────────────────────┐
│ 4. RENDER TREE       │  Final positions, boxes
└──────────────────────┘
       │
       ▼
┌──────────────────────┐
│ 5. SVG GENERATION    │  Emit <rect>, <text>, etc.
└──────────────────────┘

​
Simple Example

Here’s a minimal example that demonstrates HTVG’s core functionality: 
import { init, compileDocument } from "htvg";

await init();

const result = compileDocument({
  meta: { width: 400 },
  content: {
    type: "flex",
    style: { 
      width: 400, 
      padding: 32, 
      backgroundColor: "#ffffff",
      flexDirection: "column",
      gap: 12
    },
    children: [
      { 
        type: "text", 
        content: "Hello, HTVG!", 
        style: { fontSize: 32, fontWeight: "bold", color: "#1a1a1a" } 
      },
      { 
        type: "text", 
        content: "JSON to SVG, simple as that.", 
        style: { fontSize: 16, color: "#666" } 
      },
    ],
  },
});

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

​
Core Features

​
Element Types

HTVG provides four fundamental element types:

box

Block container element for layout and visual composition

flex

Flexbox container with full CSS Flexbox support

text

Text leaf element with automatic line wrapping and shaping

image

Image element with intrinsic dimensions and object-fit

​
Style Properties

HTVG supports a comprehensive set of CSS-like style properties:
  • Layout: width, height, minWidth, maxWidth, minHeight, maxHeight, margin, padding
  • Flexbox: flexDirection, justifyContent, alignItems, gap, flexWrap, flexGrow, flexShrink
  • Visual: backgroundColor, borderWidth, borderColor, borderRadius, opacity
  • Typography: fontFamily, fontSize, fontWeight, lineHeight, textAlign, color, letterSpacing
  • Image: objectFit (contain, cover, fill)
Dimensions accept both pixels (number) and percentages (string like "50%"). Spacing properties accept a single value or space-separated values for "top right bottom left".

​
Use Cases

HTVG excels at generating:
  • Open Graph images and social media cards
  • Dynamic badges and status indicators
  • Charts and data visualizations
  • Email signatures and letterheads
  • Programmatic diagrams and infographics
  • PDF-ready vector graphics

​
Next Steps

Install HTVG

Choose your platform and get HTVG installed

Quick Start Guide

Build your first HTVG project in minutes

Build docs developers (and LLMs) love

Get started for freeTalk to us