$ show streamlabs/desktop
Streamlabs Desktop (formerly Streamlabs OBS) is a production-grade live-streaming desktop application for Windows and macOS built on Electron and the OBS Studio native library (obs-studio-node). In production it lets streamers compose multi-scene/source setups, manage audio, go live simultaneously to Twitch, YouTube, TikTok, Kick, Facebook and other platforms, run alert/widget overlays, record and replay, generate AI highlight clips, and control the app programmatically through an external JSON-RPC API (used by Stream Deck devices, mobile remotes, and third-party platform apps). The product layer also includes Ultra subscription gating, an overlay/widget store, onboarding flows, game-capture source management, and a managed updater with incremental rollout and A/B testing. Architecturally, the app spans multiple Electron processes (worker services layer, main UI, child windows) with a custom dependency-injection framework (@Inject, Service/StatefulService/PersistentStatefulService) and IPC proxies that let any window invoke services as if local. State is persisted through layered mechanisms: Vuex-backed mutations, localStorage-backed persistent services, and RealmObject documents for real-time data. The UI is a hybrid: a large legacy Vue 2 surface is being progressively replaced by React 17 with antd 4, bridged through component wrappers. Undo/redo is a genuine Command pattern (EditorCommandsService with combinable commands and a 500-entry history), and scene collections serialize through a versioned node/array-node tree with overlay import/export and migrations. Core data flows: OBS native events (stream/record status, scenes, sources, audio meters) flow from obs-studio-node into stateful services that reactively drive the UI; scene collections persist as JSON via the node serializer; widget settings are fetched and patched against the Streamlabs REST API; real-time alerts, safe-mode state, and user state for AI features arrive over WebSocket; platform auth uses OAuth/PKCE flows. The highlighter subsystem contains a notably crafted media pipeline (FFmpeg frame reading, WebGL transitions, audio crossfading, vertical export, companion-app installation) for automated clip generation. The codebase is large (~5000 files) and shows its age in places: Vue 2 (EOL), React 17, and antd 4 are several major versions behind; at least four state-management approaches coexist (Vuex, Zustand, Realm, localStorage); a global Services locator couples many modules; and scattered @ts-ignore comments and skipped tests indicate debt. Despite this, the DI/service layer, command pattern, node serialization framework, JSON-RPC protocol, metadata-driven form system, and several DSP/geometry utilities are cleanly designed and genuinely reusable, and the project is actively maintained with CI workflows, dependency automation via Renovate, and an extensive test suite spanning unit, integration, screenshot, and performance tests.
The LLM identified 5 files worth highlighting for reuse:
Base Command class with execute/rollback semantics plus a CombinableCommand variant that coalesces consecutive operations (e.g., nudges, resizes) into a single undo step; the surrounding EditorCommandsService dispatches through a central bus with a bounded history. This is a complete, well-practiced undo/redo architecture that could be lifted into any editor-style application with minimal coupling to the rest of the app.
A node-based serialization framework where each scene-collection node knows how to save/load itself and participates in schema-versioned migrations; ArrayNode handles ordered child collections and overlay nodes (scenes, sources, transitions) extend the base. The pattern cleanly separates persistence from business logic and is directly reusable for any hierarchical document/config persistence system that needs backward-compatible migrations.
A schema-driven form renderer that declaratively converts component metadata (input type, options, validation, layout) into composed input components, standardizing labeling, validation, and layout across hundreds of settings and widget forms. By expressing forms as data, new settings surfaces require only metadata rather than new UI code; the pattern ports cleanly to any React project needing configurable, data-driven forms.
A minimal, transport-agnostic JSON-RPC 2.0 message builder/parser handling request/response/event creation and structured errors. It underpins both the internal IPC layer and the external TCP remote-control API, and because it is isolated from Streamlabs-specific services, it can be extracted verbatim as the protocol layer for any tool needing JSON-RPC over custom transports.
Sample-accurate audio crossfading between source clips used during automated highlight rendering, handling fade curves, channel mapping, and sample-format conversion without external audio libraries. A self-contained DSP utility demonstrating non-obvious signal-processing skill, reusable in any media-editing, transition, or clip-rendering pipeline.