vRenderer

Static React renderer. Walks a component tree, emits deterministic HTML with Tailwind class strings and data-class token maps. Server-only; hydration-free. Downstream vSsg ingests the data-class attributes for semantic CSS rewrite.

Install

npm install @booga/vrenderer

Peer dependency: react ^18.

Usage

import { render, renderToFile } from "@booga/vrenderer";
import { createElement } from "react";

const html = render(createElement("div", { p: 2, variant: "primary" }, "hello"));
// → <div class="p-2 variant-primary" data-class="p-2 variant-primary">hello</div>

await renderToFile(tree, "./out/index.html");

API

render(tree, options?): string

Synchronous. Throws if called in a browser environment (use allowBrowser: true in tests).

renderToFile(tree, path, options?): Promise<void>

Calls render(), writes result to path as UTF-8.

RenderOptions

Option	Default	Description
pretty	false	Indent output with two spaces per nesting level
sortAttrs	true	Sort HTML attributes lexicographically
emitDataClass	true	Emit data-class attribute from DSL token props
allowBrowser	false	Suppress server-only guard (testing only)

DSL props

Props from @booga/vdsl (p, m, variant, size, bg, …) are partitioned before emit:

• removed from the raw HTML attribute set
• compiled to a class string via resolveClasses
• mirrored to data-class via extractDataClass

className merges with any DSL-derived class into a single class attribute.

What is emitted

• Void tags (img, br, input, …) self-close
• Event handlers (on*) stripped
• key and ref stripped
• style objects serialized to inline CSS
• dangerouslySetInnerHTML.__html emitted raw
• Text content and attribute values HTML-escaped

Code of conduct

Contributor Covenant 2.1

License

MIT © 2026 bvasilenko