hanabi

simple twitch overlay using twurple & sveltekit

Important

The way Hanabi was built ended up with a weird global hotkey system. Due to this, global hotkeys are currently only supported on Windows. This will hopefully be fixed in later releases, as I want to turn this into a self contained Go app.

currently, it handles:

• live chat over SSE
• event alerts (follows, subs, raids, cheers, polls, predictions, hype train)
• twitch badge image proxying
• betterttv & 7tv inline emotes in chat
• editable stream title/category for the overlay scene
• vtuber avatar streaming via fuse
• global hotkeys (via powershell script)

quick start

1. install deps

pnpm install

2. create env file

cp .env.example .env

Then fill these values:

TWITCH_CLIENT_ID=...
TWITCH_CLIENT_SECRET=...
TWITCH_REDIRECT_URI=http://localhost:5173/auth/twitch/callback

3. run dev server

pnpm run dev

4. open the control panel

open http://localhost:5173/.

5. connect Twitch account

click "Login to Twitch" and connect your twitch account.

tokens are stored at data/tokens.json.

6. enable global hotkeys (optional) [windows only]

scroll down to the bottom of the page and follow the instructions to set up the hotkey script.

important routes

• /overlay - main overlay scene
• /overlay?theme=dark - dark variant
• / - local control panel (connection status + overlay title editor)
• /auth/twitch - start OAuth flow
• /api/events - SSE stream used by overlay
• /api/overlay/title - read/update overlay title data

scripts

pnpm run dev
pnpm run check
pnpm run lint
pnpm run build
pnpm run preview

notes

• BTTV/7TV emote lists are cached server-side and refreshed periodically.
• If your emote set changed and you do not see it yet, restart the app.
• FuseAvatar in the overlay expects a fuse service at http://localhost:9090. (If you do not need the avatar, click the section in the UI to hide it.)