Overview

@joy-dom/react renders a Joy DOM JSON document into React elements. It powers the live previews on the spec page.

Install

npm install @joy-dom/react @joy-dom/core

The install is two packages:

• @joy-dom/react is the renderer. It lists react and react-dom 19 as peer dependencies, so add those to your app if they are not there yet.
• @joy-dom/core holds the TypeScript types and JSON Schema for the document format. It types your specs.

First render

import { Joy } from "@joy-dom/react";
import type { Spec } from "@joy-dom/core";

const spec: Spec = {
  version: 1,
  style: {
    ".hello": { display: "flex", padding: { value: 16, unit: "px" } },
    p: { display: "flex" },
  },
  breakpoints: [],
  layout: {
    type: "div",
    props: { className: ["hello"] },
    children: [{ type: "p", children: ["Hello Joy DOM"] }],
  },
};

export function App() {
  return <Joy spec={spec} />;
}

<Joy> drops in anywhere a React component goes. It renders the document into its own shadow root, so the spec's global ids and classes stay isolated from the host page.

Where next

• Custom components render the document's kebab-case node types.
• Events and actions wire onclick, onfocus, onblur, and onchange to handlers.
• Templates and state declare document state and read it with $-directives.
• Server rendering covers the shadow-root tradeoffs and how to load documents.
• API reference lists every prop and type.