Clay Raylib Module

The clay_raylib module renders Clay UI layouts using Raylib drawing functions. One call renders all Clay commands — rectangles with rounded corners, text with fonts, borders, images, and scissor clipping.

Prerequisites

Requires both the Clay module and the Raylib module:

import clay
import clay_raylib
import raylib.core
import raylib.input
import raylib.text
import raylib.colors

Usage

gx myapp.gx -I modules -o myapp.exe

Quick Example

import clay
import clay_raylib
import raylib.core
import raylib.input
import raylib.text
import raylib.colors

fn main() {
    InitWindow(800, 600, "GX + Clay + Raylib")
    SetTargetFPS(60)

    var ctx = clay.gx_clay_init(800.0, 600.0)

    // Set up font table (index 0 = default font)
    var font = GetFontDefault()
    clay_raylib.gx_clay_raylib_init(&font, 1)

    while (!WindowShouldClose()) {
        var dt = GetFrameTime()

        // Feed input to Clay
        var mx = GetMouseX()
        var my = GetMouseY()
        clay.gx_clay_set_pointer(mx, my, IsMouseButtonDown(MOUSE_BUTTON_LEFT))
        clay.gx_clay_update_scroll(true, 0.0, GetMouseWheelMove() * 30.0, dt)

        // Toggle debug with F1
        if (IsKeyPressed(KEY_F1)) {
            clay.gx_clay_set_debug(!clay.gx_clay_is_debug())
        }

        // Declare UI
        clay.gx_clay_begin_layout()

        clay.gx_clay_open_id("root")
        clay.gx_clay_config_full(
            clay.COLUMN,
            clay.SIZING_GROW, 0.0, 0.0,
            clay.SIZING_GROW, 0.0, 0.0,
            16, 16, 16, 16, 8,
            clay.ALIGN_LEFT, clay.ALIGN_TOP,
            35.0, 35.0, 38.0, 255.0,
            0.0, 0.0, 0.0, 0.0
        )
            clay.gx_clay_text("Hello from Clay + Raylib!", 255.0, 255.0, 255.0, 255.0, 0, 24)
        clay.gx_clay_close()

        // Compute and render
        var count: i32 = 0
        var cmds = clay.gx_clay_end_layout(dt, &count)

        BeginDrawing()
        ClearBackground(BLACK)
        clay_raylib.gx_clay_render_raylib(cmds, count)
        EndDrawing()
    }
    CloseWindow()
}

API

Initialization

// fonts: pointer to Font array (index = Clay font_id)
// font_count: number of fonts
// Also installs text measurement callback for accurate layout
clay_raylib.gx_clay_raylib_init(&font, 1)

The font table maps Clay’s font_id (used in gx_clay_text) to Raylib Font objects. Index 0 is typically the default font.

Rendering

// Call between BeginDrawing() and EndDrawing()
clay_raylib.gx_clay_render_raylib(cmds, count)

This single call handles all render command types:

Supported Features

Input Wiring Pattern

Feed Raylib input into Clay each frame:

// Mouse position and button
clay.gx_clay_set_pointer(GetMouseX(), GetMouseY(), IsMouseButtonDown(MOUSE_BUTTON_LEFT))

// Scroll wheel
clay.gx_clay_update_scroll(true, 0.0, GetMouseWheelMove() * 30.0, dt)

Multiple Fonts

var fonts: Font[3]
fonts[0] = GetFontDefault()
fonts[1] = LoadFont("heading.ttf")
fonts[2] = LoadFont("mono.ttf")
clay_raylib.gx_clay_raylib_init(&fonts, 3)

// Use font_id in text elements:
clay.gx_clay_text("Heading", 255.0, 255.0, 255.0, 255.0, 1, 28)   // font 1
clay.gx_clay_text("Code", 200.0, 200.0, 200.0, 255.0, 2, 14)      // font 2

Module Layout

modules/
  clay_raylib/
    c/
      gx_clay_render_raylib.h    C renderer implementation
    gx/
      clay_raylib.gx             Module API

Example