A demo of Clay — a tiny, declarative, flexbox-style layout library in C — building a complete set of interactive game menus on top of the official Raylib renderer.

Five fully-interactive scenes plus a modal form, in a few hundred lines of layout code. Hover, click, scroll, text input, floating overlays, scroll containers, tabbed views — most of what Clay can do, in one app, with one shared style.

1. Main menu	2. Character select
★ Forge a new hero (modal)	3. Inventory
4. Settings	5. HUD / pause

brew install raylib   # macOS, one-time
./run.sh

run.sh builds incrementally and execs the binary. Tested on macOS 14+ / Apple Silicon with Raylib 5.5.

Clay is a layout engine: you describe a tree of elements with CLAY({...}) { ... }, it computes a flat list of render commands, and any renderer can draw them. Here it's the bundled official Raylib renderer.

Clay_BeginLayout();
CLAY(CLAY_ID("Root"), {
    .layout = { .sizing = { CLAY_SIZING_GROW(0), CLAY_SIZING_GROW(0) } },
}) {
    Sidebar(state);
    Scene(state);
}
Clay_RenderCommandArray cmds = Clay_EndLayout(GetFrameTime());

BeginDrawing();
    ClearBackground((Color){ 12, 12, 18, 255 });
    Clay_Raylib_Render(cmds, fonts);
EndDrawing();

Patterns worth a look:

• Hover for free — Clay_Hovered() inline inside an element's declaration switches background/border colours in the same expression that builds it.
• Click handling — Clay_PointerOver(id) + IsMouseButtonPressed(...) per scene; no global event router needed.
• Scroll — .clip = { .vertical = true, .childOffset = Clay_GetScrollOffset() } is all the inventory list needs.
• Modals / overlays — .floating = { .attachTo = CLAY_ATTACH_TO_ROOT, .zIndex = 20 } is how the pause overlay and the new-hero form layer above the rest of the screen.
• Dynamic text — a small per-frame string arena (UI_Fmt, src/ui.c) hands Clay text whose backing memory survives until the renderer reads it.

src/
  main.c       entry, scene dispatcher, raylib glue, screenshot mode
  ui.h / ui.c  palette, sidebar, footer, StatBar, frame string arena
  scenes.c     five scenes + the new-hero form

vendor/
  clay.h                   Clay 0.14 (single header)
  clay_renderer_raylib.c   official Clay Raylib backend

scripts/
  capture.sh               regenerate the screenshots in this README

The binary recognises three environment variables for non-interactive captures (no manual screenshotting needed):

CLAY_SCENE=1 CLAY_FORM=1 CLAY_SCREENSHOT=hero.png ./build/clay-menus

scripts/capture.sh regenerates everything in docs/assets/ in one go.

Clay and Raylib are both Zlib-licensed. The demo code is yours to copy.

• Estimated Cost to Develop (organic): $200,646
• Estimated Schedule Effort (organic): 7.47 months
• Estimated People Required (organic): 2.39
• Processed: 435,905 bytes (0.436 megabytes)

Generated with scc on 2026-05-22