NBX get started

Getting Started with NBX

A Modern Block-Based UI Language for Server-Driven Applications

NBX is Nativeblocks declarative language designed specifically for building Server-Driven UI (SDUI) applications. It lets you create native user interfaces using composable blocks that work across platforms, write your UI logic once and deploy it everywhere.

Why NBX?

Declarative by Design Write UI code that reads like natural language. NBX's syntax mirrors how you think about interface design, making it easy to understand and maintain.

Built for Multi-Platform Create interfaces that adapt seamlessly across mobile, tablet, and desktop devices. Define responsive properties once and let NBX handle the rest.

Type-Safe from the Start Catch errors before they reach production. NBX includes built-in schema validation to ensure your interfaces are correct before deployment.

Interaction-First Approach Handle user interactions with a powerful action system that supports complex workflows, data flow, and conditional logic.

Your First NBX Interface

Here's a simple login screen to show you how NBX works:

frame(name="LoginScreen", route="/login") {
    var username: string = ""
    var password: string = ""

    block(keyType="ROOT", key="container")
        .prop(layout="vertical", padding="16")
        .slot("content") {

        block(keyType="INPUT", key="usernameField")
            .prop(placeholder="Username")
            .data(value=username)

        block(keyType="BUTTON", key="loginBtn")
            .prop(title="Login", variant="primary")
            .action(event="onPress") {
                trigger(keyType="VALIDATE", name="checkCredentials")
                    .data(username=username, password=password)
                    .then("LOGIN") {
                        trigger(keyType="NAVIGATE", name="goToDashboard")
                            .prop(route="/dashboard")
                    }
            }
    }
}

This example demonstrates the core building blocks of NBX: frames, blocks, variables, and actions working together to create an interactive interface.

Understanding NBX Fundamentals

Frames: Your App's Building Blocks

Think of frames as individual screens or components in your application. Each frame can define its own route, manage local variables, and contain a hierarchy of UI blocks. Frames are self-contained units that make your application modular and easy to manage.

Blocks: The UI Components

Blocks are the visual elements users interact with—buttons, inputs, containers, and more. Each block can have properties that control its appearance, data bindings that connect it to your application state, and slots that allow for flexible composition.

Variables: State Made Simple

NBX handles state management with typed variables that automatically bind to your UI components. Define a variable once and use it throughout your frame—NBX keeps everything in sync.

Actions & Triggers: Bringing Interfaces to Life

The real power of NBX comes from its event-driven programming model. Actions respond to user interactions, while triggers execute complex workflows with support for conditional logic and data transformation.

How NBX Works

NBX compiles to a JSON representation for runtime interpretation, enabling hot-reloading, visual editing, and cross-platform rendering.

NBX DSL → Parser → JSON Model → Native Renderer

The language supports bidirectional conversion between DSL and JSON formats, making it ideal for both hand-coding and visual builders.