Stream Chapters

A demo project that creates an interactive OBS stream overlay for displaying stream chapters with real-time controls. Built with Svelte, Cloudflare Durable Objects, and PartyServer.

https://github.com/user-attachments/assets/9bb75cc5-200f-43c0-8f5f-4d81114f9850

Demo

Try it out: https://chapters.jovianmoon.io

Feel free to use it on your streams! You can fork and customize it to your heart's content, or use the version on my website. But if you use jovianmoon.io version, make sure to choose a random and unique room name so you don't conflict with anyone else.

For a detailed walkthrough of how everything works, check out the blog post.

URL Parameters

• room - Room name for state isolation (default: "default")
• show_admin - Show/hide admin controls (default: true)
• admin_only - Show only admin panels (default: false)
• chapters_only - Show only chapters and pointer (default: false)

HTTP Control

You can control the overlay state by sending HTTP POST requests:

POST https://chapters.jovianmoon.io/parties/stream-chapters/{room_name}

With a JSON body containing one of these action types:

{"type": "prev"}    // Go to previous chapter
{"type": "next"}    // Go to next chapter
{"type": "toggle"}  // Toggle completed state of current chapter

This makes it easy to integrate with Stream Deck or other streaming tools.

Tech Stack

• Svelte + TypeScript
• Cloudflare Durable Objects
• PartyServer for WebSocket communication
• Vite for bundling

Setup

# Clone and install
git clone https://github.com/StephenGunn/stream-chapters.git
cd stream-chapters
pnpm install

# Development
pnpm dev

# Deployment
# Edit wrangler.json to set your domain or remove for a generated domain
pnpm run deploy

Implementation Details

The project demonstrates:

• Persistent state management across clients using Durable Objects
• WebSocket-based real-time updates
• WebSocket hibernation for low cost of deployment
• Svelte components for admin and viewer interfaces
• HTTP control for StreamDeck control method

For a detailed walkthrough of how everything works, check out the blog post.

Credit

Based on the partyvite-svelte starter by @JoshNuss.

License

MIT