#StatBox

Widget Builder

The builder is the heart of StatBox. Streamers enter their Riot ID, pick a queue (SoloQ or Flex), choose a layout, and preview the final overlay live before copying the browser source URL into OBS. All state is encoded into the URL itself — no accounts, no database lookups per request.

---

Layouts

Four purpose-built variants so the overlay fits any stream composition:

• classic — full card with rank, LP, and recent games
• minimal — rank and LP only, subtle
• compact — condensed horizontal strip
• topbar — one-line top-of-screen ribbon

Each layout is a standalone React component rendered at /widget/[payload]. The payload is an lz-string-compressed, schema-validated blob so widget URLs stay short but stable across versions.

---

Architecture Notes

• Riot API access goes through a server-side proxy at /api/summoner/[payload] to keep the API key off the client. twisted handles Riot's rate limits.
• Upstash Redis provides distributed rate limiting and response caching so the API key stays inside Riot's limits even under traffic.
• TanStack Query drives live polling inside the widget — the overlay stays fresh without a manual refresh.
• Zod validates every inbound payload; malformed widget URLs fail closed instead of crashing the renderer.
• URL-encoded state means a widget is just a link. No login, no cookies, no server session — which is exactly what OBS browser sources need.