@xmachines/json-render-dom

Framework-free DOM renderer for json-render — pure Spec → DOM, no virtual DOM, no framework runtime.

Implements the same element-rendering contract as @xmachines/json-render-react, /solid, /svelte, and /vue:

• props resolved via resolveElementProps from @xmachines/json-render-core (the full expression set: $state, $item, $index, $bindState, $bindItem, $cond, $computed, $template, plus custom directives)
• visibility via evaluateVisibility
• catalog-typed components and actions via defineRegistry
• per-element error handling via onRenderError
• an incremental re-renderer that diffs state changes per element and re-renders only affected subtrees in place

Usage

import { createStateStore, defineCatalog } from "@xmachines/json-render-core";
import { defineRegistry, renderSpec, schema } from "@xmachines/json-render-dom";
import type { ComponentFn } from "@xmachines/json-render-dom";
import { z } from "zod";

const catalog = defineCatalog(schema, {
  components: {
    Card: { props: z.object({ title: z.string() }) },
  },
  actions: {},
});

const Card: ComponentFn<typeof catalog, "Card"> = ({ props, children }) => {
  const el = document.createElement("div");
  el.textContent = props.title;
  el.append(...children);
  return el;
};

const { registry } = defineRegistry(catalog, { components: { Card } });
const store = createStateStore(spec.state ?? {});
const node = renderSpec(spec, store, registry);
if (node) container.appendChild(node);

This package is maintained in the XMachines fork of json-render (upstream has no DOM package) and originated as the json-render layer of @xmachines/play-dom. See XMACHINES.md at the repository root.