Installation

QuantaJS is a framework-free core with official bindings for React, Vue, Svelte and Lit, and an Astro integration. Install the core, then what your framework needs, if anything.

Prerequisites

  • Node.js 20 or later for server rendering and tooling (tested on 20, 22 and 24)
  • npm, yarn or pnpm

Package Options

@quantajs/core

For framework-agnostic state management in any JavaScript environment.

npm install @quantajs/core
# or
yarn add @quantajs/core
# or
pnpm add @quantajs/core

@quantajs/react

For React applications with built-in hooks and components.

npm install @quantajs/react @quantajs/core
# or
yarn add @quantajs/react @quantajs/core
# or
pnpm add @quantajs/react @quantajs/core

@quantajs/vue

For Vue 3.3 and later, including Nuxt. See Vue Integration.

npm install @quantajs/vue @quantajs/core
# or
yarn add @quantajs/vue @quantajs/core
# or
pnpm add @quantajs/vue @quantajs/core

@quantajs/svelte

For Svelte 4 and 5, including SvelteKit. See Svelte Integration.

npm install @quantajs/svelte @quantajs/core
# or
yarn add @quantajs/svelte @quantajs/core
# or
pnpm add @quantajs/svelte @quantajs/core

@quantajs/lit

For Lit 2 and 3 web components, through reactive controllers. See Lit Integration.

npm install @quantajs/lit @quantajs/core
# or
yarn add @quantajs/lit @quantajs/core
# or
pnpm add @quantajs/lit @quantajs/core

@quantajs/astro

For Astro 7: one store shared by React, Vue and Svelte islands, with a container per request. Add the bindings your islands use as well. See Astro Integration.

npm install @quantajs/astro @quantajs/core
# or
yarn add @quantajs/astro @quantajs/core
# or
pnpm add @quantajs/astro @quantajs/core

Each binding depends on @quantajs/core. Install both anyway, so your app imports defineStore from a direct dependency, and keep all QuantaJS packages on the same version: they are released together.

@quantajs/devtools

Developer tools for debugging and inspecting stores in real-time. Works with any framework.

npm install @quantajs/devtools @quantajs/core
# or
yarn add @quantajs/devtools @quantajs/core
# or
pnpm add @quantajs/devtools @quantajs/core

Install it as a dev dependency. As of 2.1 it is an optional peer of @quantajs/react, loaded through a dynamic import, and the DevTools bridge collects nothing until you call enableDevTools().

Usage Examples

Core Package

import { defineStore, reactive, computed, watch } from '@quantajs/core';

// Define a store — a blueprint, safe at module scope
export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: { doubled: (s) => s.count * 2 },
  actions: { increment() { this.count++; } },
});

// Resolve it when you need the instance
const counter = useCounterStore();
counter.increment();

React Package

import { useQuanta } from '@quantajs/react';
import { useCounterStore } from './stores/counter';

function Counter() {
  const counter = useQuanta(useCounterStore);
  return (
    <div>
      <p>Count: {counter.count}</p>
      <button onClick={() => counter.increment()}>Increment</button>
    </div>
  );
}

No provider is required in a client-only app. Add <QuantaProvider> when you need to control the store container's lifetime — mostly under SSR.

DevTools Setup

DevTools is opt-in as of 2.1: nothing is collected and nothing is attached to window until you enable it.

import { enableDevTools } from '@quantajs/core';
import { mountDevTools } from '@quantajs/devtools';

if (process.env.NODE_ENV === 'development') {
  enableDevTools();   // the bridge — collects the data
  mountDevTools();    // the UI — renders the panel
}

For React applications, use the QuantaDevTools component in place of mountDevTools:

import { enableDevTools } from '@quantajs/react';
import { QuantaDevTools } from '@quantajs/react/devtools';

if (process.env.NODE_ENV === 'development') {
  enableDevTools();
}

function App() {
  return (
    <>
      <YourApp />
      <QuantaDevTools />
    </>
  );
}

See the DevTools Guide for more information.

Next Steps

Spot something that needs improving?

Edit page