# What Are the Main Dependencies for the Stremio-Web Repository?

> Discover the primary dependencies within the stremio-web repository. Explore its React-based JavaScript stack, @stremio/stremio-core-web integration, and essential utilities.

- Repository: [Stremio/stremio-web](https://github.com/Stremio/stremio-web)
- Tags: dependencies
- Published: 2026-05-23

---

**The Stremio-Web frontend is built on a React-based JavaScript stack that integrates the `@stremio/stremio-core-web` engine, internationalization utilities, and browser compatibility polyfills, all declared in the root [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json) file.**

The **Stremio-Web** repository contains the browser-based single-page application for the Stremio media streaming platform. Understanding the **main dependencies for the Stremio-Web repository** reveals how the application renders its interface, handles video playback, manages state, and supports multiple languages, with every runtime package strictly defined in the project's [`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json) manifest.

## React UI and Rendering Layer

The user interface relies on the standard React ecosystem. The **`react`** and **`react-dom`** packages provide the component model and DOM manipulation layer.

Several satellite React libraries enhance accessibility and functionality:
- **`react-focus-lock`** manages focus trapping for modal dialogs, ensuring keyboard navigation remains within active overlays.
- **`react-i18next`** connects the React component tree to the translation engine.
- **`prop-types`** enables runtime type checking for component props during development.

These packages work together in [`src/index.js`](https://github.com/Stremio/stremio-web/blob/main/src/index.js), the application entry point that mounts the React root and initializes the core services.

## Stremio Core Ecosystem

The application logic depends on proprietary Stremio libraries published under the `@stremio` scope. **`@stremio/stremio-core-web`** is the most critical dependency, supplying the central data model, playback engine, and API adapters that communicate with Stremio servers.

Additional scoped packages include:
- **`@stremio/stremio-icons`**: Standardized iconography used across UI components.
- **`@stremio/stremio-video`**: Video player abstractions and streaming protocol handlers.
- **`@stremio/stremio-colors`**: Centralized color palette definitions for theming.

In [`src/core/useCore.ts`](https://github.com/Stremio/stremio-web/blob/main/src/core/useCore.ts), the application wraps `@stremio/stremio-core-web` into a React hook, making the core instance available throughout the component tree via context or props.

## State Management and Event Utilities

Rather than using a heavy state management framework like Redux, Stremio-Web leverages lightweight utilities:
- **`eventemitter3`**: A high-performance event emitter serving as the primary pub/sub bus between UI components and the core library.
- **`classnames`**: A utility for conditionally joining CSS class strings based on component state.
- **`fast-equals`**: Provides deep equality checks for complex objects and arrays, optimizing React re-render cycles.
- **Lodash utilities** (`lodash.debounce`, `lodash.intersection`, `lodash.throttle`): Granular lodash functions for input debouncing, array comparisons, and scroll throttling without importing the entire library.

## Internationalization (i18n)

Multi-language support depends on **`i18next`** as the core internationalization framework, paired with **`react-i18next`** for React-specific bindings. The actual translation strings reside in the **`stremio-translations`** package, which the application imports to provide localized strings for all supported languages. This setup allows dynamic language switching without reloading the application bundle.

## Browser Compatibility and Media Handling

To ensure consistent behavior across diverse browsers and TV platforms, the repository includes several polyfills and detection libraries:
- **`bowser`**: Detects browser capabilities and versions at runtime, enabling feature flags for specific platforms.
- **`spatial-navigation-polyfill`**: Implements spatial navigation APIs for TV-style remote control navigation (arrow key focus management).
- **`buffer`** and **`url`**: Node.js-compatible implementations of the Buffer and URL modules, necessary for parsing binary data and URLs in browser environments.

For media-specific functionality:
- **`magnet-uri`**: Parses magnet links to extract torrent infoHashes, trackers, and metadata for torrent-based streaming.
- **`a-color-picker`**: Provides a color selection component used in settings and customization features.
- **`use-long-press`**: A React hook detecting long-press gestures for touch interfaces.

## Error Monitoring and Telemetry

Production error tracking relies on **`@sentry/browser`**, which captures runtime exceptions and performance metrics. This integration sends crash reports to Sentry, allowing the development team to monitor application health and identify client-side errors in real time.

## Implementation Examples

### Initializing the Stremio Core

The following pattern from [`src/core/useCore.ts`](https://github.com/Stremio/stremio-web/blob/main/src/core/useCore.ts) demonstrates how the application instantiates the core library:

```javascript
import { useCore } from './core/useCore';
import { createRoot } from 'react-dom/client';
import App from './App';

function Root() {
  // Initialise the core – this pulls in @stremio/stremio-core-web under the hood
  const core = useCore();

  // The core instance can now be passed via React Context or props
  return <App core={core} />;
}

createRoot(document.getElementById('root')).render(<Root />);

```

### Configuring Internationalization

Components access translations through the i18next React bindings:

```javascript
import { useTranslation } from 'react-i18next';

function LanguageSwitcher() {
  const { i18n } = useTranslation();          // from i18next
  const changeLang = (lng) => i18n.changeLanguage(lng);
  return (
    <select onChange={e => changeLang(e.target.value)}>
      <option value="en">English</option>
      <option value="de">Deutsch</option>
    </select>
  );
}

```

### Handling Magnet Links for Torrents

The video playback module in [`src/common/usePlayUrl.js`](https://github.com/Stremio/stremio-web/blob/main/src/common/usePlayUrl.js) uses the `magnet-uri` package to process torrent links:

```javascript
import magnet from 'magnet-uri';
import { usePlayUrl } from './common/usePlayUrl';

function PlayFromMagnet({ magnetLink }) {
  const playUrl = usePlayUrl();
  const parsed = magnet(magnetLink);          // parses infoHash, trackers, etc.
  // Pass the infoHash to the core’s torrent engine
  playUrl(`magnet:${parsed.infoHash}`);
}

```

## Key Configuration Files

Several files orchestrate how these dependencies are consumed:

- **[`package.json`](https://github.com/Stremio/stremio-web/blob/main/package.json)**: The authoritative manifest listing all runtime and development dependencies, version constraints, and npm scripts.
- **[`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js)**: Defines the bundling strategy, tree-shaking rules, and module resolution for production builds.
- **[`src/core/useCore.ts`](https://github.com/Stremio/stremio-web/blob/main/src/core/useCore.ts)**: The abstraction layer connecting React components to `@stremio/stremio-core-web`.
- **[`src/common/usePlayUrl.js`](https://github.com/Stremio/stremio-web/blob/main/src/common/usePlayUrl.js)**: Utility hook integrating media parsing libraries like `magnet-uri` with the playback engine.
- **[`src/index.js`](https://github.com/Stremio/stremio-web/blob/main/src/index.js)**: The application bootstrap file importing React and the core initialization logic.

## Summary

- **Stremio-Web** depends on **React** for UI rendering, augmented by accessibility and internationalization libraries.
- The proprietary **`@stremio/stremio-core-web`** package provides the essential data models, API clients, and streaming engine.
- **`eventemitter3`** and lightweight Lodash utilities handle cross-component communication and state equality checks.
- **`i18next`** and **`stremio-translations`** deliver multi-language support without page reloads.
- Browser polyfills like **`bowser`** and **`spatial-navigation-polyfill`** ensure compatibility across desktop and TV environments.
- **`@sentry/browser`** monitors production errors, while **`magnet-uri`** enables torrent streaming support.

## Frequently Asked Questions

### What is the role of @stremio/stremio-core-web?

**`@stremio/stremio-core-web`** is the central dependency that supplies the application's data layer, including the playback engine, content metadata models, and adapters for communicating with Stremio's backend APIs. It is initialized in [`src/core/useCore.ts`](https://github.com/Stremio/stremio-web/blob/main/src/core/useCore.ts) and injected into the React component tree to provide global state and actions.

### How does Stremio-Web handle torrent magnet links?

The repository uses the **`magnet-uri`** package to parse magnet links, extracting the infoHash and tracker URLs. The [`src/common/usePlayUrl.js`](https://github.com/Stremio/stremio-web/blob/main/src/common/usePlayUrl.js) utility then constructs playback URLs compatible with the core's torrent engine, enabling streaming directly within the browser without external applications.

### Is Stremio-Web built with TypeScript or JavaScript?

The codebase primarily uses **JavaScript** with significant portions written in **TypeScript** (notably [`src/core/useCore.ts`](https://github.com/Stremio/stremio-web/blob/main/src/core/useCore.ts)). Development dependencies include TypeScript compilers and type definitions, allowing for gradual type safety adoption, while the build pipeline in [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js) handles both languages.

### What build tool bundles the Stremio-Web dependencies?

**Webpack** serves as the primary bundler, configured in [`webpack.config.js`](https://github.com/Stremio/stremio-web/blob/main/webpack.config.js). It processes JavaScript/TypeScript source files, resolves Stremio's scoped packages, and applies optimizations like tree-shaking for production deployments. Development tooling includes Babel for transpilation and ESLint for code quality.