ScriptEngine is for runtime UI. If you want to use OneJS for Editor UI, check out the Editor UI section.

When we say WorkingDir, we’ll always mean your Editor WorkingDir as opposed to the Player WorkingDir. By default, this is {ProjectDir}/App.

The core of OneJS is the ScriptEngine prefab. As shown in the Getting Started guide, it sets up everything the first time you enter Playmode with the prefab in the scene. This includes all the essential files for your JS setup (tsc, tailwind, esbuild, etc.) under the WorkingDir folder, which you can customize if needed.

On this prefab, there are a few components. We’ll go through them here in the following sections. Also, most fields on those components have mouseover tooltips that explain what they do as well.

UI Document

This comes straight from UI Toolkit. It’s the document model used to handle UI at runtime (not needed for Editor UI). By default, it uses the PanelSettings provided by OneJS. If you don’t want to mess with the default, you’re free to supply your own. With PanelSettings, you can tweak stuff like ScaleMode and Target Texture.

You can create a new one from the Project Create menu by selecting UI Toolkit > Panel Settings Asset.

ScriptEngine

The ScriptEngine component lets you configure the paths for your WorkingDir for both editor and standalone builds.

Preloads are a list of JS files that will be preloaded before your entry script. This is useful for things like polyfills or other JS files that need to be loaded before the rest of your code.

Globals are a list of global objects that will be available in your scripts. Every entry here is an object+name pair where the object can be any serialized Unity object (e.g. GameObject, Component, Texture, ScriptableObject, etc.) and the name is the name you want to use in JavaScript.

Here’s an example of dragging a MonoBehaviour into the Globals list (from Ult Meter Tutorial):

StyleSheets are a list of USS files that will be loaded. USS files can be created in Unity via the UI Toolkit > Style Sheet Project Create menu. They are basically just text files with a .uss extension. And they are a subset of CSS. See Introduction to USS   for more info.

If you use Tailwind, make sure to add the tailwind.uss file to this list. This file is auto-generated by the tailwind watch task in VSCode.

DTS Generator is a tool that generates TypeScript definition files from C# types. We’ll go into more detail about this on the DTS Generation page.

Runner

The Runner component takes care of running, watching, and live-reloading your scripts. The settings on it should be pretty self-explanatory. Entry File is @outputs/esbuild/app.js by default because that’s where the esbuild watch task outputs the bundled JS. You can change this if you want to use a different entry file.

Bundler

The Bundler component takes care of creating essential files in the Workingdir if they are missing and also bundling and extraction for standalone builds.

Default Files contains a list of path-to-file pairs. The path is relative to the WorkingDir and the file is the TextAsset  to copy (if not found).

Version and Force Extract are used for standalone builds. When the Standalone Player detects a version mismatch, it will empty out your Player WorkingDir and extract the new bundle. When Force Extract is turned on, it will always extract the bundle regardless of version. This is useful for testing.

bundle.tgz is the bundle file that will be created when you build your project. This file contains all the files in the WorkingDir according to your Includes and Ignore List settings with the latter taking precedence, so for example, you can include @outputs and ignore @outputs/tsc.

It’s recommended to use your own bundle.tgz file instead of the one provided by OneJS. You can use any file with a .bytes extension in your Unity Project.

Screen Monitor

This is a simple component that watches the screen size and sets the right class name on the root element in your UIDocument (onejs-media-sm, onejs-media-md, onejs-media-lg, onejs-media-xl, or onejs-media-xxl). Tailwind will use this for responsive styles. You can also make use of them as you see fit.