create interactive messages using react-like components and fine-grained reactivity

import { ButtonStyle, Client } from "discord.js";
import { Actions, Button, Description, Embed, Message, Title } from "dsxjs/components";
import { useSignal } from "dsxjs/hooks";
import { mount } from "dsxjs/renderer";

const bot = new Client({
    intents: ["Guilds", "GuildMessages", "MessageContent"],
});

bot.on("ready", async (b) => {
    console.log(b.user.tag);
})

bot.on("messageCreate", async (message) => {
    if (message.content === "counter") {
        const Component = () => {
            const count = useSignal(0);
            return (
                <Message>
                    <Actions>
                        <Button onClick={() => count.value++}>+</Button>
                        <Button style={ButtonStyle.Secondary} onClick={() => count.value = 0}>{count.value}</Button>
                        <Button onClick={() => count.value--}>-</Button>
                    </Actions>
                </Message>
            )
        }

        await mount(
            Component,
            bot,
            mounted => message.reply(mounted)
        )
    }
});

bot.login(process.env.TOKEN).catch(console.error);

• reactive: fine-grained reactivity with useSignal and useEffect hooks
• lightweight: no dependencies, just a few kilobytes
• simple: easy to use and understand api
• flexible: plug-and-play into any existing discord.js bot
• compatible: works with both Bun and Node.js
• type-safe: built with typescript for better dx
• extensible: easily extendable with custom components and hooks
• modern: uses modern javascript features & tooling
• open-source: fully open-source under the MIT license

dsx makes building interactive discord messages a breeze, combining the declarative UI approach of JSX with a reactive state model inspired by solid.js & react. It allows you to build complex UIs with minimal code, while still being lightweight and performant. instead of manually managing message content, components, and interactions, you write ui components that update themselves automatically.

bun i dsxjs
# or:
npm install dsxjs
pnpm install dsxjs
yarn add dsxjs

or if you want a bot and dsx included (coming soon):

bun create dsxjs
# or:
npm create dsxjs
pnpm create dsxjs
yarn create dsxjs

contributions, bug reports, and feature requests are welcome! See the roadmap and contributing guide for details.

find us on:

• github discussions
• twitter/x
• discord server (coming soon)

dsx is licensed under the MIT license.

tldr: you're free to use and modify dsx, but please keep the license intact and give credit where it's due.