Clay (short for C Layout) is a high performance 2D UI layout library

Original Article ↗ Hacker News Discussion ↗

A new C-based 2D UI layout library called Clay is drawing interest for its small, dependency-free, single-header design and high-performance, immediate-mode layout approach, especially for games and custom tools. Commenters compare it to systems like CSS, constraint solvers (Cassowary, Auto Layout), and other GUI toolkits, debating trade-offs between simplicity, flexibility, and accessibility. While many praise the code and documentation, several note that the project’s own demo site performs poorly and lacks basic accessibility, highlighting how hard it is to pair custom layout engines with robust rendering and a11y support.

Overview & Purpose

  • Clay is a single-header, dependency-free C library for 2D UI layout, intended as a high‑performance immediate‑mode layout engine.
  • Commenters like the API design, documentation quality, and examples; some compare it favorably to microui and similar game/graphics UIs.
  • Several people see it as especially well‑suited to custom tools (e.g., IDEs, editors) and game UIs rather than general desktop/web apps.

Platforms, Bindings & Integrations

  • Works with rendering backends like Raylib; users confirm a Raylib example in the repo.
  • Using it with LÖVE (Love2D) or Lua is considered feasible via FFI/binding generators.
  • Running on microcontrollers such as ESP32 is viewed as possible if a custom renderer is written.

Accessibility & Input Concerns

  • Multiple commenters emphasize that real difficulty in UI systems is not layout but:
    • Cross‑platform input (mouse, touch, gamepad, keyboard).
    • Accessibility: screen reader integration, focus management, narration behavior.
  • A retained model is described as necessary even for immediate‑mode APIs to support accessibility well.
  • Existing projects like AccessKit, libAgar, and LVGL are mentioned as related but with varying accessibility coverage.

Website / HTML Demo Issues

  • The official Clay site (HTML demo using Clay for layout) draws heavy criticism:
    • Keyboard scrolling and PageUp/PageDown initially broken; later partially fixed.
    • Screen readers cannot interpret the page: everything is in generic <div>s, anchors are empty overlays, no semantic hierarchy.
    • Some users report total blank pages or crashes in Firefox/Chrome/Android; others see sluggish behavior.
    • Mouse wheel scrolling is reported as slow or janky; pinch‑zoom on mobile breaks layout.

Performance Discussion

  • Library claims “fast enough to recompute UI every frame.”
  • Several users report stuttering and poor scrolling performance on modern hardware; others report smooth 120fps.
  • The author attributes slowness to the demo renderer, not the layout algorithm, but the discrepancy across machines/browsers remains unclear.

Alternative Layout Models & Debates

  • Some commenters prefer constraint‑based systems (e.g., Cassowary, Auto Layout) and wish for more declarative “this goes relative to that” syntax.
  • Others point out maintainability and complexity issues of full constraint solvers for large apps.
  • Comparisons are drawn with Qt, GTK, CSS flexbox/grid, and historical tools like Interface Builder and “springs and struts.”