Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/reatom/reatom/llms.txt

Use this file to discover all available pages before exploring further.

​
Welcome to Reatom

Reatom is the ultimate logic and state manager for small widgets and huge SPAs. A powerful reactive state management library designed to become your go-to resource for building anything from tiny libraries to full-blown applications.

Quick Start

Get up and running with a counter example in minutes

Installation

Install Reatom with npm, yarn, or pnpm

Core Concepts

Learn about atoms, computed, actions, and effects

Framework Integrations

Use Reatom with React, Vue, Solid, and more

​
Why Reatom?

Reatom provides a simple yet powerful approach to state management with explicit reactivity and excellent developer experience.

​
Key Features

Simple Abstractions

Only a few core primitives: atom and computed, action and effect. All other features work on top of that.

Explicit Reactivity

Direct, predictable state management with atomization patterns for maximum performance. No proxies needed.

Perfect Effects Management

Advanced async handling with caching, retrying, and automatic cancellation using native await and AbortController.

Excellent Debugging

Built-in logging and immutable cause tracking for complex async flows.

Composable Extensions

Enhance atoms and actions with ready-made solutions for async operations, persistence, caching, and more.

Framework-Agnostic

Adapters for React, Vue, Preact, Solid, Lit, and many more frameworks and libraries.

Smallest Bundle

Just 2 KB gzipped for the core package.

TypeScript First

Top type inference with excellent type safety throughout the library.

​
Quick Example

Here’s a simple counter example to give you a taste of Reatom: 
import { atom, computed } from '@reatom/core'
import { reatomComponent } from '@reatom/react'

const counter = atom(0)
const isEven = computed(() => counter() % 2 === 0)

const Counter = reatomComponent(() => (
  <section>
    <p>
      {counter()} is {isEven() ? 'even' : 'odd'}
    </p>
    <button onClick={() => counter.set(v => v + 1)}>Increment</button>
  </section>
))
The coolest thing about reatomComponent is that you can use reactive states (atoms) in any order without the rules of hooks!

​
What’s Next?

Installation

Set up Reatom in your project

Quick Start

Build your first counter app

Core Concepts

Deep dive into atoms and computed

​
Community

Join our growing community:
Good primitive is more than a framework