Legend State

High performance state and local first sync

Legend State is an extremely fast signal-based state library with fine-grained reactivity and a powerful sync system that works with any backend.

Check out Legend Kit

const speed$ = observable(2)

// Observe it
const Component = observer(() => {
  // Get it
  const speed = speed$.get()

  // Set it
  const up = () => speed$.set(v => v % 10 + 1)

  return (<>
    {/* Two way bind it */}
    <Reactive.input $value={speed$} type="number" />

    <Button onClick={up}>{speed} is too slow 🤘</Button>
  </>)
})

Turn it up!

All in One

Legend-State is the fastest React state library, and it takes care of all of the hard sync and caching stuff for you.

📚 App State

Local and global

☁️ Remote State

Sync with any backend

💾 Persistence

Both web and mobile

😀 Great DX

Easy and intuitive

🚀 Fast

#1 in performance

⚡️ Fine-Grained

Reactivity

⚡️ 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.

Normal React

Legend-State

🦄 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())
})

// observer components re-render when observables change
const Component = observer(() => {
  const theme = theme$.get()

  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 = observer(() => {
  // get triggers fetch and updates on change
  const name = profile$.name.get()

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

  // Two-way bind to remote data
  return <Reactive.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

Persistence

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
}))

Coming Soon: Preorder now!

Legend Kit

Both an expertly crafted starter kit and an intelligent coding assistant, it's the perfect starting point to build great apps even faster.

One time purchase

50% discount

Lifetime access

📚 Tons of tools to get started quickly

High performance headless components, general purpose observables, transformer computeds, React hooks that don't re-render, and observable tools for popular frameworks.

Optimized Components

Tabs
Modals
Forms
Toasts
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 for pre-order at a discount for a limited time.

Releasing shortly 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. Preorder now to save $200 and accelerate Legend Kit's development.

$399

$199

Save $200 (50% off) with preorder!