DocsWikiVanillaBoxStore
VERSION
Doc Menu
Why OneJSGetting StartedTutorial 101C#-JS WorkflowDeploymentLimitations

Engine

ScriptEngineLive ReloadBundlerDom

Styling

Runtime USSStyled CompsTailwind

Misc

Async AwaitCustom ControlsC# to TS Def Converter

Samples

Basic UsageMain SampleFortnite UIOverwatch UI

Runtime USS

One of the current limitations of UI Toolkit is its inability to load USS files at runtime (from strings). So, we decided to fill in the gap.

OneJS allows you to load USS strings dynamically at runtime via document.addRuntimeUSS().

import { h, render } from "preact"
import { useEffect } from "preact/hooks"
import { useState } from "preact/hooks"

const App = () => {
    const [text, setText] = useState("#App {\n    padding: 100;\n}")

    const setUSS = () => {
        document.clearRuntimeStyleSheets()
        document.addRuntimeUSS(text)
    }

    useEffect(setUSS, [])

    return <div name="App">
        <textfield multiline={true} onValueChanged={(e) => setText(e.newValue)} value={text}></textfield>
        <div><label text="Lorem Ipsum" /></div>
        <button onClick={setUSS} text="Set USS"></button>
    </div>
}

render(<App />, document.body)

Limitations

Runtime USS was made to work by separating/decoupling Asset path management (editor mode feature) from the StyleSheet importer. So any path-based values such as image and font urls are currently not supported in USS strings. To use these, please either go for inline styles or static uss files.