VanillaBox Console has been released! It's a free app that lets you quickly test out Unity runtime features. Check it out here!

Also, a newly revamped website with improved docs is coming soon. Stay tuned!

New features and bug fixes will land in the private github repo before becoming available on the Asset Store. To request access to the repo, please send an email or pm Singtaa#4915 on Discord with your Github username and OneJS Order/INV number.

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.