React Apps

Strata supports building UIs with React and TypeScript, powered by the QuickJS scripting engine with native C bindings and reactive queries.

Prerequisites

The React/JS stack requires npm install in the strata checkout so that esbuild is available for bundling.

CMake setup

Enable the scripting stack and use strata_v2_app() to set up your app:

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

include(FetchContent)

set(SV2_ENABLE_SCRIPTING ON CACHE BOOL "" FORCE)
set(SV2_ENABLE_QUICKJS ON CACHE BOOL "" FORCE)
set(SV2_ENABLE_REACT 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)

add_executable(my_app app/main.c)
strata_v2_app(my_app
  ENTRY_POINT ${CMAKE_CURRENT_SOURCE_DIR}/src/index.tsx
)

The strata_v2_app() function handles:

  • esbuild bundling of your JS/TS entry point
  • Codegen from strata.json (C bindings + TypeScript declarations)
  • Linking against the full Strata runtime

No include() is needed — strata_v2_app() is available automatically after FetchContent_MakeAvailable.

Building

# Install JS dependencies first (for esbuild)
cd /path/to/strata-v2
npm install

# Configure and build
cmake -B build -DCMAKE_BUILD_TYPE=Debug \
  -DSV2_ENABLE_SCRIPTING=ON \
  -DSV2_ENABLE_QUICKJS=ON \
  -DSV2_ENABLE_REACT=ON
cmake --build build

C entry point

#include <strata_v2/strata.h>

int main(int argc, char **argv) {
  StrataV2Config cfg = STRATA_V2_CONFIG_INIT;
  cfg.window_title = "My App";
  cfg.window_maximized = true;
  cfg.base_path = SV2_REPO_ROOT;  // Set by CMake
  cfg.js_bundle_path = "examples/my-app/dist/bundle.js";

  // Optional: register bindings and queries
  // cfg.app_bindings = my_app_bindings();
  // cfg.app_queries = my_app_queries();

  return strata_v2_run(&cfg);
}

Bindings and queries

React apps use the same strata.json bindings and queries system as SUI apps. Codegen produces both C headers and TypeScript declarations.

See the Configuration guide for the full bindings and queries schema.

JS-only iteration

For faster iteration on the JS/TS side without rebuilding the C executable:

cd examples/my-app && npm run build

Option dependencies

The React stack has implicit option dependencies:

  • SV2_ENABLE_REACT=ON requires SV2_ENABLE_SCRIPTING=ON and SV2_ENABLE_QUICKJS=ON
  • The full React stack auto-enables SV2_ENABLE_NET for fetch support