UI Renderer SDK

@nexart/ui-renderer v0.9.1 — deterministic UI rendering for verifiable interface artifacts.

Overview

@nexart/ui-renderer produces deterministic UI outputs that can be linked to Certified Execution Records. Identical inputs produce identical output, so a verifier can re-render a stored snapshot and confirm the result hash matches.

Typical uses:

AI-generated user interfaces
Automated report and document generation
Visual artifacts produced by agents

Install

npm install @nexart/ui-renderer

Current version: @nexart/ui-renderer@0.9.1.

Quickstart

Preview a system deterministically

import { previewSystem } from "@nexart/ui-renderer";

const { html, snapshot } = await previewSystem(
  {
    components: [/* component structure */],
    data:       { /* ... */ },
    parameters: { /* ... */ },
  },
  { seed: 12345 },
);

// 'html' is the rendered HTML snapshot.
// 'snapshot' is the canonical, hashable record of the render.

Exported functions

Symbol	Description
createPreviewRuntime(options)	Build a long-lived preview runtime handle.
createPreviewEngine(options)	Lower-level engine for advanced integrations.
compileSystem(systemSpec)	Compile a system spec into a renderable form.
previewSystem(systemSpec, options)	One-shot deterministic preview. Returns `{ html, snapshot }`.
renderCodeModeSystem(spec, options)	Bridge to CodeMode. Returns image output.
getCapabilities()	Returns runtime `{ budget, canvas, features }`.
SDK_VERSION	Package version string constant (`'0.9.1'`).

Capabilities and limits

getCapabilities() reports the runtime's hard ceilings. Renderers exceeding the budget or canvas limits are rejected before producing output, which keeps deterministic rendering bounded and reproducible.

Inspect capabilities

import { getCapabilities } from "@nexart/ui-renderer";

const caps = getCapabilities();
// caps.budget   -> per-render CPU / time ceiling
// caps.canvas   -> max render dimensions
// caps.features -> e.g. { codemodeBridge: true, systemPrimitives: true }

Deterministic rendering

The renderer guarantees that identical inputs produce identical UI output. Inputs include:

Component structure
Data
Parameters
Seed

Output artifacts

HTML snapshots (from previewSystem)
Rendered images (via renderCodeModeSystem)
Structured snapshot artifacts ({ snapshot, outputHash }) suitable for embedding in a CER

Verification

Because rendering is deterministic, a verifier can re-run the same system spec and confirm the output hash matches. This enables independent verification of UI artifacts without trusting the original rendering system. For end-to-end attestation, wrap the snapshot in a CER via the AI Execution SDK.

CodeMode SDK — the deterministic image renderer used by the bridge
AI Execution SDK — wrap a UI snapshot in a CER
Verification — verification semantics