Use the /collab command on Discord to gain access to the OneJS private repo. The repo offers early access to the latest features and fixes that may not yet be available on the Asset Store. An early preview of OneJS V2 is available on branch onejs-v2. It brings major performance improvements, zero-allocation interop, and a new esbuild workflow.
Menu

Simple Modal Example

Toggle using the Space key.

import { render, h } from "preact"
import { useState } from "preact/hooks"
import { KeyCode } from "UnityEngine"
import { AttachToPanelEvent, KeyDownEvent, VisualElement } from "UnityEngine/UIElements"

document.addRuntimeUSS(`
    #wrapper {
        justify-content: center;
        align-items: center;
    }
    #content {
        width: 80%;
        height: 80%;
        background-color: gold;
        border-radius: 10px;
    }
    #modal {
        width: 600px;
        height: 300px;
        position: absolute;
        background-color: maroon;
        top: 10px;
        padding: 20px;
        color: white;
        align-items: center;
        display: none;
    }
`)

const App = () => {
    const [showModal, setShowModal] = useState(false)

    const onAttachToPanel = (e: AttachToPanelEvent) => {
        (e.target as VisualElement).Focus()
    }

    const onKeyDown = (e: KeyDownEvent) => {
        if (e.keyCode == KeyCode.Space) {
            setShowModal(!showModal)
        }
    }

    // https://forum.unity.com/threads/how-to-get-keydownevent-to-work.863080/#post-5686054
    return <div id="wrapper" class="w-full h-full" focusable={true} onAttachToPanel={onAttachToPanel} onKeyDown={onKeyDown}>
        <div id="content"></div>
        <div id="modal" style={{ display: showModal ? "Flex" : "None" }}>Modal</div>
    </div >
}

render(<App />, document.body)