Valyrian.js for Vue developers

Keep the declarative UI you know and express components, directives, and reactive state through JavaScript, TypeScript, and TSX, with a flow that remains visible from interaction to rendering.

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

Express the interface declaratively

Valyrian.js provides directives for common relationships between state and rendered structure.

• v-if controls whether a vnode is rendered.
• v-show controls visibility while preserving the mounted node.
• v-for renders an iterable through a callback child.
• v-model connects form controls to state.
• v-class derives classes from strings, arrays or objects.
• v-text assigns text content.
• v-html creates an explicit trusted HTML boundary.

const TaskList = ({ tasks }) => (
  <ul v-for={tasks}>{(task) => <li key={task.id}>{task.title}</li>}</ul>
);

Build components in the shape that fits

Use functions for concise composition, plain objects to keep state and behavior with the view or class instances for instance-based features. Components remain regular JavaScript or TypeScript values composed through TSX.

Choose the reactive model for each feature

Use direct component state for local interactions. Use createPulse when a rendered value should update its subscribers. Use createPulseStore when several fields and named operations belong to the same workflow.

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

const [filter, setFilter] = createPulse("all");
const Filter = () => (
  <select value={filter()} onchange={(event) => setFilter(event.target.value)}>
    <option value="all">All</option>
    <option value="active">Active</option>
  </select>
);

Pulse subscriptions are created by reads during rendering or effects, which keeps each reactive relationship close to the code that uses it.

Coordinate complete workflows with PulseStore

PulseStore groups state with named synchronous or asynchronous operations. Each operation works with mutable working state and publishes its committed result to subscribers. $flush() can publish an intermediate state while asynchronous work continues.

Follow native events through the update cycle

Valyrian.js delegates native events from the mounted root. Synchronous state changes appear after the handler runs. Promise-returning handlers update again when the asynchronous work settles.

Build the application through focused modules

Carry the experience across browser and server

SSR and hydration produce HTML on the server and continue with an interactive application in the browser. Valyrian.js carries its component tree, Router and data flows through that lifecycle.

Your next step

Build the Taskboard to apply directives, Pulses, routing, data, forms and SSR within one evolving application.

Start the Taskboard · Explore the runtime guides