Valyrian.js for Solid developers

Keep TSX and fine-grained reactivity while discovering how Valyrian.js connects reactive values, state operations, effects, and application modules.

Build your first Valyrian.js component · Explore the runtime guides

Start in familiar TSX

Valyrian.js components receive props, compose children and return declarative view structure through TSX.

const Welcome = ({ name }, children) => (
  <main>
    <h1>Welcome, {name}</h1>
    <section>{children}</section>
  </main>
);

Valyrian.js turns the returned structure into vnodes and patches the DOM as state changes.

Discover a different reactive model

Pulses share reactivity with Signals, but they are a distinct Valyrian.js concept rather than an equivalent API. A Pulse can represent a reactive value on its own.

Within PulseStore, Pulses also participate in named state operations that can bring together responsibilities comparable to a mutation, an action and a producer.

import { createPulse } from "valyrian.js/pulses";

const [count, setCount] = createPulse(0);
const Counter = () => (
  <button onclick={() => setCount((current) => current + 1)}>
    Count: {count()}
  </button>
);

Reading count() during rendering subscribes that rendered subtree. Writing a changed value notifies its subscribers.

Track effects through the values they read

Valyrian.js effects subscribe while they execute. Each run records the Pulses and PulseStore properties it reads. The returned disposer removes those subscriptions.

import { createEffect, createPulse } from "valyrian.js/pulses";

const [query] = createPulse("");
const dispose = createEffect(() => console.log(query()));

Use reactivity where it strengthens the feature

Valyrian.js also supports direct state. A delegated event handler can mutate the state that a view reads, and the runtime refreshes the interface after the handler completes.

Use state held by an object or class component for self-contained interactions, a Pulse for an independently reactive value and PulseStore when state and named operations belong to the same application workflow.

Coordinate complete transitions with PulseStore

PulseStore groups a shared state object with named synchronous or asynchronous operations. Each operation receives mutable working state. $flush() can publish an intermediate state while asynchronous work continues.

Express control flow where it applies

Stable key values preserve renderer identity, and v-keep can preserve an unchanged subtree.

Build the rest of the application in the same runtime

Router, Request, Query, Suspense, FormStore, the offline queue and the service worker runtime extend the same component and update model.

Carry the component tree across browser and server

SSR and hydration render HTML on the server, deliver it to the browser and make the existing interface interactive. Valyrian.js uses the same component model through its browser and Node runtimes.

Your next step

Build the Taskboard to apply Pulses, effects, routing, data and SSR within one Valyrian.js application.

Start the Taskboard · Explore the runtime guides