Skip to Content
🚀 OneJS is now open source! Asset Store purchase will grant you lifetime access to our upcoming game-ready UI Library.

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

index.tsx
import { h, render } from "preact" import { useEffect, 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)

Disclaimer

Runtime USS was made to work by using and modifying some internal Unity C# code. At the time, it was meant as a quick hack because Unity had said they were working on their own runtime-friendly Stylesheets. But as of right now, they have not done that yet.

If you work for a company and are worried about potential license issue, you have 4 options currently:

  • Wait for Unity to support runtime stylesheet, or
  • Wait for us to fully re-implement custom stylesheets (we will do this if Unity takes too long), or
  • Don’t use runtime uss, styled, and emo, and strip OneJS.CustomStyleSheets from your project, or
  • Get Full-access source code license from Unity.