Rendering HTML

The renderHtml function compiles a React component (from a project package or a local .tsx resource) server-side into a self-contained static HTML document.

React Requirements: The source file must export a valid React component matching componentExport (which defaults to 'default'). The function returns an HTML string; use save() to create an HTML file for later rendering.

This optional product renderer uses a separately installed Node runtime with tsx, react and react-dom. The Rust host owns evaluation, resource authority, value transport and structured failures. Set KAYA_RENDER_HTML_NODE and KAYA_RENDER_HTML_MODULE_ROOT for explicit deployment paths. Arbitrary product TSX remains supported input; it is separate from Kaya language execution and the Chromium-based PDF/image providers.

Signature

renderHtml(
  componentResource?: string,     // TSX component file in the sandbox/VFS (loaded via `resource`)
  componentPath?: string,         // OR: path resolved by the Node renderer
                                  //     (supports @shared/ aliases)
  componentExport?: string,       // Optional: Named export to render (default: "default")
  props?: Record<string, unknown> // Optional: React props passed to the component
) -> string

Provide exactly one of componentResource (a file loaded into the sandbox with resource) or componentPath (an installed package or @shared/ alias). Passing both — or neither — is an error.

Example

Supply an email-card.tsx resource exporting NewsletterCard before running this example:

// Load a local TSX template file from the sandbox
resource "email-card.tsx"

let newsletter = renderHtml(
  componentResource: "email-card.tsx",
  componentExport: "NewsletterCard",
  props: {
    title: "Kaya Monthly Digest",
    items: ["Unifying Renders", "Zero-Trust Sandboxes"]
  }
)
// Returns a self-contained HTML string
save(content: newsletter, filename: "june-newsletter.html")

Backward Compatibility: renderComponent() is supported as an alias for renderHtml().

Staging a shared component library

A single .tsx template is fine, but a component library is many files. The plural resources form stages a whole directory tree into the sandbox, and the from "<package>" clause resolves a workspace package by name:

// Stage @kaya/projects/src/blocks/** into templates/blocks/ in the sandbox
resources "src/blocks" from "@kaya/projects" in "templates/blocks"

resource "report.tsx" in "templates"   // your template imports "./blocks"

let html = renderHtml(
  componentResource: "templates/report.tsx",
  componentExport: "Report",
  props: { /* ... */ }
)

The staged template then imports the library with a relative path (import { ChartDataPrint } from "./blocks"); npm deps like react auto-resolve, and the package's own sibling imports resolve inside the staged tree. node_modules and *.test.* files are skipped during staging.

Workspace resolution is anchored at the program's directory. Because the repo uses isolated installs, the program's package must declare the dependency (e.g. "@kaya/projects": "workspace:*") so it is symlinked into node_modules. in/from may appear in either order.

Host Setup

Configure the renderer and grant the session access before running these examples. See the rendering overview for dependencies and the Tool Server guide for host setup.