# UI Renderer SDK Guide

URL: https://docs.nexart.io/docs/ui-renderer-sdk

The @nexart/ui-renderer SDK for deterministic UI rendering, covering setup, deterministic render output, snapshot capture, and turning rendered results into.

## 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

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.

## Related

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