@nersh/render

Framework-agnostic renderer for nertia composition sites. Reads a site.json recipe, applies a skin, and renders the layout.

Used internally by projects scaffolded with npm create nersh@latest.

Install

npm install @nersh/render

Peer dependencies

Your project needs these installed alongside @nersh/render:

npm install react react-dom next lucide-react motion recharts class-variance-authority cobe zod @base-ui/react @calcom/embed-react

Projects created with create-nersh include all of these automatically.

Usage

"use client";

import { SiteRenderer } from "@nersh/render";
import { registry } from "@/registry";
import siteJson from "../site.json";

const site = siteJson as any;

export default function Home() {
  return <SiteRenderer site={site} registry={registry} />;
}

site.json shape

{
  "slug": "my-site",
  "mode": "easy",
  "status": "published",
  "skinId": "zinc",
  "composition": {
    "id": "marketing",
    "sections": [
      { "id": "navbar",         "instanceId": "nav-1"  },
      { "id": "marketing-hero", "instanceId": "hero-1" }
    ]
  },
  "copy": {
    "hero-1.headline": "\"Your headline\"",
    "hero-1.sub": "\"Supporting copy\""
  }
}

Registry

The registry maps section IDs to React components. create-nersh generates this automatically:

// src/registry.ts
import { NavbarSection }        from "./sections/navbar";
import { MarketingHeroSection } from "./sections/marketing-hero";

export const registry = {
  navbar:          NavbarSection,
  "marketing-hero": MarketingHeroSection,
};

Tailwind v4 setup

@nersh/render uses Tailwind utility classes internally. Add a @source directive to your globals.css so Tailwind v4 scans the package:

@import "tailwindcss";
@source "../node_modules/@nersh/render/dist";

Without this, styles from the render package will not appear.

SiteRenderer props

| Prop | Type | Description | |------|------|-------------| | site | CompositionSite | The parsed site.json | | registry | Record<string, ComponentType> | Maps section IDs to components |

Available skins

zinc · slate · stone · rose · coral · indigo · ocean · forest · gold · amber · purple · violet · graphite · midnight

Set via skinId in site.json.

Related

• create-nersh — scaffold a full site with npm create nersh@latest
• nertia.ai — browser-based builder that writes the same site.json format