Charm
Atomic state management for Roblox.
npm package →
[](https://www.npmjs.com/package/@rbxts/charm)
[](LICENSE.md)
**Charm** is an atomic state management library inspired by [Jotai](https://jotai.org). Designed to be a unique alternative to [Reflex](https://littensy.github.io/reflex), Charm aims to provide a simple and composable interface for your game's state.
> [!NOTE]
> Charm is incomplete and not ready for production use.
## 📦 Setup
### TypeScript
```sh
npm install @rbxts/charm
yarn add @rbxts/charm
pnpm add @rbxts/charm
```
### Wally
Add `littensy/charm` to your `wally.toml` file.
```toml
[dependencies]
Charm = "littensy/charm@VERSION"
```
## 📚 API Reference
### Charm
#### `atom(state, options?)`
#### `effect(callback)`
#### `subscribe(atom, listener)`
#### `computed(atom, options?)`
#### `observe(atom, observer)`
#### `mapped(atom, mapper)`
#### `peek(atom)`
### React
#### `useAtom(atom, dependencies?)`
### Sync
#### `sync.client(options)`
#### `Client.sync(payload)`
#### `sync.server(options)`
#### `Server.connect(callback)`
#### `Server.hydrate(player)`
## 🚀 Examples
### Counter atom
```ts
import { atom, subscribe } from "@rbxts/charm";
const counterAtom = atom(0);
const doubleCounterAtom = () => counterAtom() * 2;
subscribe(doubleCounterAtom, (value) => {
print(value);
});
counterAtom(1);
counterAtom((count) => count + 1);
```
### Counter component
```tsx
import React from "@rbxts/react";
import { useAtom } from "@rbxts/charm";
import { counterAtom } from "./counter-atom";
function Counter() {
const [count, setCount] = useAtom(counterAtom);
return (
setCount(count + 1),
}}
/>
);
}
```
---
Charm is released under the MIT License.
[](LICENSE.md)