Overivew of Vega Web Apps

The Vega WebView component displays web-based content in your Vega app, including HTML, JavaScript, and CSS. This allows you to leverage existing web content for your app; such as static pages (Help pages, Terms and Conditions, etc), login screens, or even the entire presentation layer of the app. The WebView component utilizes the Chromium engine, is customizable (e.g. custom headers, DOM storage, etc) and supports data communication between the WebView source and the containing Vega application via the Messaging bridge.

Make sure your web content is optimized for TV devices, which includes focus navigation for remote-control/directional-pad (D-Pad) input. Click/Touch/Drag UX implementations are generally NOT compatible with a TV user experience, and TV devices often use less power than desktop and mobile devices. You should optimize your web content by reducing animations for TV, for instance. For more guidance on performance and fluidity, see Development Best Practices for Web Apps.

Quick setup of your web app

Step 1: Add an app template

npm install @amazon-devices/webview@^3.3.0

For more details, see Create an app from a template.

Step 2: Add the required services to your manifest.toml file

# If the app needs video playback
[[wants.service]]
id = "com.amazon.media.server"
[[wants.service]]
id = "com.amazon.mediametrics.service"
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"

# If the app needs audio playback
[[wants.service]]
id = "com.amazon.audio.stream"
[[wants.service]]
id = "com.amazon.audio.control"

# If the app needs DRM playback
[[wants.service]]
id = "com.amazon.drm.key"
[[wants.service]]
id = "com.amazon.drm.crypto"
[[needs.privilege]]
id = "com.amazon.privilege.security.file-sharing"

# To enable accessibility support for your app,
# it's highly recommended you add UCC service with SR
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"

# Enable Group-IPC to access media services
[[wants.service]]
id = "com.amazon.gipc.uuid.*"
[offers]
[[offers.service]]
id = "com.amazon.gipc.uuid.*"

# You may add other services as needed

Step 3: Import and use the WebView component in your App.tsx file

 
import { WebView } from "@amazon-devices/webview";
import * as React from "react";
import { useRef } from "react";
import { View, StyleSheet } from "react-native";

export const App = () => {
  const webRef = useRef(null);
  return (
    <View style={styles.container}>
      <WebView
        // headers: {},
        ref={webRef}
        hasTVPreferredFocus={true}
        source={{
          // Replace with your URL.
          uri: "https://www.example.com",
          // or to reference a file located at <root>/assets/index.html
          // uri: "file:///pkg/assets/index.html"
        }}
        javaScriptEnabled={true}
        onLoadStart={(event) => {
          console.log("onLoadStart url: ", event.nativeEvent.url)
        }}
        onLoad={(event) => {
          console.log("onLoad url: ", event.nativeEvent.url)
        }}
        onError={(event) => {
          console.log("onError url: ", event.nativeEvent.url)
        }}
      />
    </View>
  );
};

// Styles for layout, which are necessary for proper focus behavior
const styles = StyleSheet.create({
  container: { flex: 1 }
});

WebView props

For a full list of props for the WebView component, see Vega WebView Component Reference.

Supported media formats

Vega Web App supports the following audio and video formats.

Supported audio formats

• FLAC
• MP3
• Opus
• Vorbis
• AAC
• PCM 8-bit unsigned integer
• PCM 16-bit signed integer little endian
• PCM 24-bit signed integer little endian
• PCM 32-bit float little endian
• PCM 16-bit signed integer big endian
• PCM 24-bit signed integer big endian
• PCM μ-law
• PCM A-law
• AAC-LC
• AAC-SBR
• AAC-PS
• AAC Scalable (MPEG-2)

Supported video software formats

• Theora
• MPEG4 Part 2

Supported video hardware formats

• VP8
• VP9
• H.264
• H.265

Related topics

• Developer Guide for Web Apps
• Performance Best Practices for Web Apps
• Vega WebView Component Reference

Last updated: Oct 07, 2025