Svelte Renderer

[zahlekhan]

Is your feature request related to a problem? Please describe.
OpenUI is currently React-only. Developers building Svelte or SvelteKit applications cannot use OpenUI's streaming renderer to progressively render OpenUI Lang output. This excludes the growing Svelte ecosystem from adopting OpenUI for generative UI.

Describe the solution you'd like
Create a new @openuidev/svelte-lang package that provides the core OpenUI Lang renderer for Svelte. This includes:

1. Svelte renderer — A Svelte equivalent of the React Renderer component that can parse OpenUI Lang streams and progressively render registered Svelte components as tokens arrive.
2. Component definition API — A Svelte-idiomatic way to define and register components (equivalent to defineComponent and createLibrary in react-lang), leveraging Svelte stores and reactivity where appropriate.
3. Prompt generation — Reuse or adapt the existing prompt generation logic so Svelte component libraries can generate system prompts the same way React ones do.
4. Streaming parser — Reuse the core parser (createParser, createStreamingParser) from react-lang since parsing is framework-agnostic, and only implement the Svelte rendering layer on top.
5. Example app — A standalone SvelteKit example app in examples/ (e.g., examples/svelte-chat) demonstrating the Svelte renderer with streaming OpenUI Lang output, similar in scope to examples/openui-chat.

Describe alternatives you've considered

• Embedding React inside Svelte via wrapper libraries, but this defeats the purpose of using Svelte and adds significant overhead.
• A Web Components-based renderer that could work in any framework, but this would lose Svelte-specific features like fine-grained reactivity, stores, and transitions.

Additional context
The core parser logic in packages/react-lang is largely framework-agnostic — the framework-specific part is the rendering layer. The Svelte package should reuse as much of the parsing and prompt generation logic as possible, only implementing Svelte-specific rendering and component registration. Svelte 5 with runes should be the target version.

[zahlekhan]

/bounty $100

[AbhinRustagi]

@zahlekhan The current implementation is tightly coupled to React. We can benefit from extracting the framework-agnostic parts (parser, prompt generation, validation, schema definitions) into @openuidev/lang-core, then having each framework package import from it.

Proposed structure:

• @openuidev/lang-core: parser, prompt generation, validation, component schema types
• @openuidev/component-schemas: shared Zod schemas for built-in components (no renderers)
• @openuidev/react-lang: updated to import from core (public API unchanged)
• @openuidev/svelte-lang, @openuidev/vue-lang: framework-specific renderers on top of the shared core

Prompt generation only needs schemas, not renderers, so we can share the schema layer. Each framework then implements its own renderer over the universal component node that the parser produces.

This can be an internal architecture shift. The react-lang public API remains unchanged since it re-exports from lang-core.

[chengyixu]

Hi, I'd like to work on the Svelte renderer implementation.

Background: I'm a full-stack JS/TS developer with experience building framework-agnostic parsers and renderer abstractions. I've published multiple npm packages (websnap-reader, ghbounty, devpitch, pricemon, repo-readme-gen) and have hands-on experience with both Svelte 5 runes and React component systems.

Implementation Plan:

1. @openuidev/svelte-lang package scaffolding — Set up the package with Svelte 5 + TypeScript, reusing the existing parser from react-lang (framework-agnostic)

2. Component Definition API — Implement defineComponent() and createLibrary() equivalents using Svelte stores and $state/$derived runes for reactivity

3. Streaming Renderer — Build the <OpenUIRenderer> Svelte component that:

   • Accepts a stream of OpenUI Lang tokens
   • Progressively renders registered Svelte components
   • Uses Svelte's {#each} blocks and keyed updates for efficient incremental rendering

4. Prompt Generation — Adapt the existing prompt generation logic to work with Svelte component metadata

5. SvelteKit Example App — Create examples/svelte-chat with streaming demo

Timeline: 5-7 days for full implementation + tests + example app.

GitHub: @chengyixu