const settings$ = observable({ ui: { theme: 'dark' }})

// Infinitely nested observables
const theme$ = settings$.ui.theme

// get returns the raw data
theme$.get() // 'dark'

// set sets
theme$.set('light')

// Computed observables with just a function
const isDark$ = observable(() =>
theme$.get() === 'dark'
)

// observe re-runs when observables change
observe(() => {
console.log(theme$.get())
})

// use$ r...

⚡️ Fine-grained reactivity in React

Achieve incredible performance by minimizing the number and size of renders. Legend State makes apps fast by default because they just do less work.

🦄 Incredibly easy to use

When you get() values while observing, it tracks them and re-runs when they change. No boilerplate, no selectors, no dependency arrays, just easy reactivity.

const settings$ = observable({ ui: { theme: 'dark' }})

// Infinitely nested observables
const theme$ = settings$.ui.theme

// get returns the raw data
theme$.get() // 'dark'

// set sets
theme$.set('light')

// Computed observables with just a function
const isDark$ = observable(() =>
theme$.get() === 'dark'
)

// observe re-runs when observables change
observe(() => {
console.log(theme$.get())
})

// use$ re-renders when observables change
const Component = () => {
const theme = use$(settings$.ui.theme)

return <div>{theme}</div>
})

Legend State

1.02

Jotai

1.41

MobX

1.49

Recoil

1.53

Redux

1.55

Zustand

1.69

Valtio

1.82

🚀 The fastest React state library

Legend-State is so fast that it even outperforms vanilla JS in some benchmarks. It’s extremely optimized with fine-grained reactivity and massively reduces re-rendering.

🤝 Local State = Remote State

Just get and set observables and they sync themselves with a powerful sync engine. Your UI code doesn’t need any querying, creating mutations, or synchronizing with local state.

You can even bind UI components directly to synced observables.

You don’t need any sync code in your components. You can just focus on making great apps.

const profile$ = observable(syncedFetch({
get: 'https://myurl/my-profile',
set: 'https://myurl/my-profile',
persist: {
plugin: ObservablePersistLocalStorage,
name: 'profile',
},
}))

const Component = () => {
// get triggers fetch and updates on change
const name = use$(profile$.name)

const onClick = () => {
// set sets the local state and syncs
profile$.name.set('Annyong')
}

// Two-way bind to remote data
return <$React.input $value={profile$.name} />
}

Local First with any backend

Use one of our ever-expanding library of sync plugins or build your own on top of the CRUD plugin or the basic synced plugin.

Backend

Keel

Supabase

Firebase

CRUD

TanStack Query

Fetch

Synced

Persistence

LocalStorage

IndexedDB

MMKV

AsyncStorage

const { mutations, queries } = client.api

const messages$ = observable(syncedKeel({
list: queries.listMessages,
create: mutations.createMessages,
update: mutations.updateMessages,
delete: mutations.deleteMessages,
// Persist locally
persist: {
plugin: ObservablePersistLocalStorage,
name: 'messages',
retrySync: true // Retry sync after reload
},
changesSince: 'last-sync' // Sync only diffs
}))

Legend Kit

Both an expertly crafted collection of tools and an intelligent coding assistant, it’s the perfect starting point to build great apps even faster.

One time purchase

Promotional launch pricing

Lifetime access

🛠️ A powerful CLI tool

The Legend Kit CLI makes it easy to enhance your projects with high-performance reactive components, observables, and hooks. Simply run a command and select what you need from our growing library of tools.

Simplified Integration

Install exactly what you need with a simple command. Our CLI handles dependencies, configurations, and setups so you can focus on building your app.

Fully Customizable

Each component, observable, and hook is added directly to your project so you can customize and extend them to fit your specific requirements.

Free & Premium Tools

Browse and install from our collection of both free and premium tools. Unlock more powerful features with your Legend Kit subscription.

Install it now

This will bootstrap and configure itself into your project, adding a “legend” script for easy access.

npx @legendapp/kit

📚 Tons of tools to get started quickly (Coming soon)

Legend Kit includes tons of high performance headless components, general purpose observables, transformer computeds, React hooks that don’t re-render, and observable tools for popular frameworks. The core packages are free and the more advanced ones are premium.

Integrations between Legend tools

• Legend State
• Legend List
• Legend Motion
• More...

Observable helpers

• currentDate
• createDraft
• stringAsNumber
• setAsString
• More...

React hooks

• useMeasure
• usePosition
• useScrolled
• useHover
• More...

Framework hooks

• useRoutes
• useRouteHistory
• useCanRender
• usePauseProvider
• More...

🧑‍💻 VS Code Extension

A contextually aware coding assistant to accelerate your development speed

Snippets

Easily add Legend-State features by hotkey

Smart Generation

Quickly generate full components

Auto Imports

Automatically adds imports as needed

Context-Aware Sidebar

Quick access to tools most useful in any moment

Linter

Detect and fix common issues like missing observer

Extensive Customization

Customize to your workflow and create your own snippets

🤗 Reactive Components for your favorite UI kit

Augment your UI kit with reactive props and two-way binding

NativeWind UI

Tailwind UI

shadcn

Gluestack

Tamagui

Mantine

Chakra UI

NextUI

PrimeReact

More...

👩‍🏫 Example projects

Full open-source apps built with Legend-State that you can use as a starting point or for reference for best practices.

JSON Viewer

Trellix Clone

Chat app

More...

Buy once, yours forever

Lifetime access to an ever-growing library of helpers, components, hooks, example projects, and reactive components.

Now available with promotional launch pricing for a limited time.

First version with CLI tools is available now, with more features coming soon after Legend-State 3.0.

Legend Kit

Get lifetime access to everything in Legend Kit for a single one-time purchase, including all future updates. Get started now to save $200 and accelerate Legend Kit’s development.

$399

$199

Save $200 (50% off) with promotional pricing!