Victor Web View

A Windows-native WebView2 plugin for Unreal Engine 5. Embed modern web interfaces directly into your UE5 projects.

Overview

Victor Web View is an Unreal Engine 5 plugin that integrates Microsoft's WebView2 into your UE5 projects. It provides a UMG widget that renders fully interactive web content — HTML, CSS, and JavaScript — directly inside your game or application UI.

Windows only (uses WebView2 built into Windows 10/11)
Full Blueprint support via the UMG widget
Supports both opaque and transparent rendering modes
Complete mouse and keyboard input forwarding
Bidirectional JavaScript communication
Built-in localization system for web UI text

Requirements

Windows 10 or later
Unreal Engine 5
WebView2 Runtime (pre-installed on Windows 10 21H2+ and Windows 11)

Installation

1Get the plugin from Fab
2Copy the plugin to your project's Plugins/ directory
3Enable it in Edit > Plugins > Victor Web View
4Restart the editor — no additional dependencies required

Quick Start

Add the widget

In your Widget Blueprint, add a "Victor Web View" widget from the palette (under the "Victor Web View" category).

Set the initial URL

In the Details panel, set the Initial URL property to the web page you want to display.

Play

Add the widget to your viewport and run the game. The web content will be rendered and interactive.

ue:// Content Protocol

A custom URL protocol that resolves to the project's Content/ directory. Navigate to a ue:// URL and it loads the corresponding file from Content/.

ue://UI/dist/main-menu.html
→ Content/UI/dist/main-menu.html

How it works

Virtual host mapping

When the WebView2 browser initializes, it maps the hostname ue.content to the project's Content directory using the native WebView2 SetVirtualHostNameToFolderMapping API.

// SetupWebView() maps ue.content → Content/
https://ue.content/UI/dist/hud.html
→ serves Content/UI/dist/hud.html

URL rewriting

Before passing a URL to WebView2, Navigate() checks if it starts with ue://. If so, it rewrites it to https://ue.content/, which the virtual host mapping resolves to the Content folder.

ue://UI/dist/hud.html
→ https://ue.content/UI/dist/hud.html
→ Content/UI/dist/hud.html

Works in both editor and packaged builds because FPaths::ProjectContentDir() resolves correctly in both contexts.

Widget Properties

Property	Default	Description
Initial URL	""	URL loaded when the widget is created.
Match Widget Size	true	When enabled, the web view automatically resizes to match the widget bounds.
View Width	1920	Fixed width in pixels (64–7680). Only used when Match Widget Size is disabled.
View Height	1080	Fixed height in pixels (64–4320). Only used when Match Widget Size is disabled.
Transparent Background	false	Enables transparent background rendering. Web page areas without a background color will be see-through, blending with the game UI.
Target Frame Rate	60	Target capture frame rate (1–120 FPS). Controls how often the web content is captured and uploaded to the texture.
String Table Id	"WebViewUI"	The Unreal String Table ID used for localization lookups.
Auto Gather Text	true	When enabled, automatically gathers text from data-translate HTML attributes into the string table (editor only).

Blueprint Functions

Function	Returns	Description
Navigate(URL)	void	Navigates to the specified URL.
LoadHTML(HTML)	void	Loads a raw HTML string directly into the web view.
ExecuteJavaScript(Script)	void	Executes a JavaScript snippet in the web view context.
PostWebMessage(Message)	void	Sends a string message to the web page. Receivable via window.chrome.webview.addEventListener('message', ...).
GetWebViewState()	EVictorWebViewState	Returns the current state of the web view.
GetCurrentURL()	FString	Returns the URL currently loaded in the web view.

Utility Library

UVictorWebViewUtils is a Blueprint Function Library with static helper functions for working with Content paths.

Function	Returns	Description
MakeContentURL(Path)	ue:// URL	Builds a ue:// URL from a relative Content path. Example: "UI/dist/hud.html" → "ue://UI/dist/hud.html"
MakeContentFileURL(Path)	file:/// URL	Returns a full absolute file:/// URL for a Content path.
GetContentDirectory()	FString	Returns the absolute path to the project's Content/ directory.
GetContentFilePath(Path)	FString	Joins the Content directory with a relative path.
ContentFileExists(Path)	bool	Checks if a file exists in the Content directory.

All paths are relative to the Content/ directory.

Events

All events are Blueprint Assignable and can be bound in the Event Graph.

Event	Parameters	Description
OnUrlChanged	FString NewUrl	Fired when the URL changes (e.g., navigation, redirect).
OnLoadCompleted	FString Url	Fired when a page finishes loading.
OnLoadError	FString Url, FString ErrorMessage	Fired when a page fails to load.
OnJavaScriptMessage	FString Message	Fired when JavaScript calls window.chrome.webview.postMessage(...).
OnInitialized	—	Fired when the WebView2 environment is fully initialized and ready.

Web View States

The EVictorWebViewState enum represents the lifecycle of the web view.

State	Description
Uninitialized	The web view has not started initialization.
Initializing	WebView2 environment and controller are being created.
Ready	Fully initialized. Navigation and interaction are available.
Error	Initialization failed.

Transparency

When Transparent Background is enabled, the plugin uses one of two capture methods depending on the platform:

Composition Capture (primary) — Uses WinRT Graphics Capture for GPU-to-GPU transfer with true alpha. Available on Windows 11+.
CapturePreview Fallback — Uses WIC PNG decode for alpha extraction. Slower but works on Windows 10.
In opaque mode, the plugin uses PrintWindow() with a DIB section, forcing all alpha values to 255.

For best performance with transparency, target Windows 11 where composition capture is available.

4K / High-DPI

The plugin renders at the full native resolution on high-DPI displays. On a 4K display at 150% scaling, the WebView renders at 3840x2160 physical pixels instead of the scaled-down logical resolution.

	Before	After
Method	GetLocalSize()	GetAbsoluteSize()
4K @ 150% scaling	2560 x 1440	3840 x 2160

This uses GetAbsoluteSize() (physical pixels) instead of GetLocalSize() (Slate logical pixels) when calculating the render resolution, ensuring pixel-perfect rendering on all displays.

JavaScript Communication

The plugin supports bidirectional communication between Blueprints and web content.

Send to Web Page

Call PostWebMessage(Message) from Blueprints. In your web page, listen for messages:

window.chrome.webview.addEventListener('message', (event) => {
  console.log('Received:', event.data);
});

Receive from Web Page

In your web page, send messages to the plugin:

window.chrome.webview.postMessage('Hello from JavaScript!');

In Blueprints, bind to the OnJavaScriptMessage event to receive these messages.

Localization

The plugin includes a built-in localization system for translating web UI text using Unreal's String Tables.

Add data-translate attributes to your HTML elements:

<p data-translate="greeting">Hello, World!</p>
<button data-translate="submit_btn">Submit</button>

The plugin automatically scans for these elements when the page loads.
With Auto Gather Text enabled (editor only), new keys are registered in the specified String Table.
Translations are looked up via FText and applied back to the DOM.