What UI Frameworks and Libraries Does Stremio-Web Use? A Complete Technical Breakdown

Stremio-web is built on React 18.3.1 and composes its interface using lightweight, specialized libraries including classnames for conditional styling, @stremio/stremio-icons for vector graphics, react-i18next for translations, and @stremio/stremio-video for media playback, rather than relying on heavyweight component frameworks.

Stremio-web serves as the browser-based interface for the Stremio streaming platform, handling everything from video playback to settings dialogs. Understanding what UI frameworks and libraries stremio-web uses reveals a deliberate architectural choice favoring modularity over monolithic frameworks. The codebase, located in the Stremio/stremio-web repository, combines React 18 with a curated set of utility libraries to deliver a responsive, TV-friendly interface while keeping bundle sizes manageable.

Core Framework: React 18

At the foundation of stremio-web sits React 18.3.1 alongside react-dom 18.3.1, serving as the core rendering engine. All UI code resides in the src/ directory and utilizes JSX for declarative component composition, managing state and lifecycle hooks throughout the player, navigation, and dialog components. This version of React provides the concurrent features and automatic batching necessary for smooth video player interactions and responsive UI updates.

Styling and Class Management

Rather than adopting a comprehensive CSS-in-JS framework, stremio-web relies on classnames 2.5.1 for conditional CSS class composition. This lightweight utility toggles UI states by combining base classes with dynamic conditional logic. The project uses Less for stylesheet preprocessing, compiled through webpack with css-loader, mini-css-extract-plugin, and postcss-loader.

In src/routes/Player/ControlBar/ControlBar.js, the implementation uses classnames to handle interactive states:

import classnames from 'classnames';
import styles from './ControlBar.module.less';

function ControlBar({ className, paused }) {
  return (
    <div
      className={classnames(className, styles['control-bar-container'])}
    >
      <Button
        className={classnames(styles['control-bar-button'], {
          disabled: typeof paused !== 'boolean',
        })}
        title={paused ? t('PLAYER_PLAY') : t('PLAYER_PAUSE')}
      />
    </div>
  );
}

Stremio-Specific UI Packages

The project maintains several internal libraries that provide consistent branding and functionality:

• @stremio/stremio-icons 5.10.0: Vector-based icon set matching Stremio’s brand identity. Imported as const { default: Icon } = require('@stremio/stremio-icons/react') and used throughout components like src/routes/Player/VolumeChangeIndicator/VolumeChangeIndicator.js:

const { default: Icon } = require('@stremio/stremio-icons/react');

function VolumeChangeIndicator({ volume }) {
  return (
    <div className={styles.indicator}>
      <Icon name={volume > 0 ? 'volume-up' : 'volume-mute'} />
    </div>
  );
}

• @stremio/stremio-colors 5.2.0: Centralized color definitions imported across style modules to maintain consistency.
• @stremio/stremio-video 0.0.79: Custom wrapper around HTML5 video providing Stremio-specific controls, integrated in src/routes/Player/Video/Video.js and src/components/Video/Video.js.

Internationalization Stack

For runtime translation and localization, stremio-web implements react-i18next ^15.7.4 paired with i18next ^24.2.3. The useTranslation hook and <Trans> component drive all user-facing text, as seen in src/components/SearchBar/SearchBar.js:

import { useTranslation } from 'react-i18next';

function SearchBar() {
  const { t } = useTranslation();
  return (
    <input
      placeholder={t('SEARCH_PLACEHOLDER')}
      aria-label={t('SEARCH_LABEL')}
    />
  );
}

Accessibility and Interaction Utilities

The interface incorporates several focused utility libraries for specific interaction patterns:

• react-focus-lock 2.13.7: Traps keyboard focus within modal dialogs for accessibility compliance. Implemented in src/components/ModalDialog/ModalDialog.js:

import FocusLock from 'react-focus-lock';
import ModalDialog from '../ModalDialog';

function SettingsModal({ isOpen, onClose }) {
  return (
    <ModalDialog isOpen={isOpen} onRequestClose={onClose}>
      <FocusLock>
        {/* modal content */}
      </FocusLock>
    </ModalDialog>
  );
}

• a-color-picker 1.2.1: Powers color selection dialogs in settings.
• use-long-press ^3.3.0: Handles long-press gestures for TV-style interactions.
• filter-invalid-dom-props: Sanitizes props passed to DOM elements to prevent invalid attribute injection.

Browser Detection and TV Navigation

To support diverse environments from desktop browsers to smart TVs, stremio-web includes bowser 2.14.1 for user-agent capability detection. For TV-style keyboard navigation, it implements spatial-navigation-polyfill (sourced from github:Stremio/spatial-navigation), enabling directional pad navigation through src/components/NavBar/ and other focusable regions.

Summary

• React 18.3.1 provides the foundational component architecture and rendering lifecycle.
• classnames 2.5.1 handles dynamic CSS class composition without the overhead of a full CSS-in-JS solution.
• @stremio/stremio-icons, @stremio/stremio-colors, and @stremio/stremio-video deliver branded, consistent UI elements specific to the Stremio ecosystem.
• react-i18next and i18next manage all internationalization requirements.
• react-focus-lock, use-long-press, and spatial-navigation-polyfill ensure accessibility and TV-remote compatibility.
• bowser enables runtime feature detection for cross-browser compatibility.

Frequently Asked Questions

Does stremio-web use Material-UI or Bootstrap?

No. Stremio-web deliberately avoids heavyweight component frameworks like Material-UI or Bootstrap. According to the source code analysis, it relies on classnames for styling logic combined with custom Less stylesheets, keeping the bundle size minimal while maintaining full control over the component appearance.

What video player library does stremio-web use?

Stremio-web uses @stremio/stremio-video 0.0.79, a custom wrapper around HTML5 video elements that provides Stremio-specific controls and styling. This package is integrated in src/components/Video/Video.js and the player route components, rather than using generic video libraries like Video.js or Plyr.

How does stremio-web support TV remote navigation?

The application implements spatial-navigation-polyfill sourced from the Stremio GitHub organization, alongside bowser 2.14.1 for device detection. This combination enables directional pad navigation through the interface in src/components/NavBar/ and other focus-managed areas, making the web app functional on smart TVs and streaming devices.

What i18n library does stremio-web use for translations?

Stremio-web uses react-i18next ^15.7.4 with i18next ^24.2.3 for internationalization. Components like src/components/SearchBar/SearchBar.js import the useTranslation hook to access translated strings for placeholders, labels, and button titles at runtime.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}