svelte

Name: svelte
Author: vercel-labs

855installs849forks

How to install svelte?

vercel-labs/json-render/svelte

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

Installs into the current project.

Summary

Svelte 5 renderer for json-render that turns JSON specs into Svelte component trees. Use when working with @json-render/svelte, building Svelte UIs from JSON, creating component catalogs, or rendering AI-generated specs.

Files · 1

View on GitHub

SKILL.md

1	# @json-render/svelte
2
3	Svelte 5 renderer that converts json-render specs into Svelte component trees.
4
5	## Quick Start
6
7	```svelte
8	<script lang="ts">
9	import { Renderer, JsonUIProvider } from "@json-render/svelte";
10	import type { Spec } from "@json-render/svelte";
11	import Card from "./components/Card.svelte";
12	import Button from "./components/Button.svelte";
13
14	interface Props {
15	spec: Spec \| null;
16	}
17
18	let { spec }: Props = $props();
19	const registry = { Card, Button };
20	</script>
21
22	<JsonUIProvider>
23	<Renderer {spec} {registry} />
24	</JsonUIProvider>
25	```
26
27	## Creating a Catalog
28
29	```typescript
30	import { defineCatalog } from "@json-render/core";
31	import { schema } from "@json-render/svelte";
32	import { z } from "zod";
33
34	export const catalog = defineCatalog(schema, {
35	components: {
36	Button: {
37	props: z.object({
38	label: z.string(),
39	variant: z.enum(["primary", "secondary"]).nullable(),
40	}),
41	description: "Clickable button",
42	},
43	Card: {
44	props: z.object({ title: z.string() }),
45	description: "Card container with title",
46	},
47	},
48	});
49	```
50
51	## Defining Components
52
53	Components should accept `BaseComponentProps<TProps>`:
54
55	```typescript
56	interface BaseComponentProps<TProps> {
57	props: TProps; // Resolved props for this component
58	children?: Snippet; // Child elements (use {@render children()})
59	emit: (event: string) => void; // Fire a named event
60	bindings?: Record<string, string>; // Map of prop names to state paths (for $bindState)
61	loading?: boolean; // True while spec is streaming
62	}
63	```
64
65	```svelte
66	<!-- Button.svelte -->
67	<script lang="ts">
68	import type { BaseComponentProps } from "@json-render/svelte";
69
70	interface Props extends BaseComponentProps<{ label: string; variant?: string }> {}
71	let { props, emit }: Props = $props();
72	</script>
73
74	<button class={props.variant} onclick={() => emit("press")}>
75	{props.label}
76	</button>
77	```
78
79	```svelte
80	<!-- Card.svelte -->
81	<script lang="ts">
82	import type { Snippet } from "svelte";
83	import type { BaseComponentProps } from "@json-render/svelte";
84
85	interface Props extends BaseComponentProps<{ title: string }> {
86	children?: Snippet;
87	}
88
89	let { props, children }: Props = $props();
90	</script>
91
92	<div class="card">
93	<h2>{props.title}</h2>
94	{#if children}
95	{@render children()}
96	{/if}
97	</div>
98	```
99
100	## Creating a Registry
101
102	```typescript
103	import { defineRegistry } from "@json-render/svelte";
104	import { catalog } from "./catalog";
105	import Card from "./components/Card.svelte";
106	import Button from "./components/Button.svelte";
107
108	const { registry, handlers, executeAction } = defineRegistry(catalog, {
109	components: {
110	Card,
111	Button,
112	},
113	actions: {
114	submit: async (params, setState, state) => {
115	// handle action
116	},
117	},
118	});
119	```
120
121	## Spec Structure (Element Tree)
122
123	The Svelte schema uses the element tree format:
124
125	```json
126	{
127	"root": "card1",
128	"elements": {
129	"card1": {
130	"type": "Card",
131	"props": { "title": "Hello" },
132	"children": ["btn1"]
133	},
134	"btn1": {
135	"type": "Button",
136	"props": { "label": "Click me" }
137	}
138	}
139	}
140	```
141
142	## Visibility Conditions
143
144	Use `visible` on elements to show/hide based on state:
145
146	- `{ "$state": "/path" }` - truthy check
147	- `{ "$state": "/path", "eq": value }` - equality check
148	- `{ "$state": "/path", "not": true }` - falsy check
149	- `{ "$and": [cond1, cond2] }` - AND conditions
150	- `{ "$or": [cond1, cond2] }` - OR conditions
151
152	## Providers (via JsonUIProvider)
153
154	`JsonUIProvider` composes all contexts. Individual contexts:
155
156	\| Context \| Purpose \|
157	\| ------------------- \| -------------------------------------------------- \|
158	\| `StateContext` \| Share state across components (JSON Pointer paths) \|
159	\| `ActionContext` \| Handle actions dispatched via the event system \|
160	\| `VisibilityContext` \| Enable conditional rendering based on state \|
161	\| `ValidationContext` \| Form field validation \|
162
163	## Event System
164
165	Components use `emit` to fire named events. The element's `on` field maps events to action bindings:
166
167	```svelte
168	<!-- Button.svelte -->
169	<script lang="ts">
170	import type { BaseComponentProps } from "@json-render/svelte";
171
172	interface Props extends BaseComponentProps<{ label: string }> {}
173
174	let { props, emit }: Props = $props();
175	</script>
176
177	<button onclick={() => emit("press")}>{props.label}</button>
178	```
179
180	```json
181	{
182	"type": "Button",
183	"props": { "label": "Submit" },
184	"on": { "press": { "action": "submit" } }
185	}
186	```
187
188	## Built-in Actions
189
190	The `setState` action is handled automatically and updates the state model:
191
192	```json
193	{
194	"action": "setState",
195	"actionParams": { "statePath": "/activeTab", "value": "home" }
196	}
197	```
198
199	Other built-in actio

People who liked this also viewed

6 picks

Type

find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 20262.6M27k
grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026633k182k
vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026573k29k
improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026522k182k
setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026454k182k
triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026424k182k

svelte

855installs849forks

View on GitHub

How to install svelte?

vercel-labs/json-render/svelte

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# @json-render/svelte
2
3	Svelte 5 renderer that converts json-render specs into Svelte component trees.
4
5	## Quick Start
6
7	```svelte
8	<script lang="ts">
9	import { Renderer, JsonUIProvider } from "@json-render/svelte";
10	import type { Spec } from "@json-render/svelte";
11	import Card from "./components/Card.svelte";
12	import Button from "./components/Button.svelte";
13
14	interface Props {
15	spec: Spec \| null;
16	}
17
18	let { spec }: Props = $props();
19	const registry = { Card, Button };
20	</script>
21
22	<JsonUIProvider>
23	<Renderer {spec} {registry} />
24	</JsonUIProvider>
25	```
26
27	## Creating a Catalog
28
29	```typescript
30	import { defineCatalog } from "@json-render/core";
31	import { schema } from "@json-render/svelte";
32	import { z } from "zod";
33
34	export const catalog = defineCatalog(schema, {
35	components: {
36	Button: {
37	props: z.object({
38	label: z.string(),
39	variant: z.enum(["primary", "secondary"]).nullable(),
40	}),
41	description: "Clickable button",
42	},
43	Card: {
44	props: z.object({ title: z.string() }),
45	description: "Card container with title",
46	},
47	},
48	});
49	```
50
51	## Defining Components
52
53	Components should accept `BaseComponentProps<TProps>`:
54
55	```typescript
56	interface BaseComponentProps<TProps> {
57	props: TProps; // Resolved props for this component
58	children?: Snippet; // Child elements (use {@render children()})
59	emit: (event: string) => void; // Fire a named event
60	bindings?: Record<string, string>; // Map of prop names to state paths (for $bindState)
61	loading?: boolean; // True while spec is streaming
62	}
63	```
64
65	```svelte
66	<!-- Button.svelte -->
67	<script lang="ts">
68	import type { BaseComponentProps } from "@json-render/svelte";
69
70	interface Props extends BaseComponentProps<{ label: string; variant?: string }> {}
71	let { props, emit }: Props = $props();
72	</script>
73
74	<button class={props.variant} onclick={() => emit("press")}>
75	{props.label}
76	</button>
77	```
78
79	```svelte
80	<!-- Card.svelte -->
81	<script lang="ts">
82	import type { Snippet } from "svelte";
83	import type { BaseComponentProps } from "@json-render/svelte";
84
85	interface Props extends BaseComponentProps<{ title: string }> {
86	children?: Snippet;
87	}
88
89	let { props, children }: Props = $props();
90	</script>
91
92	<div class="card">
93	<h2>{props.title}</h2>
94	{#if children}
95	{@render children()}
96	{/if}
97	</div>
98	```
99
100	## Creating a Registry
101
102	```typescript
103	import { defineRegistry } from "@json-render/svelte";
104	import { catalog } from "./catalog";
105	import Card from "./components/Card.svelte";
106	import Button from "./components/Button.svelte";
107
108	const { registry, handlers, executeAction } = defineRegistry(catalog, {
109	components: {
110	Card,
111	Button,
112	},
113	actions: {
114	submit: async (params, setState, state) => {
115	// handle action
116	},
117	},
118	});
119	```
120
121	## Spec Structure (Element Tree)
122
123	The Svelte schema uses the element tree format:
124
125	```json
126	{
127	"root": "card1",
128	"elements": {
129	"card1": {
130	"type": "Card",
131	"props": { "title": "Hello" },
132	"children": ["btn1"]
133	},
134	"btn1": {
135	"type": "Button",
136	"props": { "label": "Click me" }
137	}
138	}
139	}
140	```
141
142	## Visibility Conditions
143
144	Use `visible` on elements to show/hide based on state:
145
146	- `{ "$state": "/path" }` - truthy check
147	- `{ "$state": "/path", "eq": value }` - equality check
148	- `{ "$state": "/path", "not": true }` - falsy check
149	- `{ "$and": [cond1, cond2] }` - AND conditions
150	- `{ "$or": [cond1, cond2] }` - OR conditions
151
152	## Providers (via JsonUIProvider)
153
154	`JsonUIProvider` composes all contexts. Individual contexts:
155
156	\| Context \| Purpose \|
157	\| ------------------- \| -------------------------------------------------- \|
158	\| `StateContext` \| Share state across components (JSON Pointer paths) \|
159	\| `ActionContext` \| Handle actions dispatched via the event system \|
160	\| `VisibilityContext` \| Enable conditional rendering based on state \|
161	\| `ValidationContext` \| Form field validation \|
162
163	## Event System
164
165	Components use `emit` to fire named events. The element's `on` field maps events to action bindings:
166
167	```svelte
168	<!-- Button.svelte -->
169	<script lang="ts">
170	import type { BaseComponentProps } from "@json-render/svelte";
171
172	interface Props extends BaseComponentProps<{ label: string }> {}
173
174	let { props, emit }: Props = $props();
175	</script>
176
177	<button onclick={() => emit("press")}>{props.label}</button>
178	```
179
180	```json
181	{
182	"type": "Button",
183	"props": { "label": "Submit" },
184	"on": { "press": { "action": "submit" } }
185	}
186	```
187
188	## Built-in Actions
189
190	The `setState` action is handled automatically and updates the state model:
191
192	```json
193	{
194	"action": "setState",
195	"actionParams": { "statePath": "/activeTab", "value": "home" }
196	}
197	```
198
199	Other built-in actio

People who liked this also viewed

6 picks

Type