> ## Documentation Index
> Fetch the complete documentation index at: https://docs.streampixel.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Communicating with Unreal Engine

> Send and receive data between your web app and Unreal Engine using the Web SDK.

This page covers **SDK-specific** communication — the JavaScript methods and event listeners exposed by `pixelStreaming` and `emitUIInteraction`.

<Info>
  Other ways to talk to Unreal exist:

  * **Default frontend**: pass JSON via URL parameters at launch — see [Frontend side messaging](/resources/json-message-communication/frontend-side-sending-and-receiving-json).
  * **Iframe**: use `postMessage` — see [Iframe communication](/resources/iframe-integration/frontend-and-application-communication).
  * **Web SDK**: this page.

  Each path has its own API. Use whichever matches the way you embed the stream.
</Info>

## Sending data to UE

### UI interaction (custom JSON)

Send arbitrary JSON to UE. Primary method for custom web → UE messaging.

```javascript theme={"dark"}
appStream.stream.emitUIInteraction({
  type: 'action',
  value: 'jump'
});

appStream.stream.emitUIInteraction({
  command: 'setColor',
  color: '#ff0000',
  intensity: 0.8
});
```

Handle these messages in UE via the **Pixel Streaming Input Component's** `OnInputEvent` delegate or `FPixelStreamingInputHandler` in C++.

### Console commands

Run UE console commands remotely:

```javascript theme={"dark"}
pixelStreaming.emitConsoleCommand('stat fps');
pixelStreaming.emitConsoleCommand('r.SetRes 1920x1080f');
pixelStreaming.emitConsoleCommand('stat unit');
```

<Warning>
  Console commands run with the UE app's permissions. Only commands that are enabled in your UE build will work — restrict which commands can be executed remotely in your build.
</Warning>

### Text input

Send text to UE's currently focused text field. Mostly used in response to UE's on-screen keyboard request:

```javascript theme={"dark"}
pixelStreaming.streamMessageController
  .toStreamerHandlers.get('TextboxEntry')?.(['Hello from the web!']);
```

## Receiving data from UE

Listen for custom messages sent from UE → web:

```javascript theme={"dark"}
pixelStreaming.addResponseEventListener('handle_responses', (response) => {
  const data = JSON.parse(response);

  switch (data.type) {
    case 'gameState':
      updateGameUI(data.state);
      break;
    case 'notification':
      showNotification(data.message);
      break;
  }
});
```

In UE, send messages with the **Send Pixel Streaming Response** Blueprint node or `UPixelStreamingDelegates::SendPixelStreamingResponse` in C++.

## On-screen keyboard

When UE requests text input via `showOnScreenKeyboard`, the SDK handles it automatically:

<Steps>
  <Step title="UE sends showOnScreenKeyboard">
    With the current text content and cursor position.
  </Step>

  <Step title="SDK shows the input modal">
    The built-in EditTextModal opens.
  </Step>

  <Step title="User confirms input">
    Types and submits.
  </Step>

  <Step title="SDK sends text back to UE">
    Via the `TextboxEntry` handler.
  </Step>
</Steps>

<Info>
  No code needed on your side — the SDK manages the modal and round-trip automatically.
</Info>

## Round-trip example

```javascript theme={"dark"}
// Web → UE: Request the score
appStream.stream.emitUIInteraction({
  type: 'request',
  action: 'getScore'
});

// UE → Web: Receive it
pixelStreaming.addResponseEventListener('handle_responses', (response) => {
  const data = JSON.parse(response);
  if (data.type === 'scoreUpdate') {
    document.getElementById('score').textContent = data.score;
  }
});
```

## Next

<CardGroup cols={2}>
  <Card title="pixelStreaming API" icon="code" href="/resources/web-sdk/api-reference/pixelstreaming">
    Full reference for `emitConsoleCommand`, `addResponseEventListener`, etc.
  </Card>

  <Card title="Unreal-side blueprints" icon="cube" href="/resources/json-message-communication/unreal-side-sending-and-receiving-json">
    The matching UE-side setup for receiving and sending JSON.
  </Card>
</CardGroup>