Home

Web User Interface

The WebUserInterface plugin embeds a Chromium-based web UI in Unreal Engine through CEF. It provides browser sessions, local WebSocket communication, protobuf and message dispatch helpers, and an HTTP endpoint for serving Unreal textures to the browser.

Runtime modules

Module	Purpose
CefWebUi	Browser sessions, CEF host lifecycle, shared frame resources, input, and the Slate browser surface.
CefDispatch	Message-type-to-factory routing for protobuf, strings, structs, or raw bytes.
CefContentHttpServer	Local HTTP image serving, including the default /img Unreal texture endpoint.
CefWebSocketServer	Named local WebSocket servers with threaded read, handle, send, and write stages.

Getting started

1. Install the plugin and CEF host

Enable the plugin in ScpRiftborn.uproject (or the target project):

{
  "Name": "CefWebUi",
  "Enabled": true
}

The plugin also requires the external CEF host package from CefHost. Place the host files in:

Plugins/WebUserInterface/Source/ThirdParty/Cef/

At minimum, verify that Host.exe, libcef.dll, the CEF resource files, and the locales/ directory are present. Generate project files and build the Unreal project after installing the host package.

2. Create a browser session

In Blueprint, use the CefWebUi nodes:

1. Get the Cef Web UI Game Instance Subsystem.
2. Call Get Or Create Session with a name such as MainUi.
3. Call Show In Viewport with the desired size and Z order.
4. Call Set Url or Load Html String.
5. Call Set Focus when the page should receive keyboard input.

Useful session controls include Reload, Resize, Execute Js, Open Dev Tools, and Hide From Viewport.

Minimal C++ example:

#include "Sessions/CefWebUiBrowserSession.h"
#include "Subsystems/CefWebUiGameInstanceSubsystem.h"

void UMyGameInstance::InitWebUi()
{
    UCefWebUiGameInstanceSubsystem* subsystem =
        GetSubsystem<UCefWebUiGameInstanceSubsystem>();
    if (!subsystem)
    {
        return;
    }

    UCefWebUiBrowserSession* session =
        subsystem->GetOrCreateSession(FName(TEXT("MainUi")), nullptr);
    if (!session)
    {
        return;
    }

    session->ShowInViewport(nullptr, 10, 1920, 1080);
    session->SetUrl(TEXT("http://localhost:3000"));
    session->SetFocus(true);
}

Common integration patterns

WebSocket bridge

Use UCefWebSocketSubsystem to create or retrieve a named server. Configure the payload format (Binary, Utf8String, JsonString, XmlString, or Custom), bind connection/error events, and send with SendToClient... or Broadcast... methods.

For custom wire formats, implement ICefWebSocketPacketCodec. For protobuf messages, combine the WebSocket pipeline with CefProtobuf and optionally route decoded messages through CefDispatch.

Serving Unreal textures

CefContentHttpServer exposes a local image route by default:

http://localhost:18080/img?asset=/Game/Folder/T_Image

The default handler resolves the Unreal asset, loads the texture, encodes it as PNG, and returns image/png. A custom handler can be assigned through UCefContentHttpServerSubsystem when the application needs different authorization, formats, or response data.

Protobuf and dispatch

Use CefProtobuf when browser/game messages need compact, schema-based binary transport. Use CefDispatch to register a uint32 message type and create a typed value or invoke a typed handler without coupling the transport layer to application objects.

Troubleshooting

Symptom	First checks
Host does not start	Confirm Host.exe and the CEF runtime files are beside it in Source/ThirdParty/Cef.
Browser is black or empty	Check the host/plugin package versions, URL loading, and Unreal logs for shared-resource failures.
Keyboard or mouse input fails	Confirm the session is visible, focused, and not covered by another widget.
WebSocket messages fail to decode	Ensure both ends use the same payload format and codec; verify protobuf message-type mappings.
Protobuf link/build errors	Rebuild the bundled libraries for the current MSVC toolchain and runtime configuration.

For diagnostics, enable bShowHostConsole in the Cef Web UI developer settings or call Open Dev Tools on a browser session.

Reference

• Plugin README - complete API-oriented setup and module notes.
• CefWebSocketServer README - server pipeline, codecs, console commands, and CVars.
• CefDispatch README - factory and typed-handler registration.
• CefProtobuf README - protobuf version, generation, and rebuild guidance.