NBX language guide

Language Guide

Frame Declaration

Every NBX file starts with a frame declaration:

frame(name="screenName", route="/path") {
    // Frame content
}

Parameters:

• name - Display name for the frame
• route - URL path with support for parameters like /user/{id}

Variables

Define typed state variables accessible throughout the frame:

var username: STRING = "john_doe"
var age: INT = 25
var isActive: BOOLEAN = true
var score: FLOAT = 98.5

Types: STRING, INT, LONG, FLOAT, DOUBLE, BOOLEAN

Variables can be referenced in block data and trigger properties.

Blocks

Blocks are UI components with properties, data, slots, and actions:

block(keyType="container", key="mainContainer", visibility="visibilityVariable", version=1)
    .prop(backgroundColor="white", padding="16")
    .data(title=pageTitle, subtitle=pageSubtitle)
    .slot("content") {
        // Child blocks
    }

Block Parameters

• keyType - Component type identifier
• key - Unique identifier within the frame
• visibility - Visibility condition key
• version - Integration version number

Properties (.prop)

Define visual and behavioral properties with multi-device support:

// Single value for all devices
.prop(backgroundColor="blue", fontSize="16")

// Device-specific values
.prop(padding=(mobile="8", tablet="12", desktop="16"))
.prop(fontSize=(value="14", mobile="12", desktop="16"))

Data (.data)

Bind variables and static values to block data:

.data(title=pageTitle, count=itemCount)

Slots (.slot)

Create composition points for child blocks:

.slot("header") {
    block(keyType="text", key="title")
}
.slot("content") {
    block(keyType="list", key="items")
}

Actions & Triggers

Handle user interactions with event-driven actions:

.action(event="onClick") {
    trigger(keyType="validate", name="checkInput", version=1)
        .data(username=username, password=password)
        .then("SUCCESS") {
            trigger(keyType="navigate", name="goHome")
                .prop(route="/dashboard")
        }
}

Action Events

Common events include onClick, onChange, onLoad, and others. These are custom events defined by integration developers.

Trigger Flow

• keyType - Trigger type identifier
• name - Unique trigger name
• then - Next step: "NEXT", "END", or custom value
• version - Integration version

Nested Triggers

Chain triggers with .then() blocks:

trigger(keyType="api_call", name="fetchUser")
    .data(userId=currentUserId)
    .then("SUCCESS") {
        trigger(keyType="update_state", name="setUserData")
            .data(user=apiResponse)
    }

Comments

Use single-line comments:

// This is a comment
frame(name="Example", route="/example") {
    // Variable declaration
    var count: int = 0
}

Best Practices

Structure

• Use meaningful key names that describe component purpose
• Group related variables at the top of frames
• Organize blocks hierarchically with clear parent-child relationships

Properties

• Prefer device-specific values for responsive design
• Use semantic property names that match your component library

Actions

• Keep trigger chains simple and linear
• Use descriptive trigger names that indicate their purpose
• Handle error cases with appropriate then values

Variables

• Choose appropriate types for your data
• Use consistent naming conventions (camelCase recommended)

Error Messages

NBX provides detailed error messages with line and column information:

Line 5, Column 12: expected next token to be '=', got ':'
Unknown frame field: invalidField
duplicate block key found: container, header

Common errors:

• Missing closing parentheses or braces
• Duplicate block or variable keys
• Invalid property syntax
• Unknown block or trigger types (schema validation