Charm
Atomic state management for Roblox.
npm package →
[](https://www.npmjs.com/package/@rbxts/charm)
[](LICENSE.md)
**Charm** is a Roblox state management library, inspired by [Jotai](https://jotai.org). Designed to be an alternative to [Reflex](https://littensy.github.io/reflex), Charm aims to bring an atomic and composable approach to your game's state.
> [!NOTE]
> Charm is incomplete and not ready for use.
## 📦 Setup
### TypeScript
Install Charm through your package manager of choice. \
[React](https://github.com/littensy/rbxts-react) is optional, but highly recommended.
```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)`
#### `effect(callback)`
#### `subscribe(atom, listener)`
#### `derive(atom, equals?)`
#### `observe(atom, observer)`
#### `map(atom, mapper)`
#### `unwrap(atom)`
### React
#### `useAtom(atom, selector?)`
#### `useAtomState(atom)`
#### `useSetAtom(atom)`
### 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)