Skip to content

First application

Every HuxerUI application exposes one Application declaration. Its root factory returns the first declarative View tree.

#include <huxerui/huxerui.h>
using namespace huxerui;
[[huxerui::scope]]
View Counter() {
auto count = UseState(0);
return Column {
Text("Counter", TextRole::Title),
Text::Format("Current value: {}", count),
Row {
Button("Decrease").OnClick([count] {
count -= 1;
}),
Button("Increase").OnClick([count] {
count += 1;
}),
}.With(Spacing(8.0F)),
}.With(
Padding(24.0F),
Spacing(12.0F)
);
}
View App() {
return Counter();
}
const Application application{
App,
{
.window = {
.title = "Counter",
.initial_size = {480.0F, 320.0F},
},
}
};

Application stores the root factory and AppOptions for the platform shell. The root already owns a composition scope, so App does not need [[huxerui::scope]].

Counter does need an independent scope because it owns local State. The code generator rewrites the attribute into the runtime scope boundary used to preserve the state across recomposition.

The generated project starts without choosing a visual family. Wrap Counter in MaterialTheme, FlatTheme, or an application ThemeDefinition when the application is ready to select and customize its visual system.

Column and Row receive child View values through braced DSL syntax. .With(...) applies reusable modifiers from left to right, while .OnClick(...) binds the typed click event.

Writing count invalidates subscribed scopes. HuxerUI calls Counter again, reconciles the new transient View values against mounted nodes, and updates only the affected frame work.

Generated projects provide the correct native or Web entry point. A minimal desktop entry ultimately calls:

int main() {
return huxerui::RunApplication();
}

Application UI should not call RunApplication() itself or construct platform adapters.