Doc Menu

A Basic Example

The script for this example is also available at {ProjectDir}/OneJS/Samples/basic.tsx . To test it, you can change Live Reload component's Entry Script field to Samples/basic.js (note: this is always a .js file), then go into Playmode.

OneJS has 1 to 1 interop between Preact and UI Toolkit. All controls from UI Toolkit can be accessed from your JSX. The following sample code should be self-explanatory. And as you can see, you can use Preact here pretty normally.

import { h, render } from "preact"

const App = () => {
    return (
            <label text="Select something to remove from your suitcase:" />
                <toggle name="boots" label="Boots" value={true} />
                <toggle name="helmet" label="Helmet" value={false} />
                <toggle name="cloak" label="Cloak of invisibility" />
                <button name="cancel" text="Cancel" onClick={(e) => log(} />
                <button name="ok" text="OK" />
                <textfield onInput={(e) => log(e.newData)} />

render(<App />, document.body)

Here's a quick list of UI Toolkit's default controls:

export interface IntrinsicElements {
    div: VisualElement
    box: Box
    text: TextElement
    label: Label
    image: Image
    foldout: Foldout
    template: Template
    instance: Instance
    templatecontainer: TemplateContainer
    button: Button
    repeatbutton: RepeatButton
    toggle: Toggle
    scroller: Scroller
    slider: Slider
    sliderint: SliderInt
    minmaxslider: MinMaxSlider
    enumfield: EnumField
    progressbar: ProgressBar

    textfield: TextField
    integerfield: IntegerField
    floatfield: FloatField
    vector2field: Vector2Field
    vector2intfield: Vector2IntField
    vector3field: Vector3Field
    vector3intfield: Vector3IntField
    vector4field: Vector4Field
    rectfield: RectField
    rectintfield: RectIntField
    boundsfield: BoundsField
    boundsintfield: BoundsIntField

    listview: ListView
    scrollview: ScrollView
    treeview: TreeView
    popupwindow: PopupWindow

    gradientrect: GradientRect
    flipbook: Flipbook
    simplelistview: SimpleListView