Installation

Get started with QuantaJS by installing the appropriate package for your needs. QuantaJS is available as two separate packages to give you exactly what you need.

Prerequisites

  • Node.js (v14 or higher)
  • npm (v6 or higher), 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/react depends on @quantajs/core, so both packages will be installed when you install the React package.

@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