unreal-outliner-control/README.md

Unreal Outliner Control

A Vite + React + TypeScript web app that mirrors the Unreal Editor Outliner for the currently open world.

The app prefers Unreal Remote Control's WebSocket server, then falls back to HTTP when the socket is unavailable.

By default it connects to:

ws://127.0.0.1:30020

When WebSocket is available, the app sends Unreal's Remote Control http WebSocket message type and tunnels the same HTTP route:

PUT /remote/object/call

The HTTP fallback request goes through Vite's dev proxy and targets http://127.0.0.1:30010/remote/object/call by default. Both transports call:

{
  "objectPath": "/Script/UnrealEd.Default__EditorActorSubsystem",
  "functionName": "GetAllLevelActors",
  "parameters": {},
  "generateTransaction": false
}

Selecting an actor also loads a Details pane using:

PUT /remote/object/describe
PUT /remote/object/property

The property request uses READ_ACCESS and omits propertyName, which asks Unreal for all readable properties exposed on that UObject.

Details payloads are cached in browser localStorage for five minutes per object path. When you reselect an object, cached properties render immediately and the app refreshes them from Unreal in the background.

Asset-looking property values also request /remote/object/thumbnail and cache thumbnail data in localStorage, so mesh/material fields can render closer to Unreal's Details panel.

Run

Start Unreal Editor, enable the Remote Control API, and make sure it is listening on 127.0.0.1:30010.

Then run:

npm install
npm run dev

Open:

http://127.0.0.1:5173/

If your Unreal Remote Control HTTP server is on another URL:

set UNREAL_REMOTE_URL=http://127.0.0.1:30010
npm run dev

If your Unreal Remote Control WebSocket server is on another URL:

set VITE_UNREAL_WS_URL=ws://127.0.0.1:30020
npm run dev

Useful UI Libraries

For an Unreal-like outliner, a custom tree/table gives the closest visual match because Unreal's Slate UI is not available as a web component.

Good libraries if the app grows:

• react-arborist for a performant tree with drag/drop and renaming.
• @tanstack/react-table plus @tanstack/react-virtual for a large outliner with resizable columns and virtualization.
• ag-grid-community if you want a full data-grid with tree data, sorting, filtering, and column tooling.

This first version keeps the UI custom so it can look closer to the Unreal Outliner screenshot.