explaingit

nicbarker/clay

★ 17,210CAudience · developerComplexity · 3/5Setup · moderate

TLDR

Single-header C library that calculates UI layouts using a flexbox-like model and outputs a renderer-agnostic list of drawing commands, no dependencies, no malloc at runtime, compiles to 15 KB WebAssembly.

Mindmap

mindmap
  root((Clay))
    What it does
      Layout calculation
      Flex-box model
      Renderer agnostic
    Features
      Text wrapping
      Scrolling containers
      Aspect ratio scaling
      Transition API
    Tech stack
      C single header
      WebAssembly
      No dependencies
    Use cases
      Desktop UI
      Game engines
      Embedded UI
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Add a fast, dependency-free layout engine to a native desktop game UI written in C or C++.

USE CASE 2

Compile the layout logic to WebAssembly and use it inside a browser-based tool.

USE CASE 3

Build an embedded device UI where no heap allocations at runtime is a hard requirement.

USE CASE 4

Prototype a scrollable, wrapping panel layout in C without pulling in a full UI framework.

Tech stack

CWebAssemblyclang

Getting it running

Difficulty · moderate Time to first run · 30min

Single header file with no dependencies, but you must provide a static memory arena and a custom renderer.

License not mentioned in the explanation.

In plain English

Clay, short for C Layout, is a high-performance library for building two-dimensional user interface layouts in the C programming language. A UI layout library is the piece of code that figures out where on the screen each button, panel, image and piece of text should sit, and how those positions should change when the window resizes or content wraps. Clay handles that calculation and aims to do it in microseconds. Under the hood, Clay uses a flex-box-like layout model, similar in spirit to how websites arrange elements, with support for text wrapping, scrolling containers, aspect-ratio scaling and a transition API for animating layouts. You describe a UI in C using nested macros that look a bit like a React component tree, and Clay produces a sorted list of rendering primitives such as rectangles and text. Clay does not draw anything itself, it is renderer-agnostic, so you take that list and hand it to whichever renderer you already have, whether that is a 2D engine, a 3D engine, or even HTML. The whole library is one header file of around 4,800 lines with no dependencies at all, not even the C standard library, and it manages memory through a static arena that you provide, with no calls to malloc or free at runtime. It can also be compiled with clang to a 15 KB WebAssembly file that runs in the browser. You would actually use Clay if you are building a native desktop, game or embedded UI in C or C++ and want a layout engine that is fast, predictable, and free of hidden allocations. The full README is longer than what was provided.

Copy-paste prompts

Prompt 1
Using the Clay layout library in C, show me how to define a scrollable list of items with text wrapping and hand the result to a custom renderer.
Prompt 2
How do I set up Clay's memory arena and initialize the library from scratch in a C project?
Prompt 3
Write a Clay UI definition with a row of buttons and an image panel, then show how to iterate the output render commands.
Prompt 4
Show me how to compile Clay to WebAssembly with clang and render the output in a browser canvas.
Prompt 5
How do I use Clay's transition API to animate a panel expanding from collapsed to full width?
Open on GitHub → Explain another repo

← nicbarker on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.