An unofficial community project for streamers. Build an overlay, choose the stats you want to show, and add the generated URL to OBS. No plugin or FACEIT login is required.
- Open the widget builder.
- Enter your FACEIT nickname and choose a preset.
- Adjust the content, style, map, and motion settings.
- Copy the generated URL.
- Add it as an OBS Browser Source.
The widget page is transparent and starts at the top-left corner. Position and crop it in OBS without changing the URL.
Read the OBS setup guide for the browser-source settings. The live stats guide explains caching and match refreshes.
- Presets for ELO, FACEIT level, Challenger rank, world and country rank, K/D, recent matches, and session stats.
- Visible fields, fonts, colors, scale, radius, borders, background mode, and map artwork.
- Automatic stat rotation on the larger presets.
- PNG export and share links with a generated preview image.
- Live updates after FACEIT publishes the result of a completed match.
- Node.js 22 or newer
- pnpm 11
- A Cloudflare account with Workers and Durable Objects.
- A server-side key from the FACEIT for Developers portal
Install the dependencies:
pnpm installFor local Worker development, copy .dev.vars.example to .dev.vars and set the key:
FACEIT_DATA_API_KEY=your-server-side-key.dev.vars is local-only and must never be committed.
Run only the frontend while working on the UI:
pnpm devRun the static export and the Worker together when testing real FACEIT requests, WebSockets, Durable Objects, or share pages:
pnpm preview| Variable | Runtime | Required | Purpose |
|---|---|---|---|
FACEIT_DATA_API_KEY |
Worker secret | Yes | Authenticates server-side requests to FACEIT. |
LIVE_POLL_INTERVAL_MS |
Worker variable | No | Match-history polling interval. Defaults to 30000 and is clamped between 15 and 60 seconds. |
NEXT_PUBLIC_WIDGET_API_BASE_URL |
Next.js build | No | Points the browser client at a separate Worker origin during local development. |
app/ Routes, metadata, guides, builder, and widget page
backend/ Worker routes, FACEIT gateway, Durable Objects, and caching
components/ui/ Reusable shadcn and Base UI components
components/widget/ Widget renderer, presets, builder, and animation
lib/widget/ Config, types, serialization, ranking, and API client
public/ Level icons, flags, maps, and static assets
| Command | Purpose |
|---|---|
pnpm dev |
Start the Next.js development server. |
pnpm preview |
Build and run the full app through Wrangler. |
pnpm build |
Create the static export in out/. |
pnpm test |
Run the Vitest suite. |
pnpm typecheck |
Check TypeScript without emitting files. |
pnpm lint |
Run ESLint. |
pnpm cf:typegen |
Regenerate Cloudflare binding types. |
pnpm deploy |
Build and deploy with Wrangler. |
Forks need their own Worker name, domain, Durable Object namespacesand FACEIT key. Update wrangler.jsonc before deploying.
pnpm exec wrangler login
pnpm exec wrangler secret put FACEIT_DATA_API_KEY
pnpm test
pnpm typecheck
pnpm lint
pnpm deployBug reports and focused pull requests are welcome. Use the bug report template and include the OBS or streaming-software version, widget URL, browser, and clear reproduction steps for rendering issues.
MIT. See the license file.
FACEIT Widget is an unofficial community project. It is not affiliated with or endorsed by FACEIT.