Clay Sokol Module

The clay_sokol module renders Clay UI layouts using Sokol GP 2D drawing. Supports rectangles, borders, images, and scissor clipping. Text and rounded corners are not supported (Sokol GP lacks native text rendering and arc drawing).

Prerequisites

Requires the Clay module and Sokol module:

import clay
import clay_sokol
import sokol.app
import sokol.gfx
import sokol.glue
import sokol.gp

Usage

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

Quick Example

import clay
import clay_sokol
import sokol.app
import sokol.gfx
import sokol.glue
import sokol.gp

var g_time: f32 = 0.0

@c_abi fn init() {
    var gfx_desc: sg_desc
    gfx_desc.environment = sglue_environment()
    sg_setup(&gfx_desc)
    var gp_desc: sgp_desc
    sgp_setup(&gp_desc)

    clay.gx_clay_init(800.0, 600.0)
    clay.gx_clay_use_default_measure()
}

@c_abi fn frame() {
    var w = sapp_width()
    var h = sapp_height()
    var dt = sapp_frame_duration()
    g_time = g_time + dt

    // Update Clay dimensions on resize
    clay.gx_clay_set_dimensions(w, h)
    clay.gx_clay_set_pointer(0.0, 0.0, false)
    clay.gx_clay_update_scroll(false, 0.0, 0.0, dt)

    // 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,
        20, 20, 20, 20, 10,
        clay.ALIGN_CENTER, clay.ALIGN_CENTER,
        30.0, 30.0, 35.0, 255.0,
        0.0, 0.0, 0.0, 0.0
    )
        // Card
        clay.gx_clay_open_id("card")
        clay.gx_clay_config_full(
            clay.COLUMN,
            clay.SIZING_FIXED, 300.0, 300.0,
            clay.SIZING_FIT, 0.0, 0.0,
            16, 16, 16, 16, 8,
            clay.ALIGN_LEFT, clay.ALIGN_TOP,
            50.0, 50.0, 55.0, 255.0,
            0.0, 0.0, 0.0, 0.0
        )
        clay.gx_clay_close()
    clay.gx_clay_close()

    var count: i32 = 0
    var cmds = clay.gx_clay_end_layout(dt, &count)

    // Render with Sokol GP
    sgp_begin(w, h)
    sgp_viewport(0, 0, w, h)
    sgp_project(0.0, w, 0.0, h)
    sgp_set_color(0.0, 0.0, 0.0, 1.0)
    sgp_clear()

    clay_sokol.gx_clay_render_sokol(cmds, count)

    var pass: sg_pass
    pass.swapchain = sglue_swapchain()
    sg_begin_pass(&pass)
    sgp_flush()
    sgp_end()
    sg_end_pass()
    sg_commit()
}

@c_abi fn cleanup() {
    sgp_shutdown()
    sg_shutdown()
}

fn main() {
    var desc: sapp_desc
    desc.init_cb = init
    desc.frame_cb = frame
    desc.cleanup_cb = cleanup
    desc.width = 800
    desc.height = 600
    desc.window_title = "GX + Clay + Sokol"
    sapp_run(&desc)
}

API

Rendering

// Call between sgp_begin() and sgp_end()
clay_sokol.gx_clay_render_sokol(cmds, count)

Command	Sokol GP Drawing
`CMD_RECTANGLE`	`sgp_draw_filled_rect` (no rounded corners)
`CMD_BORDER`	`sgp_draw_line` for each border side
`CMD_IMAGE`	Textured rectangle via `sgp_set_image`
`CMD_SCISSOR_START`	`sgp_scissor`
`CMD_SCISSOR_END`	`sgp_reset_scissor`
`CMD_TEXT`	Not supported — Sokol GP has no text rendering

Supported Features

Feature	Supported	Notes
Rectangles	Yes	Sharp corners only
Rounded corners	No	Sokol GP lacks arc/curve drawing
Text rendering	No	Use custom glyph atlas or overlay
Borders	Yes	Drawn as lines
Images/textures	Yes	Via Sokol GP textured rects
Scissor clipping	Yes

When to Use Sokol vs Raylib

	Clay + Raylib	Clay + Sokol
Text rendering	Built-in fonts	Not available
Rounded corners	Yes	No
Web export	Limited	Full (WebGL2/WebGPU)
Performance	Good	Excellent
Setup complexity	Simple	More boilerplate

Use Clay + Sokol when targeting web (Emscripten) or when you need the lowest overhead and can handle text rendering yourself (e.g., glyph atlas). Use Clay + Raylib for desktop apps where text and rounded corners matter.

Module Layout

modules/
  clay_sokol/
    c/
      gx_clay_render_sokol.h    C renderer implementation
    gx/
      clay_sokol.gx             Module API