Skip to content

Pulse-JS

Separate reactive data from business conditions with a declarative, composable, and observable approach.

Pulse differs from traditional signals or state managers by treating Conditions as first-class citizens. Instead of embedding complex boolean logic inside components, you define Semantic Guards that can be observed, composed, and debugged independently.

Sources

Refined Data Containers Sources hold your application’s primitive state. They notify dependents when values change.

const user = source({ name: "Alice", id: 1 });
user.set({ name: "Bob", id: 1 });

Semantic Guards

First-Class Conditions Guards represent business rules. They track their own status (ok, fail, pending) and reason.

const isAdmin = guard("is-admin", () => {
if (user().role !== "admin") return false;
return true;
});

Computed Values

Pure Transformations Derive new data from sources or other guards with memoization.

const fullName = compute("full-name", [user], (u) => {
return `${u.first} ${u.last}`;
});

Logic Composition

Declarative Combinators Combine guards using built-in logical helpers like all, any, and not.

const canLaunch = guard.all([
isSystemReady,
isUserAuthorized,
guard.not(isMaintenanceMode)
]);

Async & Race Control

Native Async Support Guards handle promises natively. Pulse implements internal versioning to automatically cancel stale evaluations, preventing race conditions.

const isServerOnline = guard("check-server", async () => {
const res = await fetch("/health");
if (!res.ok) throw "Server unreachable";
return true;
});

Explainable Logic

Structured Debugging Call .explain() to get a structured tree of the current status, failure reasons, and dependencies.

const explanation = canCheckout.explain();
// { status: 'fail', reason: 'auth failed', ... }

Server-Side Rendering

Isomorphic Design Use evaluate() on the server to serialize state and hydrate() on the client to resume seamlessly.

React Integration

Concurrent Mode Compatible @pulse-js/react uses useSyncExternalStore for safe concurrent updates.

const { status, reason } = usePulse(isAdmin);

Vue & Svelte

Multi-Framework Support First-class adapters available for other major frameworks.

import { usePulse } from '@pulse-js/vue';
import { usePulse } from '@pulse-js/svelte';

Pulse Tools

Framework Agnostic Inspector Visualize dependency graphs, edit sources, and inspect logical failures in real-time.

React (Auto)

import '@pulse-js/react/devtools';

React (Manual Config)

import { PulseDevTools } from '@pulse-js/react/devtools';
<PulseDevTools shortcut="Ctrl+J" />

Vanilla JS (Web Component)

<pulse-inspector shortcut="Ctrl+J"></pulse-inspector>
Pulse DevTools Interface