Getting Started

Welcome to the StreamLayer Web SDK for TV Platforms documentation. This SDK enables seamless integration of StreamLayer's interactive features into smart TV applications built with React.

Supported Platforms

The @streamlayer/web-os package supports the following TV platforms:

Platform	Documentation
LG WebOS	Getting Started
Samsung Tizen	Getting Started
Hisense VIDAA OS	Getting Started
Xbox	Getting Started

Module Formats

@streamlayer/web-os ships as a dual-format package — ESM and CJS:

Format	Condition	Target	Path
ESM	`import` / `module`	esnext	`lib/es/*.js`
CJS	`default` / `require`	ES2015 (Chrome 32+)	`lib/cjs/*.js`

// ESM — esnext, modern syntax
import { StreamLayerProvider, StreamLayerSDKTv } from '@streamlayer/web-os'

// CJS — ES2015, transpiled with Babel for older environments
const { StreamLayerProvider, StreamLayerSDKTv } = require('@streamlayer/web-os')

Classic (`/classic`)

The /classic entry point is a mirror of the default exports — it resolves to the same files. It exists for backward compatibility with integrators already using /classic import paths:

// These are equivalent:
import { StreamLayerProvider } from '@streamlayer/web-os'
import { StreamLayerProvider } from '@streamlayer/web-os/classic'

Polyfills

The SDK provides an optional polyfills bundle for environments that lack modern browser APIs. Import it once at the top of your application entry point, before any SDK imports:

import '@streamlayer/web-os/polyfills'

The polyfill packages are listed as peer dependencies — install only the ones you need:

pnpm add core-js regenerator-runtime text-encoding-utf-8 \
  intersection-observer resize-observer-polyfill \
  web-streams-polyfill whatwg-fetch abortcontroller-polyfill

Note: If your application already polyfills these APIs (e.g., via @babel/preset-env with useBuiltIns), you may not need the polyfills bundle at all.

Styles

Import the SDK stylesheet in your application:

import '@streamlayer/web-os/style.css'

This is required for all visual SDK components to render correctly.

Quick Start

Understand StreamLayer's Capabilities Start by reading the Introduction and Architecture Overview sections for a high-level overview of the SDK and its key features.
Review the Integration Guide Visit the Integration Guide for a step-by-step walkthrough on installing, configuring, and initializing the SDK.
Explore Features Learn about specific features available for TV platforms:

Exposed Pause Ad – High-impact advertising when video is paused
Split Components – Fine-grained control over SDK UI element placement

What You Can Build

Feature	Description	Guide
Pause Advertising	VAST-compliant ad StreamLayer Elements displayed when viewers pause content	Exposed Pause Ad
Split Components	Fine-grained control over SDK UI element placement	Split Components
Interactive Units	Polls, trivia, stats, and predictions during live streams	Integration Guide
Remote Navigation	Full support for TV remote interactions using spatial navigation	Integration Guide

System Requirements

Node.js: 18+
React: 17+
Package: @streamlayer/web-os (single unified package for all TV platforms)

Support

Need assistance? Use our AI-assisted search in the documentation to quickly find answers to your questions.

For direct support, reach out via:

Email: [email protected]

TV SDK Integration Guide — Complete setup and configuration
Exposed Pause Ad — High-impact pause ad implementation
Platform-Specific Getting Started Guides — WebOS, Tizen, VIDAA, and Xbox setup