{"id":24746459,"url":"https://github.com/johan0A/clay-zig-bindings","last_synced_at":"2025-10-10T14:32:57.441Z","repository":{"id":257964058,"uuid":"859986081","full_name":"johan0A/clay-zig-bindings","owner":"johan0A","description":"Zig bindings for the library clay: A high performance UI layout library in C.","archived":false,"fork":false,"pushed_at":"2025-08-22T22:22:57.000Z","size":632,"stargazers_count":156,"open_issues_count":0,"forks_count":8,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-08-23T00:38:18.064Z","etag":null,"topics":["layout","ui","zig","zig-library","zig-package"],"latest_commit_sha":null,"homepage":"https://nicbarker.com/clay","language":"Zig","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johan0A.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-19T16:05:39.000Z","updated_at":"2025-08-22T22:19:48.000Z","dependencies_parsed_at":"2024-12-29T18:29:32.865Z","dependency_job_id":"cebee94f-d32b-4402-af51-5426def15f58","html_url":"https://github.com/johan0A/clay-zig-bindings","commit_stats":null,"previous_names":["johan0a/clay-zig-bindings"],"tags_count":5,"template":false,"template_full_name":"johan0A/zig-package-template","purl":"pkg:github/johan0A/clay-zig-bindings","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johan0A%2Fclay-zig-bindings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johan0A%2Fclay-zig-bindings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johan0A%2Fclay-zig-bindings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johan0A%2Fclay-zig-bindings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johan0A","download_url":"https://codeload.github.com/johan0A/clay-zig-bindings/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johan0A%2Fclay-zig-bindings/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279004176,"owners_count":26083688,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["layout","ui","zig","zig-library","zig-package"],"created_at":"2025-01-28T04:07:23.891Z","updated_at":"2025-10-10T14:32:52.434Z","avatar_url":"https://github.com/johan0A.png","language":"Zig","funding_links":[],"categories":["Zig"],"sub_categories":[],"readme":"### Zig Bindings for clay.h\n\n![Screenshot from 2025-01-07 17-05-01](https://github.com/user-attachments/assets/8f38e8bf-00aa-4e16-be96-b7a0d81f4313)\n\n\u003e [!IMPORTANT]  \n\u003e Zig 0.14.0 or higher is required. (tested with zig 0.14.0-dev.2639+15fe99957)\n\n\u003e [!NOTE]\n\u003e This project is currently in beta.\n\nThis repository contains Zig bindings for the [clay UI layout library](https://github.com/nicbarker/clay), as well as an example implementation of the [clay website](https://nicbarker.com/clay) in Zig.\n\nThis README is abbreviated and applies to using clay in Zig specifically: If you haven't taken a look at the [full documentation for clay](https://github.com/nicbarker/clay/blob/main/README.md), it's recommended that you take a look there first to familiarise yourself with the general concepts.\n\nSome differences between the C API and the Zig bindings include:\n - minor naming changes\n - ability to initialize a parameter by calling a function that is part of its type's namespace for example `.fixed()` or `.layout()`\n - ability to initialize a parameter by using a public constant that is part of its type's namespace for example `.grow`\n - clay.singleElem() is available to create a clay element without creating a scope\n\nIn C:\n```C\n// C macro for creating a scope\nCLAY(\n    CLAY_ID(\"SideBar\"),\n    CLAY_LAYOUT({ \n        .layoutDirection = CLAY_TOP_TO_BOTTOM, \n        .sizing = { .height = CLAY_SIZING_GROW(), .width = CLAY_SIZING_FIXED(300) }, \n        .padding = {16, 16},\n        .childAlignment = { .x = CLAY_ALIGN_X_CENTER, .y = CLAY_ALIGN_Y_TOP  },\n        .childGap = 16,\n    }),\n    CLAY_RECTANGLE({ .color = COLOR_LIGHT })\n) {\n    // Child elements here\n}\n```\n\nIn Zig:\n```Zig\nclay.UI(\u0026.{ // function call to open the scope\n    .ID(\"SideBar\"),\n    .layout(.{\n        .direction = .TOP_TO_BOTTOM,\n        .sizing = .{ .h = .grow, .w = .fixed(300) },\n        .padding = .all(16),\n        .child_alignment = .{ .x = .CENTER, .y = .TOP },\n        .child_gap = 16,\n    }),\n    .rectangle(.{ .color = light_grey }),\n})({\n    // Child elements here\n});\n```\n\n## install\n\n1. Add `zclay` to the depency list in `build.zig.zon`: \n\n```sh\nzig fetch --save https://github.com/johan0A/clay-zig-bindings/archive/\u003ccommit sha\u003e.tar.gz\n```\n\n2. Config `build.zig`:\n\n```zig\n...\nconst zclay_dep = b.dependency(\"zclay\", .{\n    .target = target,\n    .optimize = optimize,\n});\ncompile_step.root_module.addImport(\"zclay\", zclay_dep.module(\"zclay\"));\n...\n```\n\n## quickstart\n\n2. Ask clay for how much static memory it needs using [clay.minMemorySize()](https://github.com/nicbarker/clay/blob/main/README.md#clay_minmemorysize), create an Arena for it to use with [clay.createArenaWithCapacityAndMemory(minMemorySize, memory)](https://github.com/nicbarker/clay/blob/main/README.md#clay_createarenawithcapacityandmemory), and initialize it with [clay.Initialize(arena)](https://github.com/nicbarker/clay/blob/main/README.md#clay_initialize).\n\n```zig\nconst min_memory_size: u32 = cl.minMemorySize();\nconst memory = try allocator.alloc(u8, min_memory_size);\ndefer allocator.free(memory);\nconst arena: cl.Arena = cl.createArenaWithCapacityAndMemory(memory);\n_ = cl.initialize(arena, .{ .h = 1000, .w = 1000 }, .{});\ncl.setMeasureTextFunction(renderer.measureText);\n```\n\n3. Provide a `measureText(text, config)` function with [clay.setMeasureTextFunction(function)](https://github.com/nicbarker/clay/blob/main/README.md#clay_setmeasuretextfunction) so that clay can measure and wrap text.\n\n```zig\n// Example measure text function\npub fn measureText(clay_text: []const u8, config: *clay.TextElementConfig) clay.Dimensions {\n    // clay.TextElementConfig contains members such as fontId, fontSize, letterSpacing etc\n    // Note: clay.String.chars is not guaranteed to be null terminated\n}\n\n// Tell clay how to measure text\nclay.setMeasureTextFunction(measureText)\n``` \n\n4. **Optional** - Call [clay.setPointerPosition(pointerPosition)](https://github.com/nicbarker/clay/blob/main/README.md#clay_setpointerposition) if you want to use mouse interactions.\n\n```Zig\n// Update internal pointer position for handling mouseover / click / touch events\nclay.setPointerState(.{\n    .x = mouse_position_x,\n    .y = mouse_position_y,\n}, is_left_mouse_button_down);\n```\n\n5. Call [clay.beginLayout()](https://github.com/nicbarker/clay/blob/main/README.md#clay_beginlayout) and declare your layout using the provided functions.\n\n```Zig\nconst light_grey: cl.Color = .{ 224, 215, 210, 255 };\nconst red: cl.Color = .{ 168, 66, 28, 255 };\nconst orange: cl.Color = .{ 225, 138, 50, 255 };\nconst white: cl.Color = .{ 250, 250, 255, 255 };\n\nconst sidebar_item_layout: cl.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } };\n\n// Re-useable components are just normal functions\nfn sidebarItemComponent(index: usize) void {\n    cl.UI(\u0026.{\n        .IDI(\"SidebarBlob\", @intCast(index)),\n        .layout(sidebar_item_layout),\n        .rectangle(.{ .color = orange }),\n    })({});\n}\n\n// An example function to begin the \"root\" of your layout tree\nfn createLayout(profile_picture: *const rl.Texture2D) cl.ClayArray(cl.RenderCommand) {\n    cl.beginLayout();\n    cl.UI(\u0026.{\n        .ID(\"OuterContainer\"),\n        .layout(.{ .direction = .LEFT_TO_RIGHT, .sizing = .grow, .padding = .all(16), .child_gap = 16 }),\n        .rectangle(.{ .color = white }),\n    })({\n        cl.UI(\u0026.{\n            .ID(\"SideBar\"),\n            .layout(.{\n                .direction = .TOP_TO_BOTTOM,\n                .sizing = .{ .h = .grow, .w = .fixed(300) },\n                .padding = .all(16),\n                .child_alignment = .{ .x = .CENTER, .y = .TOP },\n                .child_gap = 16,\n            }),\n            .rectangle(.{ .color = light_grey }),\n        })({\n            cl.UI(\u0026.{\n                .ID(\"ProfilePictureOuter\"),\n                .layout(.{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .LEFT, .y = .CENTER }, .child_gap = 16 }),\n                .rectangle(.{ .color = red }),\n            })({\n                cl.UI(\u0026.{\n                    .ID(\"ProfilePicture\"),\n                    .layout(.{ .sizing = .{ .h = .fixed(60), .w = .fixed(60) } }),\n                    .image(.{ .source_dimensions = .{ .h = 60, .w = 60 }, .image_data = @ptrCast(profile_picture) }),\n                })({});\n                cl.text(\"Clay - UI Library\", .text(.{ .font_size = 24, .color = light_grey }));\n            });\n\n            for (0..5) |i| sidebarItemComponent(i);\n        });\n\n        cl.UI(\u0026.{\n            .ID(\"MainContent\"),\n            .layout(.{ .sizing = .grow }),\n            .rectangle(.{ .color = light_grey }),\n        })({\n            //...\n        });\n    });\n    return cl.endLayout();\n}\n```\n\n6. Call [clay.endLayout()](https://github.com/nicbarker/clay/blob/main/README.md#clay_endlayout) and process the resulting [clay.RenderCommandArray](https://github.com/nicbarker/clay/blob/main/README.md#clay_rendercommandarray) in your choice of renderer.\n\n```zig\nrender_commands: clay.ClayArray(clay.RenderCommand) = clay.endLayout(window_width, window_height)\n\nvar i: usize = 0;\nwhile (i \u003c render_commands.length) : (i += 1) {\n    const render_command = clay.renderCommandArrayGet(render_commands, @intCast(i));\n    const bounding_box = render_command.bounding_box;\n    switch (render_command.command_type) {\n        .none =\u003e {},\n        .text =\u003e {\n        ...\n```\n\nPlease see the [full C documentation for clay](https://github.com/nicbarker/clay/blob/main/README.md) for API details and the example folder in this repo. All public C functions and Macros have Zig binding equivalents, generally of the form `Clay_BeginLayout` (C) -\u003e `clay.beginLayout` (zig)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohan0A%2Fclay-zig-bindings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohan0A%2Fclay-zig-bindings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohan0A%2Fclay-zig-bindings/lists"}