How to Set Up a Web Interface with Unreal Engine Remote Control

What will you learn in this guide?

Unreal Engine Remote Control is a system for managing project content outside the engine’s editor interface. It accepts HTTP requests and WebSocket messages through a web server, allowing web applications to read and modify properties exposed to Blueprint and Python. This guide covers enabling the Remote Control Web Interface plugin, bringing properties from a Remote Control Preset into a web application, and controlling them with widgets in the interface.

Alongside remote control, the system also allows multiple web clients to connect to the same project. Changes made in one client are reflected in the others through the web server. This approach may be useful in a shared live workspace or when a custom interface is needed for specific project controls. Since the feature is marked beta, its limitations and operating conditions should be tested before using it in projects that will be published.

Requirements and setup

The official Remote Control Web Interface guide specifies NodeJS 8 as the minimum version and 14.15.5 as the maximum. This is the version range stated in the documentation; before installation, check compatibility with your Unreal Engine version and existing development environment. The sources do not give a specific Unreal Engine version number, so no additional assumptions about version compatibility are made here.

After opening the project in Unreal Editor, go to Edit > Plugins from the main menu. Find and enable Remote Control Web Interface in the Messaging category, then restart the engine. To check whether the plugin has started the web application, open Output Log via Window > Developer Tools > Output Log and filter for “remote control web”. The official guide gives an example of a successful startup message indicating that the web application is running on port 7000.

You can change the port used by Remote Control Web Interface in Plugins > Remote Control under Edit > Project Settings. To open the web application on the same machine as the engine, enter 127.0.0.1:7000 in your browser’s address bar. For access from other machines, the official documentation refers users to the Quick Start instructions on exposing the Remote Control API to other computers. Since this guide does not provide additional network configuration steps, it covers local connections only.

Step by step: connect a preset to the web interface

1. Prepare the preset. The Remote Control system can operate on functions and properties exposed to Blueprint and Python. You can use a Remote Control Preset to expose project content to the API without writing code. The web application reads the contents of the preset open in the Unreal session. Before moving to the interface, make sure the properties you want to control are included in the preset.

2. Open the web application. Once the plugin is running, use one of the supported browsers. The official guide lists Chrome, Firefox and Safari as supported browsers. If you’re opening the web application on the same machine, use the local address provided above. If the interface doesn’t load, check the startup message in Output Log and make sure you’re connecting to the correct port.

3. Switch to Design mode. When the page opens, you may see an empty Remote Control application. Use the Control toggle in the interface to switch to Design mode. Then inspect the preset properties in the Properties tab. Dragging a property from the list on the left and dropping it into the interface creates a widget linked to that property. Drop it onto a panel to add the widget to that panel; if no panel exists yet, the application creates one and places the widget inside it.

4. Choose a widget type to suit your needs. The interface includes widgets such as buttons, color pickers, dials, dropdowns, joysticks, labels, lists, panels, sliders, tabs, text, toggles and vectors. A panel contains other widgets and must be added first. A List widget can contain panels, letting you present different groups of controls in tabs. Some data types can be displayed in different formats; for example, vector data can be shown as a joystick, dial or slider.

5. Test in Control mode. Once you’ve placed the widgets, switch back to Control mode. Change a property in the web interface and check whether it updates in Unreal Editor. To see changes while the Editor is in the background, it’s recommended that you disable Use Less CPU when in Background, found under General > Performance in Edit > Editor Preferences.

6. Save the layout. To save the web interface layout, save the relevant Remote Control Preset in Unreal Editor. The application uses the last saved layout the next time it opens. During design, you can change a widget’s label in its settings panel when it’s selected; if the widget is linked to a property, you can also change which property it controls. Unneeded widgets can be removed individually or together with their containing panel.

Impact on architecture and archviz workflows

For architecture, interior design and archviz teams, the main benefit of this approach is the ability to group selected project controls in a web interface without giving users access to the entire editor. For example, a team can design an interface to suit its workflow, but the parameters to be controlled must first be exposed through a Remote Control Preset. The sources do not give specific examples of architectural parameters, so which scene properties to use depends on the project.

Multiple clients can work at the same time, with changes relayed to the others—something that may be useful for shared live reviews. You can add a Level Snapshots tab to the web application to capture new images of a level or switch to a previously captured image; the Level Snapshots plugin must be enabled for this. The Sequencer tab lists sequences in the project and lets you start or resume sequences in the current level. However, although the page lists all project sequences, only those in the current level can be played; filtering is based on asset path, not level membership.

Offices and students should consider installation compatibility, network access and the beta status. The NodeJS range in the official documentation is limited to older versions; in addition, the system is disabled by default in packaged projects and in game mode. The documented startup flags are used to enable it in those modes:

-RCWebControlEnable -RCWebInterfaceEnable

Add these flags to the command line when launching the Unreal project. Since the feature is identified as beta, it’s advisable to test the intended use case separately before a release or client presentation.

Common issues

If the web application won’t open, first confirm that the plugin is enabled and the engine has been restarted. Then look for the startup entry in Output Log using the “remote control web” filter. If the port setting has been changed, the port in the browser address must match. If updates aren’t visible in the Editor, check the setting for reduced CPU usage in the background.

If a property isn’t listed, check whether it’s included in the open Remote Control Preset. You can use multiple presets, but only one preset can be open at a time. Also, the interface layout may not be preserved as expected the next time the application opens unless the relevant preset has been saved. Even if the Level Snapshots or Sequencer tabs are visible, make sure the required plugin or level conditions are met for the relevant feature.

Next steps

Start by checking the local connection with a single preset and a small number of widgets. Then arrange the required interface using tabs and panels, and save the preset. If you plan to use multiple clients, Level Snapshots or Sequencer, test each feature under its own operating conditions. For access from other computers, consult the official Quick Start instructions; don’t guess at network settings that aren’t detailed in this source.

Source and license

This content has been adapted into Turkish from Epic Games’ official Unreal Engine Remote Control and Remote Control Web Application documentation. Both sources are provided under a free license.