One application. Run it in the browser and Node.js.
Build components, state, routing, data and forms in one application. The browser mounts it, and Node.js imports the same application to render HTML for SSR.
See Valyrian.js in action
Create a component, connect a Pulse, and watch Valyrian.js update the part of the interface that depends on its state.
tsximport { mount } from "valyrian.js";
import { createPulse } from "valyrian.js/pulses";
const [count, setCount] = createPulse(0);
const Counter = () => (
<button
aria-label={`Increase count. Current count: ${count()}`}
onclick={() => setCount((current) => current + 1)}
>
Count:{" "}
<output aria-atomic="true" aria-live="polite">
{count()}
</output>
</button>
);
mount("#counter-demo", Counter);Learn Valyrian.js step by step
Build one Taskboard through seven stages. Start in the browser, then run the same application in Node.js for SSR, hydrate it in the browser and add offline and PWA support.
- 1. Local TSX projectStart the cumulative Taskboard path by creating and mounting the local TSX project used in every later stage.
- 2. InteractionContinue the Stage 1 project with PulseStore mutations, UI events, conditional details and a keyed task list.
- 3. RoutingContinue the interactive Taskboard with Tasks and About routes that retain the same store.
- 4. Async dataContinue the routed application by loading tasks with Request and rendering asynchronous states with Suspense.
- 5. FormContinue the loaded Tasks screen with FormStore validation and a Request submission to the Taskboard server.
- 6. SSR and hydrationImport the existing Taskboard application into Node.js, render it to HTML for each request and hydrate that same application in the browser.
- 7. Offline and PWAFinish the cumulative project with queued offline delivery, live queue state, install metadata and manual worker updates.
Explore Valyrian.js by capability
Add only the capabilities the application needs. Its components, routes and state logic remain reusable in the browser and Node.js.
Views and lifecycle
Build vnodes, mount an application and respond to lifecycle changes.
Routing
Resolve routes, redirect navigation and run route hooks.
Data and async work
Send requests, represent pending work and coordinate queries and mutations.
State and forms
Store values, run effects and validate form data.
Network, offline and PWA
Observe connectivity, retain queued operations and manage service worker registration.
Browser and Node.js
Import the browser application into Node.js, render it per request, isolate its server state and transform the resulting HTML.
Why Valyrian
See how the same Valyrian.js application runs in the browser and Node.js with shared components, routes, state and application modules. Start with the overview or follow the path for the framework you already use.
Valyrian.js for React developers
Map TSX, functional components and familiar state decisions to Valyrian.js components, Pulses and application modules.
Valyrian.js for Vue developers
Explore Valyrian.js through declarative directives, flexible component shapes and reactive state.
Valyrian.js for Svelte developers
Move from Svelte templates and reactive state to TSX, directives and runtime Pulses.
Valyrian.js for Solid developers
Connect familiar TSX, reactive reads and effects with Pulses and Valyrian.js application modules.
Build the next screen. Keep growing from there.
Follow the guided Taskboard or explore the runtime by capability.