Download Latest Version 0.14 - Aspect Ratio Elements, Better Clipping source code.tar.gz (3.6 MB)
Email in envelope

Get an email when there's a new version of Clay

Home / v0.14
Name Modified Size InfoDownloads / Week
Parent folder
clay-odin.zip 2025-06-06 595.0 kB
0
clay.h 2025-06-06 266.1 kB
0
0.14 - Aspect Ratio Elements, Better Clipping source code.tar.gz 2025-06-06 3.6 MB
0
0.14 - Aspect Ratio Elements, Better Clipping source code.zip 2025-06-06 3.6 MB
0
README.md 2025-06-06 15.5 kB
0
Totals: 5 Items   8.1 MB 0

New Features

Non-image aspect ratio scaling elements, image stretching

Previously, only image elements supported aspect ratio scaling. The new .aspectRatio element configuration option allows you to specify a fixed width / height aspect ratio for any element. This also allows you to create image elements with no specified aspect ratio, allowing for stretched / distorted images with a different aspect ratio to their source dimensions. Different images rendering modes similar to the CSS concepts of contain and cover, as well as 9-slice support are scheduled for 0.15.

:::C
// Old
CLAY({
  .image = { .imageData = &myImage, .sourceDimensions = { 1024, 768 } }
});

// New
CLAY({
  .aspectRatio = 1024.0 / 768.0,
  .image = { .imageData = &myImage }
});

Improved .clip configuration option replaces .scroll

As part of our longer term effort to separate interaction handling from the core layout library, the .scroll configuration option has been replace with .clip. This new configuration options allows: - Cllipping of elements without enabling scrolling, similar to CSS's overflow:hidden - Immediate mode scroll handling, by providing scroll offset directly to .clip.childOffset.

To use Clay's internal scroll handling (i.e. emulate the old .scroll behaviour, you can use the new function, Clay_GetScrollOffset function.

:::C
// Old
CLAY({
  .scroll = { .vertical = true } // scrolling was automatically handled internally
});

// New, using clay's built in scroll handling
CLAY({
  .clip = {
    .vertical = true,
    .childOffset = Clay_GetScrollOffset() // This function is context dependent and will automatically track scrolling for this element across frames
  }
});

// New, providing your own scroll handling
Clay_Vector2 scrollOffset = { 0, 120 };

CLAY({
  .clip = {
    .vertical = true,
    .childOffset = scrollOffset // This will offset all children by the provided Vector2 this frame, so scrolling can be handled externally
  }
});

// New, clipping overflow without enabling scrolling
CLAY({
  .clip = { .vertical = true }
});

New Renderers

We now have a simple ANSI terminal renderer (thanks to @EmmanuelMess), a Playdate renderer (thanks to @mattahj), a Windows GDI renderer (thanks to @hexmaster111), and a Sokol renderer (thanks to @nkorth). All of them look great!

image Terminal Renderer

https://github.com/user-attachments/assets/a1819a24-cb57-4792-81d8-7929f9cc1b80

Playdate Renderer

image Windows GDI renderer

Small Changes

  • Hashing of text contents for the text measurement cache is now the default behaviour, and has a reasonably performant SIMD implementation both for x64 and ARM. Using a frame arena or scratch storage for text element strings should now work much more reliably.
  • Layout calculations for some GROW edge cases, as well as aspect ratio scaling, have been improved.
  • A new function, Clay_GetPointerOverIds is now available, which will return a z-sorted list of IDs of elements that the cursor is currently over.

Migration Guide

  1. Convert any .scroll configuration usage into .clip, and add .childOffset = Clay_GetScrollOffset() to emulate existing behaviour

    :::diff CLAY({ - .scroll = { + .clip = { .vertical = true, + .childOffset = Clay_GetScrollOffset() } })

  2. Split any .image configuration into .image and .aspectRatio

    :::diff CLAY({ .image = { .imageData = &myImage, - .sourceDimensions = { 1024, 768 } }, + .aspectRatio = { 1024.0 / 768.0 } })

  3. Remove any references to .hashStringContents in CLAY_TEXT_CONFIG, this is now the default behaviour and no longer needed.

    :::diff CLAY_TEXT(CLAY_STRING("hello"), CLAY_TEXT_CONFIG({ - .hashStringContents = true }));

Changelist

New Contributors

Full Changelog: https://github.com/nicbarker/clay/compare/v0.13...v0.14

Source: README.md, updated 2025-06-06