Jellyfin plugin
A full-stack UI replacement for Jellyfin servers, engineered with a React frontend and C# middleware.
Services:
App development
Industry:
Open source
Timeline
12 Weeks
The Challenge
While Jellyfin is a powerful open-source media engine, its native web interface often feels like a utility tool rather than a premium entertainment experience. Users seeking a "Netflix-grade" or "Crunchyroll-style" cinematic feel were limited by standard CSS themes, which can only restyle existing elements but cannot change the underlying logic, navigation flow, or performance of the UI.
Static and dated interface that lacked the immersive feel of modern streaming giants.
Architectural limitations of CSS-only themes prevented deep functional changes.
Fragmented user journeys when navigating large anime or movie libraries.
Standard player limitations regarding subtitle handling and seeking precision.
The Solution
We engineered Legitflix, a comprehensive architectural overhaul that replaces the entire Jellyfin frontend with a custom React-based Single Page Application (SPA). By utilizing C# to build a custom middleware plugin, we successfully decoupled the UI from the core server, allowing for a complete rewrite of the user experience. This includes a high-performance video player powered by Vidstack, a dynamic theme engine, and deep integrations with third-party tools like Jellyseerr and OpenSubtitles.
Standalone React Frontend: Built from the ground up for smooth transitions and modern state management.
Cinematic Discovery: Introduced Netflix-style info modals, auto-playing trailers, and dynamic hero headers.
Enhanced Media Player: A custom-built player optimized for anime and high-bitrate movies with intuitive gesture controls.
Deep Customization: A built-in theme engine allowing users to personalize colors, avatars, and layout density.
The Result
Legitflix has transformed the self-hosted media experience into a polished, high-end streaming platform. By moving beyond simple styling and into full-scale application development, we’ve created a UI that rivals major commercial services while maintaining the privacy and control of a self-hosted backend.
Immersive UX: A complete visual transformation that prioritizes artwork and storytelling.
Improved Performance: Faster navigation and media discovery via a modern React architecture.
Seamless Integration: A unified ecosystem where requests and subtitles are handled within the primary UI.
Extensible Framework: A modular codebase that allows for rapid feature deployment and community scaling.
