Charm

Atomic state management for Roblox.
npm package →

Charm is a Roblox state management library, inspired by Jotai. Designed to be an alternative to 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 is optional, but highly recommended.

npm install @rbxts/charm
yarn add @rbxts/charm
pnpm add @rbxts/charm

Wally

Add littensy/charm to your wally.toml file.

[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

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

import React from "@rbxts/react";
import { useAtom } from "@rbxts/charm";
import { counterAtom } from "./counter-atom";

function Counter() {
	const [count, setCount] = useAtom(counterAtom);

	return (
		<textlabel
			Text={`Count: ${count}`}
			Size={new UDim2(0, 100, 0, 50)}
			Event={{
				Activated: () => setCount(count + 1),
			}}
		/>
	);
}

---

Charm is released under the MIT License.