Set Up your Vega Web App

Open Beta Documentation Amazon offers this technical documentation as part of a pre-release, open beta. The features described might change as Amazon receives feedback and iterates on the features. For the most current feature information, see the Release Notes.

To set up your Vega Web App, you must import a few required libraries, and then use a specific component to render the content.

To set up your Vega Web App to develop your app

To implement WebView, you must import a few required libraries and then use a specific component to render the content.

Add an app template by following the directions in the Vega SDK topic Create an app from a template.
To install WebView, at the command prompt, run the following command.
Copied to clipboard.
```
npm install @amazon-devices/webview@^3.3.0
```

In your app folder, open the manifest.toml file, and then add the following services and privileges.

Copied to clipboard.

 # 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]
 [[wants.service]]
 id = "com.amazon.gipc.uuid.*"

 [offers]
 [[offers.service]]
 id = "com.amazon.gipc.uuid.*"

 # You may add other services as needed

Note: Digital Rights Management (DRM) support: Webview currently supports Widevine and PlayReady. Widevine supports HW_SECURE_ALL for video, and SW_SECURE_CRYPTO for audio. PlayReady supports SL3000 for video, and SL2000 for audio.

Add the following to your JavaScript XML (JSX) file.
Copied to clipboard.
```
 import { WebView}  from "@amazon-devices/webview";
```

In your src/App.tsx file, add the following code, which includes the hasTVPreferredFocus={true} prop, to render WebView.

Copied to clipboard.

 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
         ref={webRef}
         hasTVPreferredFocus={true}
         source={{
           uri: "https://www.example.com",
         }}
         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,
   }
 });

Important: The WebView framework doesn’t set the initial focus. You must set the initial focus by adding a hasTVPreferredFocus={true} prop to the component. If the app doesn’t set the initial focus on the WebView component, the first click on the remote might select the WebView UI component, and trigger WebView to set its initial focus to the first element on its focus table.

The Vega Web App pauses the JavaScript engine, animation, and media playback audio and video when it goes into the background. WebView resumes when it comes to the foreground.

Last updated: Sep 30, 2025

Set Up your Vega Web App

To set up your Vega Web App to develop your app

Related topics