Svelte

This is a Svelte 5 renderer for the json-render library that lets you build UIs from JSON specs. You define a component catalog with Zod schemas, register your Svelte components, and the renderer turns JSON into live component trees. It includes state management via JSON Pointers, event handling through an action system, conditional visibility, and two-way binding helpers. The streaming UI support is clever: you can pipe specs from an API and render them progressively while they're still generating. Most useful when you're building AI-generated interfaces, component previews, or any system where you need to dynamically render Svelte UIs from declarative specs without hardcoding the structure.

skills.sh installs: 1.2K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill svelte --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/svelte

Svelte 5 renderer that converts json-render specs into Svelte component trees.

Quick Start

<script lang="ts">
  import { Renderer, JsonUIProvider } from "@json-render/svelte";
  import type { Spec } from "@json-render/svelte";
  import Card from "./components/Card.svelte";
  import Button from "./components/Button.svelte";

  interface Props {
    spec: Spec | null;
  }

  let { spec }: Props = $props();
  const registry = { Card, Button };
</script>

<JsonUIProvider>
  <Renderer {spec} {registry} />
</JsonUIProvider>

Creating a Catalog

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/svelte";
import { z } from "zod";

export const catalog = defineCatalog(schema, {
  components: {
    Button: {
      props: z.object({
        label: z.string(),
        variant: z.enum(["primary", "secondary"]).nullable(),
      }),
      description: "Clickable button",
    },
    Card: {
      props: z.object({ title: z.string() }),
      description: "Card container with title",
    },
  },
});