Hello page
Headings, paragraphs, links, images, and basic layout. The smallest complete Tatzel application.
ui.Heading("Hello");
ui.Paragraph("Built in C++.");Example gallery
Small applications that explain the framework.
A useful sample set should progress from basic element creation to stateful, real-time applications without hiding how the pieces work.
Counter
A button updates server-side state and refreshes a text element without rebuilding the page.
Count: 3
Task list
Text input, validation, repeated content, event callbacks, and element removal in one compact example.
Dashboard
Cards, navigation, status indicators, and reusable logical elements composed from multiple DOM parts.
auto card = ui.Card();
card.Heading("Build status");
card.Badge("Passing");System monitor
Periodic server updates drive charts and status panels while the browser remains connected.
cpuUsage.SetText(
std::format("{}%", usage)
);Admin panel
Routing, shared layout, tables, modals, authentication boundaries, and structured application state.
app.RegisterPage("/users", ...);
app.RegisterPage("/settings", ...);Recommended first repository sample
Hello page
This should be deliberately plain: one source file, one CMake target, and no custom JavaScript. It proves the basic project setup before introducing framework abstractions.
- Register one route
- Create semantic elements
- Attach one event callback
- Apply a CSS class
app.RegisterPage("/", [](auto ui)
{
ui.Heading("Welcome to Tatzel");
auto message = ui.Paragraph(
"Waiting for interaction..."
);
ui.Button("Say hello", [&message]
{
message.SetText("Hello from C++!");
});
});Next step