A TypeScript UI framework for maintainable front-end applications

Strict separation between application logic, UI definition, and platform rendering.

Key properties

layers Layered architecture

Application logic, UI structure, and rendering are separated at the package level. The core framework has no knowledge of the browser or any specific platform.

science In-memory testability

The test handler renders your full component tree without a browser. Write unit tests against the same code that runs in production.

package_2 No runtime dependencies

The framework is entirely self-contained. State management, routing, rendering, and form validation are all built in.

code Declarative, typed UI

Views are composed through a TypeScript builder API. No JSX, no templates, no build step beyond TypeScript compilation.

terminal Client-side only

No server-side rendering, no hydration, no virtual DOM. These are deliberate constraints that keep the programming model simple.

Example

import { Activity, UI } from "talla-ui";

// An Activity defines application state and logic,
// along with a view that's rendered when active.
class MainActivity extends Activity {
  static override View() {
    // Views are composed declaratively using builder functions.
    // No JSX, no templates — just TypeScript.
    return UI.Column(
      UI.Text("Hello, world!").center(),
    ).flex().centerContent();
  }
}

// The web handler connects the framework to the browser.
// Swap in useTestContext() to run the same app in memory for testing.
import { useWebContext } from "@talla-ui/web-handler";
const app = useWebContext();
app.addActivity(new MainActivity(), true);

How it works

UI elements describe what should appear — without application logic or rendering concerns
Activities manage state, lifecycle, and navigation
Handlers render to a specific platform — currently the web, though the core is not browser-dependent
Test handler renders the full UI tree in memory, so you test the same code that runs in production
No virtual DOM — the renderer observes UI elements and updates the DOM directly

Core concepts

Activity Application state, lifecycle, and navigation

arrow_forward

UI Declarative builder functions for views

arrow_forward

Binding One-way reactive data binding

arrow_forward

ObservableObject Reactive state with events and tree structure

arrow_forward

useWebContext Initialize a web application

arrow_forward

useTestContext In-memory rendering for unit tests

arrow_forward