Configuration

Strata apps are configured through two JSON files and CMake options.

strata.json

The app manifest defines window settings, C bindings, and reactive queries:

{
  "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": []
}

Top-level fields

Field	Type	Description
`name`	`string`	App identifier (lowercase, alphanumeric + dashes)
`displayName`	`string`	Human-readable app name
`version`	`string`	Semver version string
`driver`	`string`	`"sui"` for SUI apps, omit for React
`window`	`object`	Window configuration
`bundle`	`string`	Path to JS bundle (React apps only)
`bindings`	`array`	C functions callable from JS/SUI
`queries`	`array`	Reactive data flowing from C to JS/SUI

Window settings

Field	Type	Default	Description
`title`	`string`	App name	Window title
`width`	`number`	`1280`	Initial window width
`height`	`number`	`720`	Initial window height
`resizable`	`boolean`	`true`	Whether the window can be resized
`maximized`	`boolean`	`false`	Start maximized

Bindings

Define C functions callable from JavaScript or SUI:

{
  "bindings": [
    {
      "name": "doSomething",
      "namespace": "myApp",
      "args": [
        { "name": "value", "type": "i32" },
        { "name": "label", "type": "string" }
      ],
      "returns": "bool",
      "doc": "Does something with the value"
    }
  ]
}

Valid types: bool, i32, i64, f32, f64, string, void

Codegen creates:

generated/<prefix>_bindings.h — C header with function signatures to implement
generated/<prefix>_bindings.c — Bridge code (auto-generated)
generated/native.d.ts — TypeScript declarations

Queries

Define data that flows reactively from C to JS/SUI:

{
  "queries": [
    {
      "name": "document",
      "namespace": "myApp",
      "returns": "object",
      "schema": {
        "type": "object",
        "props": {
          "width": { "type": "i32" },
          "height": { "type": "i32" },
          "title": { "type": "string", "nullable": true }
        }
      }
    }
  ]
}

Valid query types: bool, i32, i64, f32, f64, string, object, array

Codegen creates:

generated/<prefix>_queries.h — C header with query function signatures
generated/<prefix>_queries.c — Query table registration
generated/queries.ts — TypeScript hooks (e.g., useMyAppDocument())

theme.json

Defines light and dark color palettes. All color keys are required.

{
  "mode": "dark",
  "light": {
    "colors": {
      "surface": "#FFFFFF",
      "surfaceMuted": "#F5F6FA",
      "surfaceElevated": "#FFFFFF",
      "surfaceHover": "#F0F2F8",
      "surfacePressed": "#E8EBF2",
      "border": "#E2E4EB",
      "borderMuted": "#EBEDF2",
      "text": "#1C202A",
      "textMuted": "#787E8E",
      "primary": "#3B5BDB",
      "primaryHover": "#496AEB",
      "primaryPressed": "#304ABE",
      "primaryText": "#FFFFFF",
      "primaryBorder": "#304ABE",
      "danger": "#DC3545",
      "dangerHover": "#EB4454",
      "dangerPressed": "#BE2837",
      "dangerText": "#FFFFFF",
      "dangerBorder": "#BE2837",
      "overlay": "#0F121C8C",
      "secondary": "#8B5CF6",
      "accent": "#06B6D4",
      "background": "#FAFAFC",
      "textSecondary": "#787E8E",
      "error": "#DC3545",
      "success": "#22C55E",
      "warning": "#F59E0B"
    }
  },
  "dark": {
    "colors": {
      "surface": "#161921",
      "surfaceMuted": "#1C1F28",
      "surfaceElevated": "#202430",
      "surfaceHover": "#262A38",
      "surfacePressed": "#2D3242",
      "border": "#303644",
      "borderMuted": "#262A36",
      "text": "#EBEEF5",
      "textMuted": "#8C94A8",
      "primary": "#6E82FF",
      "primaryHover": "#8296FF",
      "primaryPressed": "#5A6EDC",
      "primaryText": "#FFFFFF",
      "primaryBorder": "#5A6EDC",
      "danger": "#FF5F5F",
      "dangerHover": "#FF7878",
      "dangerPressed": "#E64B4B",
      "dangerText": "#12141A",
      "dangerBorder": "#E64B4B",
      "overlay": "#05060AC8",
      "secondary": "#8B5CF6",
      "accent": "#06B6D4",
      "background": "#0F1117",
      "textSecondary": "#94A3B8",
      "error": "#EF4444",
      "success": "#22C55E",
      "warning": "#F59E0B"
    }
  }
}

Color keys

Key	Description
`surface`	Default surface background
`surfaceMuted`	Subdued surface variant
`surfaceElevated`	Elevated surface (cards, modals)
`surfaceHover`	Surface hover state
`surfacePressed`	Surface pressed state
`border`	Default border color
`borderMuted`	Subdued border variant
`text`	Primary text color
`textMuted`	Secondary/muted text color
`textSecondary`	Alternative secondary text color
`primary`	Primary brand color
`primaryHover`	Primary hover state
`primaryPressed`	Primary pressed state
`primaryText`	Text on primary surfaces
`primaryBorder`	Border for primary elements
`secondary`	Secondary accent color
`accent`	Tertiary accent color
`danger`	Destructive action color
`dangerHover`	Danger hover state
`dangerPressed`	Danger pressed state
`dangerText`	Text on danger surfaces
`dangerBorder`	Border for danger elements
`background`	Page/app background
`overlay`	Modal/overlay backdrop (supports alpha)
`error`	Error state color
`success`	Success state color
`warning`	Warning state color

The mode field ("light" or "dark") sets which palette is active by default.

CMake options

All options should be set before calling FetchContent_MakeAvailable.

Core features

Option	Default	Description
`SV2_ENABLE_SCRIPTING`	`OFF`	Enable JavaScript scripting support
`SV2_ENABLE_QUICKJS`	`ON`	Build QuickJS backend (only used when scripting is on)
`SV2_ENABLE_HERMES`	`OFF`	Build Hermes backend (only used when scripting is on)
`SV2_ENABLE_REACT`	`OFF`	Build React renderer bundle (requires scripting + QuickJS)
`SV2_ENABLE_NET`	`OFF`	Enable networking (fetch) via libcurl
`SV2_ENABLE_SUI`	`OFF`	Build SUI DSL compiler and runtime
`SV2_ENABLE_NODE_RUNTIME`	`OFF`	Build Node.js N-API runtime

Renderer backends

Option	Default	Description
`SV2_RENDERER_BACKEND_SDL`	`ON`	Build SDL GPU backend
`SV2_RENDERER_BACKEND_WEBGPU`	`OFF`	Build WebGPU backend via wgpu-native
`SV2_PLATFORM_GLFW`	`OFF`	Build GLFW platform host (requires WebGPU)
`SV2_RENDER_TREE_BACKEND`	`"C"`	Render tree backend: `"C"` or `"Rust"`

Build configuration

Option	Default	Description
`SV2_ENABLE_INSTALL`	`OFF`	Enable install/export targets
`SV2_BUILD_RUNNER`	`OFF`	Build windowed runner applications
`SV2_ESBUILD_EXECUTABLE`	auto	Path to esbuild binary
`STRATA_V2_SDL3_SOURCE_DIR`	`""`	Path to local SDL3 source checkout
`SDL_SHADERCROSS_DIR`	`""`	Path to pre-built SDL_shadercross

Option dependencies

Some options implicitly enable others:

SV2_ENABLE_REACT=ON requires SV2_ENABLE_SCRIPTING=ON and SV2_ENABLE_QUICKJS=ON
The full React stack auto-enables SV2_ENABLE_NET
SV2_PLATFORM_GLFW requires SV2_RENDERER_BACKEND_WEBGPU=ON
SV2_RENDERER_BACKEND_SDL=ON is required by strata_runtime