SUI Apps

SUI is Strata’s declarative UI language. .sui files are compiled to C by the suic compiler, producing zero-overhead native components with built-in theming and reactive data support.

CMake setup

After fetching Strata via FetchContent, include the SUI helper module and call strata_v2_sui_app():

cmake_minimum_required(VERSION 3.20)
project(my_app LANGUAGES C CXX)

include(FetchContent)

set(SV2_ENABLE_SUI ON CACHE BOOL "" FORCE)

FetchContent_Declare(
  strata_v2
  GIT_REPOSITORY https://github.com/etherbound-dev/strata-v2.git
  GIT_TAG main
)
FetchContent_MakeAvailable(strata_v2)

include(StrataV2Sui)

strata_v2_sui_app(my_app
  SUI_SOURCES
    ${CMAKE_CURRENT_SOURCE_DIR}/src/app.sui
  C_SOURCES
    ${CMAKE_CURRENT_SOURCE_DIR}/app/main.c
  PREFIX
    my_app
  THEME_JSON
    ${CMAKE_CURRENT_SOURCE_DIR}/theme.json
)

The strata_v2_sui_app() function handles:

• Compiling .sui files to C via suic
• Linking against strata_v2_app and sui_runtime
• Running codegen when a strata.json is present
• Generating theme header from theme.json
• Copying SDL DLLs on Windows

SUI file structure

A .sui file defines components with props, state, event handlers, and a declarative view tree:

// src/app.sui
@import { Button } from "button.sui";

component App {
    fn handlePress() {
    }

    View
        .style {
            flexGrow: 1;
            padding: 24;
            gap: 12;
            backgroundColor: theme.surface;
        } {
        Text("My App")
            .style {
                fontSize: 28;
                textColor: theme.text;
            }

        Button(label: "Click me", onPress: handlePress)
    }
}

Reusable components

Export components for use in other .sui files:

// src/button.sui
export component Button {
    props {
        label: string;
        onPress: fn() -> void;
    }

    Pressable
        .style {
            height: 36;
            paddingLeft: 12;
            paddingRight: 12;
            borderRadius: 6;
            alignItems: center;
            justifyContent: center;
            backgroundColor: theme.primary;
        }
        .hoverStyle { backgroundColor: theme.accent; }
        .pressedStyle { opacity: 0.85; }
        .onPress(props.onPress)
    {
        Text(props.label)
            .style {
                fontSize: 14;
                textColor: theme.text;
            }
    }
}

Theme support

SUI components access theme colors via the theme. prefix (e.g., theme.surface, theme.primary). These are resolved at runtime from the active palette in theme.json.

See the Configuration guide for the full theme.json schema.

Project layout

A typical SUI app project:

my-app/
  CMakeLists.txt
  strata.json
  theme.json
  src/app.sui
  src/button.sui
  app/main.c
  generated/          # created by codegen + theme gen

strata.json for SUI apps

SUI apps use "driver": "sui" in their strata.json:

{
  "name": "my-app",
  "displayName": "My App",
  "version": "0.1.0",
  "driver": "sui",
  "window": {
    "title": "My App",
    "width": 1280,
    "height": 720,
    "resizable": true,
    "maximized": false
  },
  "bindings": [],
  "queries": []
}

When strata.json is present in the same directory, strata_v2_sui_app() auto-detects it and runs codegen to generate type-safe binding and query headers.

See the Configuration guide for the full strata.json schema including bindings and queries.