Valyrian.js for React developers

Keep TSX, functional components, and composition. Use straightforward components, Pulses, and named operations to trace every update from the event to the interface.

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

Start with familiar building blocks

Valyrian.js components receive props, compose children, return view structure and use stable keys to preserve identity across changing lists.

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

The automatic TSX runtime transforms the component tree into Valyrian.js vnodes and keeps key as structural data for the renderer.

Choose a component shape for each feature

Use functional components for concise composition. Use plain objects when state, behavior and view belong together. Use class instances when the feature benefits from instance-based structure.

const Counter = {
  count: 0,
  increment() {
    this.count += 1;
  },
  view() {
    return (
      <button onclick={() => this.increment()}>Count: {this.count}</button>
    );
  },
};

Choose state by the shape of the work

Use state held by an object or class component for self-contained interactions, createPulse for an independently reactive value and createPulseStore for a workflow with several fields and named operations.

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

const [count, setCount] = createPulse(0);

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

A Pulse subscribes the rendered subtree that reads it. It is a runtime value rather than a hook, so this example creates it outside the component.

Follow updates from interaction to interface

Valyrian.js delegates native events from the mounted root. A synchronous handler updates the view after it runs. A promise-returning handler triggers another update when the promise settles. Pulse subscriptions can update the relevant rendered subtree directly.

Build the application through focused modules

Carry the component tree across browser and server

SSR and hydration retain the concepts you already know. Valyrian.js renders HTML on the server, delivers it to the browser and makes the existing component tree interactive through its browser and Node runtimes.

Your next step

Build the cumulative Taskboard to use components, Pulses, routing, requests, forms, SSR, hydration, offline workflows and PWA behavior in one application.

Start the Taskboard · Explore the runtime guides