🖥️ WebUI
Class for spawning a dynamic Web Browser.
💂Authority
This class can only be spawned on 🟧 Client.
tip
Our WebUI implementation is built using the last versions of Chromium Embedded Framework.
Proprietary Codecs
Proprietary Codecs like MP3 and AAC are not supported on public CEF builds. We recommend converting your media files to WEBM or OGG.
🎒 Examples
Client/Index.lua
-- Loading a local file
local my_ui = WebUI(
"Awesome UI", -- Name
"file://UI/index.html", -- Path relative to this package (Client/)
true, -- Is Visible
)
-- Loading a Web URL
local my_browser = WebUI(
"Awesome Site", -- Name
"https://nanos.world", -- Web's URL
true, -- Is Visible
)
-- Loading a local file from other package
local my_ui = WebUI(
"Awesome Other UI", -- Name
"file://other-package/Client/UI/index.html",
true, -- Is Visible
)
Using a WebUI as Mesh Material
Client/Index.lua
-- Spawns a WebUI with is_visible = false, is_transparent = false, auto_resize = false and size of 500x500
local my_ui = WebUI("Awesome Site", "https://nanos.world", false, false, false, 500, 500)
-- Spawns a StaticMesh (can be any mesh)
local static_mesh = StaticMesh(Vector(0, 0, 100), Rotator(), "nanos-world::SM_Cube")
-- Sets the mesh material to use the WebUI
static_mesh:SetMaterialFromWebUI(my_ui)
Communicating between Lua and JS (WebUI)
Client/Index.lua
local my_ui = WebUI("Awesome UI", "file://UI/index.html")
local param1 = 123
local param2 = "hello"
-- Calls a JS event
my_ui:CallEvent("MyEvent", param1, param2)
-- Subscribes to receive JS events
my_ui:Subscribe("MyAnswer", function(param1)
Console.Log("Received back! %s", param1)
-- Will output 'Received back! Hey there!'
end)
script.js
// Register for "MyEvent" from Lua
Events.Subscribe("MyEvent", function(param1, param2) {
console.log("Triggered! " + param1 + " " + param2);
// Will output 'Triggered! 123 hello'
// Triggers "MyAnswer" on Lua
Events.Call("MyAnswer", "Hey there!");
})
Pretty Scroll Bar
Since we migrated from Webkit to CEF, some scrollbars got ugly. Here's a small CSS snippet to make them almost like the Webkit ones:
::-webkit-scrollbar {
width: 6px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #494949;
}
body {
scrollbar-gutter: stable both-edges;
}
More related examples:
User Interfacecore-concepts/scripting/user-interfaceBasic HUD (HTML)getting-started/tutorials-and-examples/basic-hud-htmltip
You can use the output Texture from a Canvas with :SetMaterialFromWebUI() method!
🛠 Constructors
Default Constructor
local my_webui = WebUI(name, path, visibility?, is_transparent?, auto_resize?, width?, height?)
Type | Name | Default | Description |
---|---|---|---|
string | name | Used for debugging logs | |
HTML Path | path | Web URL or HTML File Path as file://my_file.html | |
WebUIVisibility | visibility | WebUIVisibility.Visible | if WebUI is visible on screen |
boolean | is_transparent | true | if WebUI background is transparent |
boolean | auto_resize | true | if should auto resize when screen changes it's size (useful OFF when you are painting meshes with WebUI) |
integer | width | 0 | size of the WebUI width when you are not using auto_resize |
integer | height | 0 | size of the WebUI height when you are not using auto_resize |
🔍 HTML Path Searchers
Loading a .html file supports the following searchers, which are looked in the following order:
- Relative to
current-file-path/
- Relative to
current-package/Client/
- Relative to
current-package/
- Relative to
Packages/
🗿 Static Functions
This entity doesn't have own static functions.🦠 Functions
Returns | Name | Description | |
---|---|---|---|
BringToFront | Puts this WebUI in the front of all WebUIs | ||
CallEvent | Calls an Event on the Browser's JavaScript | ||
Destroy | Destroys this Browser | ||
LoadURL | Loads a new File/URL in this Browser | ||
LoadHTML | Loads a pure HTML in this Browser | ||
ExecuteJavaScript | Executes a JavaScript code in the Browser | ||
SetFocus | Enables the focus on this browser (i.e. can receive Keyboard input and will trigger input events) | ||
RemoveFocus | Removes the focus from this WebUI (and sets it back to game viewport) | ||
SetLayout | Sets the Canvas Layout on Screen | ||
SetFreeze | Freezes the WebUI Rendering to the surface (it will still execute the JS under the hood) | ||
SetVisibility | Sets the visibility in screen | ||
Sound | SpawnSound | Spawns a Sound entity to plays this WebUI sound | |
SendMouseWheelEvent | Sends a Mouse Event into the WebUI programatically | ||
SendKeyEvent | Sends a Key Event into the WebUI programatically | ||
SendMouseMoveEvent | Sends a Mouse Move Event into the WebUI programatically | ||
SendMouseClickEvent | Sends a Mouse Click into the WebUI programatically | ||
boolean | IsValid | Gets if this entity is Valid | |
integer | GetID | Gets the network ID of this entity | |
Vector2D | GetSize | Gets the current size of this WebUI | |
![]() | table | GetClass | Gets the class of this entity |
WebUIVisibility | GetVisibility | Returns the current WebUI visibility | |
boolean | IsFrozen | Returns if this WebUI is currently frozen | |
function | Subscribe | Subscribes for an Event | |
Unsubscribe | Unsubscribes from all subscribed Events in this Entity and in this Package, optionally passing the function to unsubscribe only that callback |

BringToFront
Puts this WebUI in the front of all WebUIs
my_webui:BringToFront()

CallEvent
Calls an Event on the Browser's JavaScript
my_webui:CallEvent(event_name, args...)
Type | Parameter | Default | Description |
---|---|---|---|
string | event_name | The Event Name to trigger the event | |
any | args... | Arguments to pass to the event |

Destroy
Destroys this Browser
my_webui:Destroy()

LoadURL
Loads a new File/URL in this Browser
my_webui:LoadURL(url)
Type | Parameter | Default | Description |
---|---|---|---|
HTML Path | url |

LoadHTML
Loads a pure HTML in this Browser
my_webui:LoadHTML(html)
Type | Parameter | Default | Description |
---|---|---|---|
string | html |

ExecuteJavaScript
Executes a JavaScript code in the Browser
Note: This method is experimental and should be used cautiously. Events are still the preferred way of communicating between Packages and WebUI.
my_webui:ExecuteJavaScript(javascript_code)
Type | Parameter | Default | Description |
---|---|---|---|
string | javascript_code |

SetFocus
Enables the focus on this browser (i.e. can receive Keyboard input and will trigger input events
Note: Only one browser can have focus per time.
my_webui:SetFocus()

RemoveFocus
Removes the focus from this WebUI (and sets it back to game viewport)
You MUST call this after you don't need keyboard input anymore
my_webui:RemoveFocus()

SetLayout
Sets the Canvas Layout on Screen
my_webui:SetLayout(screen_location?, size?, anchors_min?, anchors_max?, alignment?)
Type | Parameter | Default | Description |
---|---|---|---|
Vector2D | screen_location? | Vector(0, 0) | |
Vector2D | size? | Vector(0, 0) | |
Vector2D | anchors_min? | Vector(0, 0) | |
Vector2D | anchors_max? | Vector(1, 1) | |
Vector2D | alignment? | Vector(0.5, 0.5) |

SetFreeze
Freezes the WebUI Rendering to the surface (it will still execute the JS under the hood)
my_webui:SetFreeze(freeze)
Type | Parameter | Default | Description |
---|---|---|---|
boolean | freeze |

SetVisibility
Sets the visibility in screen
my_webui:SetVisibility(visibility)
Type | Parameter | Default | Description |
---|---|---|---|
WebUIVisibility | visibility |

SpawnSound
Spawns a Sound entity to plays this WebUI sound
Returns Sound
local ret = my_webui:SpawnSound(location?, is_2d?, volume?, inner_radius?, falloff_distance?, attenuation_function?)
Type | Parameter | Default | Description |
---|---|---|---|
Vector | location? | Vector(0, 0, 0) | |
boolean | is_2d? | true | |
float | volume? | 1.0 | |
integer | inner_radius? | 400 | |
integer | falloff_distance? | 3600 | |
AttenuationFunction | attenuation_function? | AttenuationFunction.Linear |

SendMouseWheelEvent
Sends a Mouse Event into the WebUI programatically
my_webui:SendMouseWheelEvent(mouse_x, mouse_y, delta_x, delta_y)
Type | Parameter | Default | Description |
---|---|---|---|
integer | mouse_x | Position X of the mouse | |
integer | mouse_y | Position Y of the mouse | |
float | delta_x | ||
float | delta_y |

SendKeyEvent
Sends a Key Event into the WebUI programatically
my_webui:SendKeyEvent(key_type, key_code, modifiers?)
Type | Parameter | Default | Description |
---|---|---|---|
WebUIKeyType | key_type | ||
integer | key_code | ||
WebUIModifier | modifiers? | WebUIModifier.None | Supports several modifiers separating by | (using bit-wise operations) |

SendMouseMoveEvent
Sends a Mouse Move Event into the WebUI programatically
my_webui:SendMouseMoveEvent(mouse_x, mouse_y, modifiers?, mouse_leave?)
Type | Parameter | Default | Description |
---|---|---|---|
integer | mouse_x | Position X of the mouse | |
integer | mouse_y | Position Y of the mouse | |
WebUIModifier | modifiers? | WebUIModifier.None | Supports several modifiers separating by | (using bit-wise operations) |
boolean | mouse_leave? | false |

SendMouseClickEvent
You must send both Down and Up to make it work properly
my_webui:SendMouseClickEvent(mouse_x, mouse_y, mouse_type, is_mouse_up, modifiers?, click_count?)
Type | Parameter | Default | Description |
---|---|---|---|
integer | mouse_x | Position X of the mouse | |
integer | mouse_y | Position Y of the mouse | |
WebUIMouseType | mouse_type | Which mouse button | |
boolean | is_mouse_up | Whether the event was up or down | |
WebUIModifier | modifiers? | WebUIModifier.None | Supports several modifiers separating by | (using bit-wise operations) |
integer | click_count? | 1 | Use 2 for double click event |

IsValid
Gets if this entity is Valid
Returns boolean
local ret = my_webui:IsValid()

GetID
Gets the network ID of this entity
Returns integer
local ret = my_webui:GetID()

GetSize
Gets the current size of this WebUI
Returns Vector2D
local ret = my_webui:GetSize()

GetClass
Gets the class of this entity
Returns table
local ret = my_webui:GetClass()

GetVisibility
Returns the current WebUI visibility
Returns WebUIVisibility
local ret = my_webui:GetVisibility()

IsFrozen
Returns if this WebUI is currently frozen
Returns boolean
local ret = my_webui:IsFrozen()

Subscribe
Subscribes for an Event
Returns function (the subscribed callback itself)
local ret = my_webui:Subscribe(event_name, callback)
Type | Parameter | Default | Description |
---|---|---|---|
string | event_name | The Event Name to subscribe | |
function | callback | The callback function to execute |

Unsubscribe
Unsubscribes from all subscribed Events in this Entity and in this Package, optionally passing the function to unsubscribe only that callback
my_webui:Unsubscribe(event_name, callback?)
Type | Parameter | Default | Description |
---|---|---|---|
string | event_name | The Event Name to unsubscribe | |
function | callback? | nil | The callback function to unsubscribe |
🚀 Events
Name | Description | |
---|---|---|
Fail | Triggered when this page fails to load | |
Ready | Triggered when this page is fully loaded |

Fail
Triggered when this page fails to load
WebUI.Subscribe("Fail", function(error_code, message)
end)

Ready
Triggered when this page is fully loaded
WebUI.Subscribe("Ready", function()
end)