ui

Tinox-UI -- a server-driven web UI framework (Vaadin/Phoenix LiveView-style): write your whole UI as a Tinox component tree running on the server, a thin generic JS client renders it and ships events back over a persistent WebSocket.

Annotated counter

import tinox.core.ui;
import tinox.core.websocket;
import tinox.core.http_server;

// Annotation-driven: no HttpServer/WsServer wiring anywhere in the
// program -- @TinoxUIApp generates the HTTP shell/client-JS server and
// the WebSocket accept loop, calling the class's own @View method to
// build/rebuild the component tree (full-resend rendering, automatic
// re-render after every event).
@TinoxUIApp(8080, 8081)
class CounterApp
{
    var clicks: Int64;

    @View
    fn render() -> Component
    {
        let app: CounterApp = this;
        return Component::vbox([
            Component::label("Clicks: " + this.clicks.toString()),
            Component::button("Click me", fn(v: String) { app.clicks = app.clicks + 1; })
        ]);
    }
}

Annotated counter entry point

import CounterApp;

// Every Tinox program still needs its own class Main as the mandatory
// entry point (since 2026-08-09) -- @TinoxUIApp's generated HTTP/WS
// servers spawn and run alongside it on their own threads, they don't
// replace it. This is the required sibling file for the annotated app
// above.
class Main
{
    fnc main() -> Int32
    {
        return 0;
    }
}

Widgets and routing

import tinox.core.ui;
import tinox.core.websocket;
import tinox.core.http_server;

// A wider tour of the widget library plus client-side routing:
// Component::link(text, path, onNavigate) reports its target path back
// through the same onEvent/dispatchEvent pipeline every other
// interactive widget uses -- an app switches views by keeping its own
// current-view state (a plain instance field) and branching inside its
// own @View method, no separate routing annotation needed.
@TinoxUIApp(8080, 8081)
class ShowcaseApp
{
    var isAbout: Bool;
    var quantity: Float64;

    @View
    fn render() -> Component
    {
        let app: ShowcaseApp = this;
        let nav: Component = Component::hbox([
            Component::link("Home", "/", fn(p: String) { app.isAbout = false; }),
            Component::link("About", "/about", fn(p: String) { app.isAbout = true; })
        ]);
        if this.isAbout
        {
            return Component::vbox([nav, Component::heading("About", 1)]);
        }
        return Component::vbox([
            nav,
            Component::heading("Widgets", 1),
            Component::numberField(this.quantity, fn(v: Float64) { app.quantity = v; }),
            Component::progressBar(this.quantity)
        ]);
    }
}

Widgets and routing entry point

import ShowcaseApp;

class Main
{
    fnc main() -> Int32
    {
        return 0;
    }
}

class Assets

Methods

@JsonSerializableclass Component

Fields

Methods

class DataGrid<T>

Methods

class GridColumn<T>

Fields

Methods

@JsonSerializableclass TinoxUIPatchMessage

Fields

@JsonSerializableclass TinoxUIPatchOp

Fields

class TinoxUIRuntime

Methods