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.

Pulse Objects

Universal Proxy Reactivity pulse() creates deep reactive proxies that track property access and mutation automatically.

const state = pulse({ count: 0 });
state.count++; // It's reactive!

Semantic Guards

First-Class Conditions Guards serve as high-performance Selectors with built-in dependency tracking and failing context.

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

Logic Composition

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

const canLaunch = guard.all([
isReady,
isUserAuthorized,
guard.not(isMaintenance)
]);

Async & Race Control

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

const data = guard("fetch", async () => {
return (await fetch("/api")).json();
});

Explainable Logic

Deep Guard Inspection Get a structured tree of the current status, recursive dependency failures, and failure reason codes.

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

Isomorphic SSR

Astro & React Ready Evaluate guards on the server during SSR and have them seamlessly hydrate on the client.

Astro Native

SSR & Hydration Native Astro integration with zero-config setup via npx astro add.

React & Vue

Stability First Safe concurrent updates via usePulse hooks for all major UI frameworks.

TanStack Query

Remote State Bridge Bridge asynchronous remote state from TanStack Query into the Pulse reactive core.

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