Overview of Vega Web Apps

The Vega WebView component displays web-based content in your Vega app, including HTML, JavaScript, and CSS. Using this component, you can leverage existing web content for your app. Some examples are static pages (Help pages, Terms and Conditions, etc), login screens, or the presentation layer of your app. The WebView component uses the Chromium engine, which is customizable (custom headers, or DOM storage for instance) and supports data communication between the WebView source and the containing Vega app through 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 seldom compatible with a TV user experience, and TV devices often use less power than desktop and mobile devices. 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

[wants]

# Web renderer service for rendering web content
[[wants.service]]
id = "com.amazon.webview.renderer_service"

# If Web App needs keyboard support
[[wants.service]]
id = "com.amazon.inputmethod.service"

# If Web App needs video playback
[[wants.service]]
id = "com.amazon.media.server"

# Required for emitting metrics from video playback
[[wants.service]]
id = "com.amazon.mediametrics.service"

# Required for video playback on stable APIs
[[wants.service]]
id = "com.amazon.mediabuffer.service"
[[wants.service]]
id = "com.amazon.mediatransform.service"

# If Web App needs audio playback
[[wants.service]]
id = "com.amazon.audio.stream"

# Required for audio management features to work in WebView, features like audio focus, volume control 
[[wants.service]]
id = "com.amazon.audio.control"

# To enable accessibility support for your app, we recommend you add the UCC service with the Service Registrar
[[wants.service]]
id = "com.amazon.kepler.ucc.publisher"

# Uncomment below section to enable encrypted media playback (DRM content)
# [[wants.service]]
# id = "com.amazon.drm.key"
# [[wants.service]]
# id = "com.amazon.drm.crypto"
# [[needs.privilege]]
# id = "com.amazon.privilege.security.file-sharing"

# 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: Feb 04, 2026