Interactive Examples

Try it before the API

Click a button, add a task, or change a preference and the interface updates immediately. These examples run the actual @zhuangtai-js/core, @zhuangtai-js/react, and @zhuangtai-js/persist packages, so the behavior matches real application code.

REAL REACT EXAMPLES

See state updates live

Live examples powered by @zhuangtai-js/react. Interact with each one and inspect its code.

CounterTask listPreferences

Live preview

Counter

One atom stores the count while computed derives the doubled value.

atom + computed

Current

3

Doubled

6

−Reset+

Implementation

import { atom, computed } from "@zhuangtai-js/core";
import { useAtom, useAtomValue } from "@zhuangtai-js/react";

const count = atom(3);
const doubled = computed(() => count.get() * 2);

function CounterValue() {
  const value = useAtomValue(count);
  const doubledValue = useAtomValue(doubled);
  return <output>{value} · doubled {doubledValue}</output>;
}

function CounterControls() {
  const [, setCount] = useAtom(count);
  return (
    <div>
      <button onClick={() => setCount((value) => value - 1)}>−</button>
      <button onClick={() => setCount(0)}>Reset</button>
      <button onClick={() => setCount((value) => value + 1)}>+</button>
    </div>
  );
}

Example takeaways

• State can live outside components: multiple components can read one atom without an extra Provider.
• React integration stays familiar: useAtom feels like useState, while the atom stays outside the component.
• Derived values need no dependency array: computed tracks the atoms read by the current evaluation.
• Objects and arrays use immutable updates: the task list creates new arrays and objects when it changes.
• Capabilities compose on demand: only the preferences example adds persist, while Core stays lightweight.

Start with React

pnpm add @zhuangtai-js/core @zhuangtai-js/react

import { atom } from "@zhuangtai-js/core";
import { useAtom } from "@zhuangtai-js/react";

const count = atom(0);

export function Counter() {
  const [value, setValue] = useAtom(count);
  return <button onClick={() => setValue((n) => n + 1)}>{value}</button>;
}

Continue with the React guide or open the complete examples.