# 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:

```text
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:

```http
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:

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

Selecting an actor also loads a Details pane using:

```http
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.

## Run

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

Then run:

```bash
npm install
npm run dev
```

Open:

```text
http://127.0.0.1:5173/
```

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

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

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

```bash
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.