Charm

Atomic state management for Roblox.
npm package →

Charm is an atomic state management library inspired by Jotai. Designed to be a unique alternative to 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

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, 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

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.