Introduction to QuantaJS

Imagine a world where state management in JavaScript feels like a breeze — intuitive, lightweight, and endlessly scalable. Welcome to QuantaJS, the state management library that's here to transform how you build applications. Whether you're crafting a quick prototype or architecting a sprawling enterprise app, QuantaJS delivers a reactivity system so elegant, you'll wonder how you ever lived without it.

The Story Behind QuantaJS

QuantaJS was born from a simple yet powerful realization: the reactivity system that makes Vue.js and Pinia so delightful shouldn't be confined to just the Vue ecosystem. We wanted to bring that same intuitive, performant state management experience to the broader JavaScript world.

If you've ever worked with Pinia, you'll immediately feel at home with QuantaJS. The familiar patterns — stores with state, getters, and actions — are all there, but now they work anywhere JavaScript runs. Whether you're building a React app, a vanilla JavaScript project, or exploring other frameworks, you can enjoy the same reactive magic that makes Vue development so enjoyable.

The goal was simple: take the best parts of modern state management (reactive state, computed values, automatic dependency tracking) and make them accessible to everyone, regardless of their framework choice. We started with React integration because it's where many developers spend their time, but the vision extends far beyond that.

Why QuantaJS Will Steal Your Heart

• Freedom Unleashed: Works anywhere JavaScript does — vanilla, React, Vue, or beyond. No framework? No problem.
• Reactivity Redefined: Say goodbye to clunky boilerplate. Our reactive magic tracks changes effortlessly, from simple counters to complex nested maps.
• Scales Like a Dream: Tiny scripts or massive systems — QuantaJS grows with you, never weighing you down.
• Side Effects, Sorted: Async actions feel natural, not forced. Fetch data, update state, and watch it flow.
• API That Clicks: Learn it in minutes, master it in hours — coding with QuantaJS feels like second nature.
• React Optimized: Built-in React integration with hooks and components for seamless React development.
• DevTools Included: Powerful debugging tools with real-time store inspection, action logging, and persistence management.

QuantaJS combines simplicity with power, offering a lightweight alternative to traditional state management libraries. Whether you're building a small prototype or a large-scale app, QuantaJS adapts to your needs without unnecessary complexity.

Package Architecture

QuantaJS is designed as a modular ecosystem of focused packages, so you install only what you need:

@quantajs/core

The framework-agnostic reactivity engine. Includes stores, reactive state, computed values, watchers, and persistence — everything needed for state management in any JavaScript environment.

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

@quantajs/react

React bindings built on useSyncExternalStore for concurrent-safe, automatic re-renders. Provides hooks like useStore, useQuantaStore, and useCreateStore, plus the QuantaProvider component.

import { useQuantaStore, QuantaProvider, useStore } from '@quantajs/react';

@quantajs/devtools

A framework-agnostic developer overlay (built with Preact + Shadow DOM) for real-time store inspection, action history, and persistence debugging.

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

What Makes QuantaJS Different

QuantaJS isn't just another library — it's a rebellion against bloated, overcomplicated state management. Born from a desire to simplify without sacrificing power, it's your companion for building smarter, faster, and cleaner code. The modular package architecture means you get exactly what you need — core functionality for any environment, React-specific features when building React applications, and powerful DevTools for debugging and development.

A Taste of the Magic

Here's a sneak peek at what QuantaJS can do:

Core Usage

import { createStore } from '@quantajs/core';

const counter = createStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++; } },
});

counter.increment(); // Boom! State updates, reactivity kicks in.
console.log(counter.count); // 1 — simple, yet powerful.

React Integration

import { createStore, QuantaProvider, useStore } from '@quantajs/react';

const counterStore = createStore('counter', {
  state: () => ({ count: 0 }),
  actions: { increment() { this.count++; } },
});

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

function App() {
  return (
    <QuantaProvider stores={{ counter: counterStore }}>
      <Counter />
    </QuantaProvider>
  );
}

Get Started

Ready to dive in? Check out the Installation guide or explore the Quick Start to see QuantaJS in action!

Support

If you like QuantaJS, give it a ⭐ on GitHub or contribute by submitting issues and pull requests!