{"id":21434496,"url":"https://github.com/johan0a/clay-zig-bindings","last_synced_at":"2025-04-06T12:07:36.748Z","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-03-20T08:21:39.000Z","size":644,"stargazers_count":113,"open_issues_count":0,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-03-30T11:06:29.203Z","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}},"created_at":"2024-09-19T16:05:39.000Z","updated_at":"2025-03-30T03:44:55.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":1,"template":false,"template_full_name":"johan0A/zig-package-template","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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478319,"owners_count":20945266,"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","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":"2024-11-22T23:36:33.595Z","updated_at":"2025-04-06T12:07:36.726Z","avatar_url":"https://github.com/johan0A.png","language":"Zig","funding_links":[],"categories":[],"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\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\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\nIn C:\n```C\nCLAY({ // C macro for creating a scope\n    .id = CLAY_ID(\"SideBar\"),\n    .layout = { \n        .layoutDirection = CLAY_TOP_TO_BOTTOM, \n        .sizing = { .width = CLAY_SIZING_FIXED(300), .height = CLAY_SIZING_GROW(0) }, \n        .padding = CLAY_PADDING_ALL(16), \n        .childAlignment = .{ .x = CLAY_ALIGN_X_CENTER , .y = .CLAY_ALIGN_Y_TOP },\n        .childGap = 16 \n    },\n    .backgroundColor = COLOR_LIGHT \n}){\n    // Child elements here\n}\n```\nIn Zig:\n```Zig\nclay.UI()(.{ // function call for creating a scope\n    .id = .ID(\"SideBar\"),\n    .layout = .{\n        .direction = .top_to_bottom,\n        .sizing = .{ .w = .fixed(300), .h = .grow },\n        .padding = .all(16),\n        .child_alignment = .{ .x = .center, .y = .top },\n        .child_gap = 16,\n    },\n    .background_color = light_grey,\n})({\n    // Child elements here\n});\n```\n\n## installation:\n\nCompatible Zig Version: `0.14.0`\n\n1. Add `zclay` to the dependency list in `build.zig.zon`: \n\n```sh\nzig fetch --save git+https://github.com/johan0A/clay-zig-bindings#v0.13\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 = clay.minMemorySize();\nconst memory = try allocator.alloc(u8, min_memory_size);\ndefer allocator.free(memory);\nconst arena: clay.Arena = clay.createArenaWithCapacityAndMemory(memory);\n_ = clay.initialize(arena, .{ .h = 1000, .w = 1000 }, .{});\nclay.setMeasureTextFunction(void, {}, 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, user_data: void) 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: clay.Color = .{ 224, 215, 210, 255 };\nconst red: clay.Color = .{ 168, 66, 28, 255 };\nconst orange: clay.Color = .{ 225, 138, 50, 255 };\nconst white: clay.Color = .{ 250, 250, 255, 255 };\n\nconst sidebar_item_layout: clay.LayoutConfig = .{ .sizing = .{ .w = .grow, .h = .fixed(50) } };\n\n// Re-useable components are just normal functions\nfn sidebarItemComponent(index: u32) void {\n    clay.UI()(.{\n        .id = .IDI(\"SidebarBlob\", index),\n        .layout = sidebar_item_layout,\n        .background_color = orange,\n    })({});\n}\n\n// An example function to begin the \"root\" of your layout tree\nfn createLayout(profile_picture: *const rl.Texture2D) clay.ClayArray(clay.RenderCommand) {\n    clay.beginLayout();\n    clay.UI()(.{\n        .id = .ID(\"OuterContainer\"),\n        .layout = .{ .direction = .left_to_right, .sizing = .grow, .padding = .all(16), .child_gap = 16 },\n        .background_color = white,\n    })({\n        clay.UI()(.{\n            .id = .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            .background_color = light_grey,\n        })({\n            clay.UI()(.{\n                .id = .ID(\"ProfilePictureOuter\"),\n                .layout = .{ .sizing = .{ .w = .grow }, .padding = .all(16), .child_alignment = .{ .x = .left, .y = .center }, .child_gap = 16 },\n                .background_color = red,\n            })({\n                clay.UI()(.{\n                    .id = .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                clay.text(\"Clay - UI Library\", .{ .font_size = 24, .color = light_grey });\n            });\n\n            for (0..5) |i| sidebarItemComponent(@intCast(i));\n        });\n\n        clay.UI()(.{\n            .id = .ID(\"MainContent\"),\n            .layout = .{ .sizing = .grow },\n            .background_color = light_grey,\n        })({\n            //...\n        });\n    });\n    return clay.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\npub fn clayRaylibRender(render_commands: *clay.ClayArray(clay.RenderCommand), allocator: std.mem.Allocator) void {\n    var i: usize = 0;\n    while (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"}