> For the complete documentation index, see [llms.txt](https://docs.kojascripts.eu/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.kojascripts.eu/koja-lib/api-reference/client-api/dui.md).

# DUI

DUI (Dynamic UI) allows you to render a web page as a texture on any in-game surface — screens, billboards, laptops, phones, etc.

## CreateDui

Creates a new DUI instance.

```lua
local dui = KOJA.Client.CreateDui(opts)
```

| Field    | Type     | Default | Description                |
| -------- | -------- | ------- | -------------------------- |
| `url`    | `string` | —       | URL to load inside the DUI |
| `width`  | `number` | `1280`  | Texture width in pixels    |
| `height` | `number` | `720`   | Texture height in pixels   |

**Returns** `DuiInstance`

## DuiInstance

### Properties

| Property | Type     | Description             |
| -------- | -------- | ----------------------- |
| `id`     | `string` | Unique identifier       |
| `url`    | `string` | Current URL             |
| `handle` | `long`   | Native DUI handle       |
| `txd`    | `string` | Texture dictionary name |
| `txn`    | `string` | Texture name            |

### Methods

#### setUrl

Navigate the DUI to a new URL.

```lua
dui:setUrl(newUrl)
```

#### sendMessage

Send a JSON-serialisable message into the DUI's JavaScript.

```lua
dui:sendMessage(message)
```

The web page receives it as a `message` event. In your JS/TS:

```js
window.addEventListener('message', (event) => {
    console.log(event.data)
})
```

#### getHandle / getTextureDict / getTextureName

```lua
dui:getHandle()       -- long
dui:getTextureDict()  -- string (txd name)
dui:getTextureName()  -- string (txn name)
```

#### replaceTexture

Replace an existing game texture with this DUI's texture.

```lua
dui:replaceTexture(originalTxd, originalTxn)
```

#### removeReplaceTexture

Restore the original texture.

```lua
dui:removeReplaceTexture(originalTxd, originalTxn)
```

#### destroy

Destroy the DUI and free resources.

```lua
dui:destroy()
```

## Examples

### Replace a game texture (e.g. a TV screen)

```lua
local dui = KOJA.Client.CreateDui({
    url    = 'https://www.youtube.com/embed/dQw4w9WgXcQ',
    width  = 1280,
    height = 720,
})

-- Replace the TV screen texture
dui:replaceTexture('prop_tv_flat_01', 'prop_tv_flat_01_emissive')

-- When done:
dui:removeReplaceTexture('prop_tv_flat_01', 'prop_tv_flat_01_emissive')
dui:destroy()
```

### Draw DUI on a custom surface using scaleform

```lua
local dui = KOJA.Client.CreateDui({ url = 'nui://my-resource/screen.html' })

CreateThread(function()
    while true do
        Wait(0)
        DrawSprite(dui:getTextureDict(), dui:getTextureName(), 0.5, 0.5, 1.0, 1.0, 0.0, 255, 255, 255, 255)
    end
end)
```

### Send live data to the DUI

```lua
local dui = KOJA.Client.CreateDui({ url = 'nui://my-resource/hud.html' })

CreateThread(function()
    while true do
        Wait(1000)
        dui:sendMessage({
            action = 'updateSpeed',
            speed  = GetEntitySpeed(GetPlayerPed(-1)) * 3.6,
        })
    end
end)
```


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.kojascripts.eu/koja-lib/api-reference/client-api/dui.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.