Appearance
BartonDeclarative UI for C++
A C++23 framework for building desktop interfaces out of small components, each a plain type with a render function.
Skip to content
struct Counter {
struct State {
int clicks = 0;
};
View render(const State& state) const {
return Container {
padding = 12_px,
corner_radius = CornerRadius::all(8.f),
on_click = [](State& state) { state.clicks += 1; },
Text { std::format("Clicked {} times", state.clicks) },
};
}
};
Renders
Ordinary C++Everything on screen is a C++ type that describes how it looks, with no layout language to learn. Small pieces fit inside larger ones.Named argumentsArguments are given by name in any order, and can be any type, including custom ones. Omitted arguments keep their defaults.Dependencies by typeFunctions list what they need as parameters, like the dark mode setting or an image file, and each one is passed in automatically.Multiple windowsAn app can open new windows at any time, such as from a menu, and every window shares the same app data.
Example
Composing a panel
A list from a level editor, built from a handful of views and a few lines of state. Hover effects and tooltips are props, and selection and visibility are a few lines of state.
const Color accent = Color::from_rgb_u8(104, 88, 232);
struct Layer {
std::string name;
LucideIcon icon;
bool visible = true;
};
struct LayersPanel {
struct State {
std::vector<Layer> layers {
{ "Terrain", LucideIcon::Mountain },
{ "Props", LucideIcon::Box },
{ "Lights", LucideIcon::Lightbulb },
{ "Spawn points", LucideIcon::MapPin },
};
std::size_t selected = 0;
};
View render(const State& state) const {
return Column {
gap = 2_px,
For(std::views::iota(0uz, state.layers.size()), [&](std::size_t i) {
return row(state.layers[i], i, i == state.selected);
}),
};
}
private:
static View row(const Layer& layer, std::size_t i, bool selected) {
return Row {
on_click = [i](State& state) { state.selected = i; },
height = 30_px,
gap = 8_px,
padding = Padding::horizontal(8_px),
align_items = Align::Center,
corner_radius = CornerRadius::all(6.f),
background_color = selected ? accent.set_a(0.2f) : Color::TRANSPARENT,
hover = { background_color = accent.set_a(0.1f) },
Icon { layer.icon, size = 16.f },
Text { layer.name, flex_grow = 1.f },
Container {
on_click = [i](State& state) {
state.layers[i].visible = !state.layers[i].visible;
},
tooltip = layer.visible ? "Hide layer" : "Show layer",
Icon { layer.visible ? LucideIcon::Eye : LucideIcon::EyeOff, size = 16.f },
},
};
}
};
Layers
Terrain
Props
Lights
Spawn points
Click a row to select it. Click the eye to hide it.
Live Gallery Demo
Explore Barton's built-in components: