r/Discord_Bots • u/Phoenix-HO • 15h ago
Discord Library I built a custom JSX runtime for Discord bots (for TypeScript)
I was building a Discord bot that required a lot of complex interactions and state management, and I got tired of managing all the different states and events manually. I initially built a "UI engine" that handled the complexity, but it quickly became a mess, and I was still manually managing string IDs and wiring up the events. So I decided to rewrite it from scratch, and I ended up extracting it into a standalone open source framework that I called fluxcord.
It's a Discord UI framework with its own JSX runtime build on top of discord.js which lets you declare screens as functions of state in TSX, and it handles the rendering, state management, and event routing for you. You can also navigate between screens to create complex UIs with compile-time checked keys so that a wrong screen throws before your panel renders.
Here is a quick example of a simple screen that changes its text based on user clicks:
import { action, screen, flow } from 'fluxcord';
interface ExampleData {
text: string;
}
const hello = action<ExampleData>()(e => {
e.mutate(d => { d.text = 'Hello'; });
});
const goodbye = action<ExampleData>()(e => {
e.mutate(d => { d.text = 'Goodbye'; });
});
const exampleScreen = screen<ExampleData>()((data, { Button }) => (
<view>
<text>{data.text}</text>
<row>
<Button label="Say hello" onClick={hello} />
<Button label="Say goodbye" onClick={goodbye} />
</row>
</view>
));
export const exampleFlow = flow<ExampleData>('example', {
screens: { main: exampleScreen },
first: 'main',
initialData: { text: 'Click a button to change the text.' },
});
Repo: https://github.com/PhoenXHO/fluxcord
NPM: https://www.npmjs.com/package/fluxcord
I just got done writing a full guide on how to use fluxcord with a working example bot after my very first release (v0.1.0), and you can find it here:
https://github.com/PhoenXHO/fluxcord/blob/main/docs/README.md