thesysdev · abhithesys · Mar 25, 2026 · Mar 16, 2026 · Mar 16, 2026 · Mar 16, 2026
diff --git a/.gitignore b/.gitignore
@@ -33,6 +33,7 @@ node_modules
 # Build output
 dist
 .next
+.svelte-kit
 *.tsbuildinfo
 typings
 

diff --git a/examples/svelte-chat/package.json b/examples/svelte-chat/package.json
@@ -0,0 +1,21 @@
+{
+	"name": "svelte-chat",
+	"private": true,
+	"type": "module",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
+	},
+	"dependencies": {
+		"@openuidev/svelte-lang": "workspace:*",
+		"zod": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^4.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"@sveltejs/vite-plugin-svelte": "^5.0.0",
+		"svelte": "^5.0.0",
+		"vite": "^6.0.0"
+	}
+}
diff --git a/examples/svelte-chat/src/app.css b/examples/svelte-chat/src/app.css
@@ -0,0 +1,11 @@
+* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: system-ui, sans-serif;
+	background: #f5f5f5;
+	color: #1a1a1a;
+}
diff --git a/examples/svelte-chat/src/app.html b/examples/svelte-chat/src/app.html
@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<title>OpenUI Svelte Chat</title>
+		%sveltekit.head%
+	</head>
+	<body data-sveltekit-prerender="true">
+		<div style="display: contents">%sveltekit.body%</div>
+	</body>
+</html>
diff --git a/examples/svelte-chat/src/lib/components/Button.svelte b/examples/svelte-chat/src/lib/components/Button.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import { getTriggerAction } from "@openuidev/svelte-lang";
+
+	let { props }: { props: { label?: string; action?: string }; renderNode: Snippet<[unknown]> } =
+		$props();
+
+	const triggerAction = getTriggerAction();
+</script>
+
+<button
+	class="btn"
+	onclick={() =>
+		triggerAction(props.label ?? "Click", undefined, props.action ? { type: props.action } : undefined)}
+>
+	{props.label ?? "Button"}
+</button>
+
+<style>
+	.btn {
+		padding: 8px 16px;
+		background: #2563eb;
+		color: white;
+		border: none;
+		border-radius: 6px;
+		cursor: pointer;
+		font-size: 0.9rem;
+	}
+
+	.btn:hover {
+		background: #1d4ed8;
+	}
+</style>
diff --git a/examples/svelte-chat/src/lib/components/Card.svelte b/examples/svelte-chat/src/lib/components/Card.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let {
+		props,
+		renderNode,
+	}: { props: { title?: string; children?: unknown }; renderNode: Snippet<[unknown]> } = $props();
+</script>
+
+<div class="card">
+	{#if props.title}
+		<h3 class="card-title">{props.title}</h3>
+	{/if}
+	{#if props.children}
+		{@render renderNode(props.children)}
+	{/if}
+</div>
+
+<style>
+	.card {
+		background: white;
+		border-radius: 8px;
+		padding: 16px;
+		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+	}
+
+	.card-title {
+		font-size: 1.1rem;
+		font-weight: 600;
+		margin-bottom: 8px;
+	}
+</style>
diff --git a/examples/svelte-chat/src/lib/components/Stack.svelte b/examples/svelte-chat/src/lib/components/Stack.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let {
+		props,
+		renderNode,
+	}: { props: { children?: unknown }; renderNode: Snippet<[unknown]> } = $props();
+</script>
+
+<div class="stack">
+	{#if props.children}
+		{@render renderNode(props.children)}
+	{/if}
+</div>
+
+<style>
+	.stack {
+		display: flex;
+		flex-direction: column;
+		gap: 12px;
+	}
+</style>
diff --git a/examples/svelte-chat/src/lib/components/TextContent.svelte b/examples/svelte-chat/src/lib/components/TextContent.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+
+	let { props }: { props: { text?: string }; renderNode: Snippet<[unknown]> } = $props();
+</script>
+
+<p class="text-content">{props.text ?? ""}</p>
+
+<style>
+	.text-content {
+		line-height: 1.5;
+		color: #333;
+	}
+</style>
diff --git a/examples/svelte-chat/src/lib/library.ts b/examples/svelte-chat/src/lib/library.ts
@@ -0,0 +1,47 @@
+import { z } from "zod";
+import { defineComponent, createLibrary } from "@openuidev/svelte-lang";
+import Stack from "./components/Stack.svelte";
+import Card from "./components/Card.svelte";
+import TextContent from "./components/TextContent.svelte";
+import Button from "./components/Button.svelte";
+
+const TextContentDef = defineComponent({
+	name: "TextContent",
+	props: z.object({ text: z.string() }),
+	description: "Displays text content",
+	component: TextContent,
+});
+
+const ButtonDef = defineComponent({
+	name: "Button",
+	props: z.object({
+		label: z.string(),
+		action: z.string().optional(),
+	}),
+	description: "A clickable button that triggers an action",
+	component: Button,
+});
+
+const CardDef = defineComponent({
+	name: "Card",
+	props: z.object({
+		title: z.string(),
+		children: z.array(z.union([TextContentDef.ref, ButtonDef.ref])),
+	}),
+	description: "A card container with a title and child content",
+	component: Card,
+});
+
+const StackDef = defineComponent({
+	name: "Stack",
+	props: z.object({
+		children: z.array(z.union([CardDef.ref, TextContentDef.ref, ButtonDef.ref])),
+	}),
+	description: "Vertical layout container",
+	component: Stack,
+});
+
+export const library = createLibrary({
+	components: [TextContentDef, ButtonDef, CardDef, StackDef],
+	root: "Stack",
+});
diff --git a/examples/svelte-chat/src/routes/+layout.ts b/examples/svelte-chat/src/routes/+layout.ts
@@ -0,0 +1,2 @@
+// Disable SSR — the openui-lang parser operates client-side only
+export const ssr = false;
-Original file line number
+Diff line change
@@ Expand Up / @@ -33,6 +33,7 @@ node_modules @@
     # Build output
     dist
     .next
+    .svelte-kit
     *.tsbuildinfo
     typings
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// Disable SSR — the openui-lang parser operates client-side only
		export const ssr = false;