Skip to content

Custom UI

Selene uses Chromium Embedded Framework (CEF) to render UI provided by addons. This allows for UI to be implemented using typical web technologies such as HTML, CSS, and JavaScript, as well as related frameworks.

Loading local files in CUI

Due to secure browser standards, local files cannot be accessed or loaded directly. Selene implements a godot-file pseudo-protocol for loading files such as images or stylesheets.

This example would load cat.png directly from one of the legal search paths.

<img src="https://godot-file/cat.png" />

Legal search paths include:

  • <YourSeleneDirectory>/ui/**
  • <YourSeleneDirectory>/bundles/**

Loading resources in CUI

While loading local files should suffice in most cases, you can also load packaged resources by using the godot-resource pseudo-protocol. These resources are loaded via Godot’s resource system. At the moment, only Images and Texture2Ds are supported.

This example would load selene-logo.png through Godot’s resource loader.

<img src="https://godot-resource/selene-logo.png" />

JavaScript Bindings

Selene provides a JavaScript library to make interacting with the game easier.

Terminal window
npm install selene-cui-js

See examples below for how this library is used.

Interacting with CUI from Lua

Your lua scripts can interact with the UI by firing custom events.

In your UI’s javascript, you can listen for these events using the window object. Note that this only supports CustomEvents and you should therefore choose an event name that isn’t already used by the browser. Your event data will be found within the detail property.

import { onEvent } from 'selene-cui-js';
onEvent('helloEvent', (data) => {
// or
window.addEventListener('helloEvent', (event) => {

Interacting with Lua from CUI

Your UI can interact with Lua by sending POST requests to the godot-rpc pseudo-protocol, similar to how you would interact with a backend.

import { rpc } from 'selene-cui-js';
rpc('helloWorld', {
myMessage: 'Hello, world!',
// or
fetch('https://godot-rpc/helloWorld', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
body: JSON.stringify({
myMessage: 'Hello, world!',

Builtin Procedures

Selene comes with a few builtin procedures that you can use without having to implement them yourself. These inbuilt procedures are also exposed as utility functions in the selene-cui-js library.

quitQuits the gameNone
open-urlOpens a URL in the system’s default browser- url: The URL to open