svelte

Convert JSON UI specifications into Svelte 5 component trees.

6|Updated Mar 26, 2026

Search Tags:#state management #svelte #component catalog #json-render #ui renderer #dynamic bindings #event actions

Ready to run

npx skills add https://github.com/memoirlabs/mog --skill svelte-memoirlabs

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svelte
Source: https://github.com/memoirlabs/mog/tree/main/.agents/skills/svelte
Command: npx skills add https://github.com/memoirlabs/mog --skill svelte-memoirlabs

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Svelte turns UI definitions from JSON into real Svelte component trees, removing the need to hand-code repetitive component wiring when you already have a structured UI spec.

Core Features & Use Cases

JSON spec to Svelte component trees: Render an element-tree spec into live Svelte components using a registry of component implementations.
Catalog-driven component definitions: Define component props and validation via a schema-powered catalog so specs are structured and predictable.
State, visibility, and actions from the spec: Use state-bound props, visibility conditions, and event-to-action dispatch (including built-in state actions) to drive interactive UIs.

Quick Start

Render a JSON UI spec as a Svelte component tree by registering your components and passing the spec through JsonUIProvider and Renderer.

Frequently Asked Questions about svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I render JSON UI specs as Svelte components?▼

To render JSON UI specs as Svelte components, register your components in a registry and pass the structured element-tree spec through JsonUIProvider and Renderer to generate a live Svelte 5 component tree.

What is catalog-driven component definition in Svelte JSON rendering?▼

Catalog-driven component definition in Svelte JSON rendering uses a schema-powered catalog to define component props and validation, ensuring the structured element-tree specs remain predictable and structured.

Can I wire state management and event actions into a JSON UI spec for Svelte?▼

Yes, you can wire state management into a JSON UI spec by using state-bound props, visibility conditions, and event-to-action dispatch with built-in state actions to drive interactive Svelte UIs.

Do I need a Svelte renderer with a registry to convert JSON to UI components?▼

Yes, converting JSON UI specifications into Svelte component trees requires a Svelte renderer with a registry to support streamed specs, dynamic prop expressions, and action updates via contexts.

How does dynamic prop expression binding work in Svelte JSON UI rendering?▼

Dynamic prop expression binding in Svelte JSON UI rendering applies state-bound props and visibility conditions directly from the structured spec, updating the component tree via provided contexts.

What are the limitations of using JSON specs to build Svelte component trees?▼

Building Svelte component trees from JSON specs requires pre-registering all components in a schema-powered catalog and lacks support for environments without a Svelte renderer with a registry.