Inspiration
Not every viewer wants to write in chat. Someone can be enjoying a stream, supporting the creator and feeling part of the community without having a message to send. We wanted to give that viewer another way to say, “I'm here.”
Chanekia began with a simple interaction: a personal heart meter and a sticker that the viewer could place deliberately, rather than an alert appearing only in a fixed corner. Gnarty developed it with Codex, and Danielxdx contributed illustration and art. Early visual concepts and a local web prototype helped us explore the interaction before bringing it into a Twitch Extension connected to OBS.
What it does
Viewers interact with a personal heart meter inside the Extension. Accepted activity charges the meter, and the backend calculates recreational likes over time. These are participation scores generated from accepted activity, not one-for-one click counts. The viewer can follow their own broadcast total through Your likes, even when they are outside the top three. A separate OBS source displays the channel’s top-three ranking in the broadcast. The channel owner can also participate in their own channel: their real participation scores appear in Your likes and broadcast history and are eligible for the top-three ranking, and their stickers follow the same caps and cooldowns as other participants.
Stickers turn participation into a visible moment. A viewer chooses an available sticker, positions a private preview and confirms with a checkmark. The request passes through backend checks and a queue before a separate OBS sticker source displays it with the viewer’s name. Choosing a sticker alone does not send it. Letting viewers choose a position gives them a way to respond to a particular part of the scene and make the moment feel personal.
Streamers have their own dashboard for delivery controls and private participation history. They can manually return an eligible sticker use through Return use; this is distinct from waiting for the cooldown to expire. The recent-history view shows up to three finalized broadcast rankings plus the current or resumable provisional ranking. Older records remain stored outside that view.
How we built it
Gnarty carried out the programming with Codex, directing the work through product decisions, iterations and live testing. Codex helped implement the Extension, backend, dashboard, shared contracts, tests and documentation, and helped refine identity handling, sticker placement, delivery recovery and ranking history.
The system connects three different environments: Twitch, our backend and OBS. The TypeScript/Node.js backend uses Fastify and SQLite. The streamer dashboard uses React. Separate OBS Browser Sources handle the top ranking and sticker rendering, while the Extension handles viewer identity, activity and private placement.
The backend verifies identity and channel access instead of trusting user IDs or score totals supplied by the browser. Confirmed scores and delivery state persist. Sticker rendering includes acknowledgments and bounded recovery logic, so a reconnect is not simply treated as permission to play every animation again.
Challenges we ran into
The hardest part was making a small interaction work coherently across all three environments. A private sticker preview, an accepted request, an OBS rendering acknowledgment and a viewer seeing the delayed broadcast are different events. We had to keep those distinctions clear in the code and interface.
Other challenges included keeping the personal likes total separate from the public ranking, handling identity and expired sessions, preserving state across interruptions, and keeping channels and broadcasts distinct. A new confirmed Twitch stream ID finalizes the previous ranking; an offline response or restart alone is not enough.
Accomplishments we’re proud of
We brought the concept from a simulated web preview to a working English-language Extension, dashboard and OBS experience, tested during a real stream. The complete sticker flow, personal progress, streamer controls and recent history can be demonstrated visually.
We also built the less visible parts that make that demonstration meaningful: server-side scoring, explicit access boundaries, persistent state, recovery handling and automated tests. The repository includes reproducible instructions, test evidence and documented limitations.
What we learned
A simple viewer experience can require careful coordination behind the scenes. Clear state definitions, small iterations and testing the actual Twitch-to-OBS path mattered as much as the interface itself. Working with Codex was most useful when requirements were explicit and generated changes were checked against real behavior.
What’s next
Our next priorities are broader live testing, clearer queue feedback, and validating the experience across more channels and devices. The current pilot uses Twitch Hosted Test; it is not a publicly released Extension. Bits and subscriber-only features are disabled. We want to learn whether this alternative form of participation is useful to communities before making claims about retention or scale.
Development credits
Codex was the main coding assistant. The repository also records additional development and review contributions from Claude and a scoped identity audit by Argon. These tools supported the human team throughout development and review.
Built With
- fastify
- node.js
- obs
- openai-codex
- react
- sqlite
- twitch-extensions
- typescript
