Table of contents
Valyrian.js for Svelte developers
Keep declarative clarity as you bring components, reactive state, SSR, and hydration into an application model that remains visible in JavaScript and TSX.
Build your first Valyrian.js view · Explore the runtime guides
Move from Svelte templates to TSX
Valyrian.js represents these relationships with TSX and focused directives, keeping structure and behavior in the same JavaScript or TypeScript flow.
| What you want to express | Svelte | Valyrian.js |
|---|---|---|
| Conditional structure | {#if} | v-if |
| Repeated structure | {#each} | v-for |
| Stable list identity | Keyed each block | key |
| Bound form value | bind:value | v-model |
| Conditional classes | class: | v-class |
| Raw trusted HTML | {@html} | v-html |
tsxconst TaskList = ({ tasks }) => (
<ul v-for={tasks}>{(task) => <li key={task.id}>{task.title}</li>}</ul>
);Build components as regular program values
Valyrian.js components can be functions, plain objects or class instances. Props arrive as arguments, children compose naturally and TSX returns the view structure.
Use a function for concise composition, a plain object when state and view form one feature or a class when instance-based structure fits the domain.
Choose how each state change reaches the view
Direct state fits an interaction whose update path already belongs with its component. Use createPulse when a value should establish reactive subscriptions wherever rendering or an effect reads it.
tsximport { createPulse } from "valyrian.js/pulses";
const [count, setCount] = createPulse(0);
const Counter = () => (
<button onclick={() => setCount((current) => current + 1)}>
Count: {count()}
</button>
);Svelte runes are part of Svelte’s compiler model. Pulses are runtime values imported from Valyrian.js, so this example creates the Pulse outside the component.
Turn related state changes into complete operations
createPulseStore keeps shared state and named operations together. A method can coordinate several mutations, await asynchronous work and publish an intermediate state with $flush().
Give asynchronous interfaces a clear structure
Use Query for cached asynchronous data, Suspense for pending UI and PulseStore for workflows whose intermediate and completed states belong to one operation.
Grow beyond the first component
| Application responsibility | Valyrian.js starting point |
|---|---|
| Declarative view behavior | Directives |
| Reactive values and effects | createPulse and createEffect |
| Shared state and operations | createPulseStore |
| Navigation | Router |
| Requests and cached data | Request and Query |
| Forms and validation | v-model and FormStore |
| Offline and PWA behavior | Offline queue and SW runtime |
Carry the same application across browser and server
SSR and hydration keep the established flow. Valyrian.js renders the component tree to HTML on the server, delivers it to the browser and continues from the existing DOM as an interactive application.
Your next step
Build the Taskboard to see how TSX, Pulses and application modules work together from the first interaction through SSR and offline support.