Ecosystem

Every package is MIT-licensed, independently versioned, and has zero third-party dependencies. Install only what you need.

@everystate/view 1.1.1

DOM structure as first-class state. Describe your view tree as a plain object in the store, then project it to the real DOM with surgical updates.

npm install @everystate/view @everystate/core

How it works

1. Resolve - a DOMless pass that transforms your view-state into a normalized virtual tree. No DOM touching, pure computation.
2. Project - diffs the resolved tree against the current DOM and applies only the minimal changes needed.

import { createEveryState } from '@everystate/core';
import { createApp } from '@everystate/view/app';

const store = createEveryState({});

// Define your view as state
store.set('view.root', {
  tag: 'div',
  children: [
    { tag: 'h1', text: 'Hello' },
    { tag: 'p', text: 'World' },
  ]
});

// Mount and project
const app = createApp(store, document.getElementById('app'));

View nodes support: tag, text, children, attrs, style, events, and text interpolation with {store.path} syntax.

npm · GitHub

@everystate/renderer 1.0.3

Direct-binding reactive renderer. Write HTML with bind-*, set, and each attributes - the renderer connects them to your store. Zero build step.

npm install @everystate/renderer @everystate/core

<div id="app">
  <h1 bind-text="user.name"></h1>
  <input bind-value="user.name" set="user.name" />
  <ul each="tasks" as="task">
    <li bind-text="task.text"></li>
  </ul>
</div>

<script type="module">
  import { createEveryState } from '@everystate/core';
  import { mount } from '@everystate/renderer';

  const store = createEveryState({
    user: { name: 'Alice' },
    tasks: [{ text: 'Buy milk' }, { text: 'Walk dog' }]
  });

  mount(store, document.getElementById('app'));
</script>

npm · GitHub

@everystate/router 1.0.6

SPA routing as state. Routes, params, query strings, and navigation history live in your EveryState store at ui.route.*.

npm install @everystate/router @everystate/core

import { createEveryState } from '@everystate/core';
import { createRouter } from '@everystate/router';

const store = createEveryState({});

const router = createRouter(store, {
  routes: [
    { path: '/', view: 'home' },
    { path: '/about', view: 'about' },
    { path: '/user/:id', view: 'userProfile' },
  ]
});

// Read the current route from state
store.subscribe('ui.route.*', ({ path, value }) => {
  console.log('Route changed:', store.get('ui.route.view'));
});

// Navigate via state
store.set('intent.navigate', '/about');

Route params are available at ui.route.params, query strings at ui.route.query. The router syncs with history.pushState automatically.

npm · GitHub

@everystate/perf 1.0.4

Non-invasive performance monitoring for EveryState stores. Method wrapping, path heatmaps, timeline recording, and a browser overlay.

npm install @everystate/perf @everystate/core

import { createEveryState } from '@everystate/core';
import { createPerfMonitor } from '@everystate/perf';

const store = createEveryState({ count: 0 });
const perf = createPerfMonitor(store);

// perf.showOverlay(); // browser overlay with live metrics
// perf.getHeatmap();  // which paths are set/read most
// perf.getTimeline(); // chronological event log

Uses the prepend pattern: wraps store methods without modifying them. Remove the import and your app runs exactly the same.

npm · GitHub

@everystate/test 1.0.4

Event-sequence testing library for EveryState stores. Trigger state changes and assert values, types, shapes, and event firings. Zero dependency.

npm install @everystate/test @everystate/core

import { createEventTest, runTests } from '@everystate/test';

const results = runTests({
  'adding a task increments count': () => {
    const t = createEventTest({ state: { tasks: [], taskCount: 0 } });
    t.trigger('state.tasks', [{ id: 1, text: 'test' }]);
    t.trigger('state.taskCount', 1);
    t.assertPath('state.taskCount', 1);
    t.assertType('state.taskCount', 'number');
    t.assertEventFired('state.taskCount', 1);
  },

  'user shape is correct': () => {
    const t = createEventTest({ user: { name: 'Alice', age: 30 } });
    t.assertShape('user', { name: 'string', age: 'number' });
  },
});

if (results.failed > 0) process.exit(1);

Assertion API

npm · GitHub

@everystate/aliases 1.0.3

Ergonomic single-character and short-name DOM aliases for vanilla JavaScript. Write less boilerplate when working with the DOM directly.

npm install @everystate/aliases

import { $, $$, el, on, attr } from '@everystate/aliases';

// $ = document.querySelector
const btn = $('#submit');

// $$ = document.querySelectorAll
const items = $$('.list-item');

// el = document.createElement
const div = el('div');

// on = addEventListener shorthand
on(btn, 'click', () => console.log('clicked'));

// attr = set/get attributes
attr(div, 'data-active', 'true');

npm · GitHub

@everystate/types 1.0.3

Typed dot-path autocomplete for EveryState stores via recursive TypeScript template-literal types. Get store.get('user.profile.name') autocomplete in your IDE.

npm install @everystate/types

import type { DotPaths } from '@everystate/types';

interface AppState {
  user: { name: string; profile: { avatar: string } };
  tasks: { id: number; text: string }[];
}

type Paths = DotPaths<AppState>;
// "user" | "user.name" | "user.profile" | "user.profile.avatar" | "tasks" | ...

npm · GitHub

@everystate/examples 1.0.0

Working examples: counters, dashboards, async patterns, data tables, theme switching. Each example is a standalone HTML file - no build step needed.

npm install @everystate/examples

Includes examples for:

• Counter with reactive CSS
• Data table with sorting, filtering, pagination, and light/dark theme toggle
• Async data fetching patterns
• State-driven view composition

npm · GitHub