9 ms·

Clay – UI Layout Library

460 points by ivmoreau 2y ago

mega-tux 2y ago
Looks very nice, I just watch a great YT video from the developer here https://www.youtube.com/watch?v=DYWTw19_8r4 https://www.youtube.com/watch?v=DYWTw19_8r4
- rubymamis 2y ago
  It's so rare to see such a clear and intuitive explanation. This video is amazing.
  - porjo 2y ago
    This. It is a rare and unique thing for the author to a) have the skills to put together such a presentation and b) take the time to do so. Thankyou.
    - deleted 2y ago
      [deleted]
  - mi_lk 2y ago
    Just watched some of his videos and they are really good. Kudos @nicoburns
- riazrizvi 2y ago
  The developer is rediscovering the concept of a GUI library. The modern variant is the mouse-driven GUI developed by Xerox in the 1970s (and later commercialized by them as Xerox Star) which Jobs famously copied to create Apple’s Lisa, and Gates famously mimicked to create MS Windows. Since they determine the look and feel of a platform and their design determines the ease with which developers can create apps for the platform, GUI frameworks became pivotal to platform wars across all sorts of products, from OSs to browsers, graphics engines and anything else whose success was determined largely by the interface developer experience.
  - keyle 2y ago
    I'm a gray beard like you probably but I disagree with this statement. This library makes use of modern composable components, is declarative driven and not imperative; and doesn't do immediate rendering in all cases. It can target incredibly different backends, e.g. DOM/canvas/raylib. All of this in modern C as a `.h` library alone. These are great features and not just a 'youngster discovers' project.
    - riazrizvi 2y ago
      Maybe a README that shows how it works and what it does would help. As it is it is quite opaque IMO, with just a few high level comments.
      - fredrikholm 2y ago
        It's in the repo; landing pages are usually for generating interest. https://github.com/nicbarker/clay https://github.com/nicbarker/clay
      - deleted 2y ago
        [deleted]
      - contrast 2y ago
        The README for the project is one of the most detailed READMEs I’ve ever seen. The landing page for the website has as much detail as you can reasonably expect, even including a couple of feature demos. There are clear links to the docs and the code. The developer has clearly put a lot of thought into this content. Worth taking a second or two to see what’s available before criticising it.
  - coolgoose 2y ago
    I swear to god, I thought this is AI generated response.
    - aconbere 2y ago
      I’m still not sure it isn’t
chromanoid 2y ago
cool stuff! selectable text is a MUST in the browser for me. In clients and apps that do not need that or can provide it themselves, this seems to be a very nice and tiny solution.
- dannyobrien 2y ago
  it's weird to watch it break text selection/copy-and-paste : feels like it might be fixable, though. I'm a stuck record on this, but I really feel like the regressions in clipboard universality are one of most understated losses of UI shifts in the last few years (along with linkability and embedding)
  - __m 2y ago
    Should that be part of a layout engine though? I’d expect to insert a tree of nodes with styling information that affect layout and receive a tree with calculated x, y, width and height for its elements.
britannio 2y ago
So cool. I wonder if it'd work for a Raspberry Pi Pico + https://pimoroni.com/picodisplay https://pimoroni.com/picodisplay or similar devices.
- Woshiwuja 2y ago
  [dead]
zibzob 2y ago
This looks pretty cool, but from the page I can't tell if there's any interactivity supported...there's a button example but it seems to have no click handler? Okay, from the examples there's something like this: if (isMouseDown && !scrollbarData.mouseDown && Clay_PointerOver(Clay_GetElementId(CLAY_STRING("ScrollBar")))) {
- deleted 2y ago
  [deleted]
jasonjmcghee 2y ago
Just wanted to drop a note - everything following the animation cannot be selected - seems focus is stolen somehow - whenever I try to select text, it immediately deselects it.
- rmac 2y ago
  this happens to me on mobile using all chromium and gecko based browsers what's also interesting is how much worse Firefox is at rendering this page; example => https://imgur.com/a/DNYe2WN https://imgur.com/a/DNYe2WN
  - rmgk 2y ago
    If you mean the text position that overflows, that seems to be computed by the library. The same happens in chromium at some resolutions.
- Reubend 2y ago
  It's probably because it does it a full reset every frame, and there's an animation playing.
ahmedfromtunis 2y ago
Serious question: am I the only one who finds writing a webpage like this to be a little too much (even if the concept is cool): void LandingPageDesktop() { CLAY(CLAY_ID("LandingPage1Desktop"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT({ .min = windowHeight - 70 }) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { .x = 50 } })) { CLAY(CLAY_ID("LandingPage1"), CLAY_LAYOUT({ .sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { 32, 32 }, .childGap = 32 }), CLAY_BORDER({ .left = { 2, COLOR_RED }, .right = { 2, COLOR_RED } })) { CLAY(CLAY_ID("LeftText"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 })) { CLAY_TEXT(CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG({ .fontSize = 56, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY(CLAY_ID("LandingPageSpacer"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) } })) {} CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); } CLAY(CLAY_ID("HeroImageOuter"), CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 })) { LandingPageBlob(1, 32, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png")); LandingPageBlob(2, 32, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png")); LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png")); LandingPageBlob(4, 32, COLOR_BLOB_BORDER_2, CLAY_STRING("Single .h file for C/C++"), CLAY_STRING("/clay/images/check_2.png")); LandingPageBlob(5, 32, COLOR_BLOB_BORDER_1, CLAY_STRING("Compile to 15kb .wasm"), CLAY_STRING("/clay/images/check_1.png")); } } } } Source: https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15ed9d84269a86cd72b4e/examples/clay-official-website/main.c#L50C1-L67C2 https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15...
- dvt 2y ago
  If you don't use some kind of layouting language (like XML/HTML), this is inevitably what you will always end up with. See: AWT[1], SWT[2], Swing[3], Qt[4]†, Fyne[5], etc., etc., etc. [1] https://docs.oracle.com/javase/7/docs/api/java/awt/GridLayout.html https://docs.oracle.com/javase/7/docs/api/java/awt/GridLayou... [2] https://github.com/eclipse-platform/eclipse.platform.swt/blob/master/examples/org.eclipse.swt.snippets/src/org/eclipse/swt/snippets/Snippet75.java https://github.com/eclipse-platform/eclipse.platform.swt/blo... [3] https://stackoverflow.com/a/12867862/243613 https://stackoverflow.com/a/12867862/243613 [4] https://stackoverflow.com/questions/37304684/qwidgetsetlayout-attempting-to-set-qlayout-on-mainwindow-which-already https://stackoverflow.com/questions/37304684/qwidgetsetlayou... † Qt actually has a (XML-based, I think) layouting system, but you can also just do stuff in code, which is generally discouraged. [5] https://gist.github.com/ledongthuc/9686787fe51bbe763fa1e50389d63351 https://gist.github.com/ledongthuc/9686787fe51bbe763fa1e5038...
ilrwbwrkhv 2y ago
The d for debugging is so cool. Fantastic library. C is also such a good language. If I wasn't doing Rust, I would have gone back to C.
- Diti 2y ago
  > C is also such a good language. If I wasn't doing Rust, I would have gone back to C. Wouldn’t you try Zig instead?
  - ilrwbwrkhv 2y ago
    I'm not sure I would have. There is a terseness in C which zig lags. I think. To be fair, I haven't played with Zig that much.
huhtenberg 2y ago
Getting an empty, cream-rose-colored page, followed by a warning that the script on the page is slowing the browser down with an offer to stop the script. Just FYI.
virtualritz 2y ago
There is also taffy (Rust) which has WIP C bindings. https://crates.io/crates/taffy https://crates.io/crates/taffy
fuzzythinker 2y ago
Press "d" to debug didn't work for me. On Chrome in Mac.
dgan 2y ago
Okey i was going to complain about what's the point of doing it in C, when it could be done more safely in Haskell/OCaml But 2000 lines of C, and no dependencies is pretty cool!
- PittleyDunkin 2y ago
  Hey at least this way other languages can use it
noamchompsit 2y ago
Cool, so if i look for 'clay', i'll find your lib?
- deleted 2y ago
  [deleted]
- recursive 2y ago
  You mean, like, using a search engine? I don't think anyone here is in any special position to be able to answer that question.
- esperent 2y ago
  "clay ui" or "clay layout" will find it, which seems ok to me.
  - memsom 2y ago
    "clay ui" actually fails. My top hit is: https://clayui.com/docs/get-started/how-to-use-clay https://clayui.com/docs/get-started/how-to-use-clay which is a completely different UI library from what I can tell, and probably had the name first too as the Git repo has commits from 4 years ago.
bee_rider 2y ago
Just a funny note—there’s a button at the end to switch between HTML and Canvas. I think it is neat how little difference it makes… normally. But with iOS Safari + Dark Reader, at least on my side, the HTML page is turned into dark mode with Dark Reader, while the canvas page is not. So, it basically ruins the wow factor, haha. But it still looks nice.
- deleted 2y ago
  [deleted]
- spiderfarmer 2y ago
  Text selection and zoomng is also problematic.
  - anonzzzies 2y ago
    Zooming is indeed an issue but selection works fine for me on safari ios.
    - Klaster_1 2y ago
      On Windows/Firefox, text selection doesn't work. Also not working is Home/End and wheel click scrolling. Cool project otherwise.
  - red_trumpet 2y ago
    My Firefox on Linux zooms fine with both renderers. Text selection doesn't work though. Also the cursor doesn't adapt when hovering text, a button etc.
  - wffurr 2y ago
    It won’t help with dark mode, but the canvas-place-element proposal (https://github.com/WICG/canvas-place-element https://github.com/WICG/canvas-place-element) should allow those interactions on canvas-rendered text backed by a text element placed under the canvas.
  - sgt 2y ago
elcritch 2y ago
Nice! It's pretty cool what you can make in a few thousand lines. Though Flex isn't my favorite as I prefer full CSS Grid. So I ended up making a CSS Grid layout library that I'm proud of in pure Nim (1). Though I'll have to checkout Clay and compare some of the layout algorithms. It's neat to see boxes resizing themselves using an algorithm you implemented. Wonder if I could expose a C interface? The reason I like CSS Grid is that I could imitate the formatting like this: test "compute others": var gt: GridTemplate parseGridTemplateColumns gt, ["first"] 40'ux \ ["second", "line2"] 50'ux \ ["line3"] auto \ ["col4-start"] 50'ux \ ["five"] 40'ux ["end"] 1: https://github.com/elcritch/cssgrid https://github.com/elcritch/cssgrid
- nicoburns 2y ago
  Cool! I also have a standalone implementation of CSS Grid [1]. Implemented in Rust in my case (and we also support Flexbox and Block layout). Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. We aim to be fully web compatible, although we're not quite there yet. One thing we have that you may be particularly interested is a reasonably substantial test suite. The tests are defined as HTML snippets that we run through Chrome using webdriver in order the scrape (hopefully) correct assertions, and then format into pure-code unit tests. If you wanted to you could write your own test generator and reuse our snippets. (this test infrastructure is also partially shared with Yoga [2], the C++ Flexbox implementation that powers React Native) 1: https://github.com/DioxusLabs/taffy https://github.com/DioxusLabs/taffy 2: https://github.com/facebook/yoga https://github.com/facebook/yoga
  - elcritch 2y ago
    Hey thanks! That's awesome and great to see other implementations. Figuring out test cases is half the battle and I've really only done the basics. I'll definitely look to stealing things. ;) > Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. Good call, I'll add the license file.
  - 2y ago
xhrpost 2y ago
I'm not proficient in C. Does this "just work" or do you need to provide some sort of rendering environment like SDL?
- thot_experiment 2y ago
  This is just a layout library, it doesn't do any rendering at all.
- nine_k 2y ago
  No, the library is about doing the layout only. Yes, the repo offers a couple of example renderers. The idea is that you already have a rendering pipeline (e.g. in your game engine), but want to lay out more complex UIs in it. Then you can use this library to make nice settings / chat / stats / whatever screens, or even render realistic content onto screens of in-game computers, pages of books, etc.
bvisness 2y ago
This is a delightful take on a style of UI I really love. Separating the UI logic from drawing with a set of draw commands is an excellent and very versatile idea - I first saw it in microui, and the separation allowed me to easily use the library in the browser using WASM and Canvas2D. (https://rxi.github.io/microui_v2_an_implementation_overview.html https://rxi.github.io/microui_v2_an_implementation_overview....) Also, doing layout in WASM and rendering to HTML is a great idea that I can't believe I never thought of before.
wangii 2y ago
Looks impressive! What are the connection/comparison with imgui though?
- mtnygard 2y ago
  Both use immediate mode rendering. Both have the “single header” design. There doesn’t appear to be any shared implementation. The examples use Raylib as a renderer behind the layout engine. I suppose it would be possible to use Dear Imgui as a renderer, but you might have to write some glue code.
thiht 2y ago
Using CSS translations to place elements on the page is... cursed to say the least. It's probably why text selection works (assuming it qualifies as working) in such a weird way when the cursor goes between blocks.
gnarlouse 2y ago
Highlighting is degraded for me running on Firefox, it's wigging out every time I nudge my cursor
sgt 2y ago
This is basically what Flutter web is doing - its own canvas, rendering UI, and leveraging Wasm
- Naru41 2y ago
  If Android had provided an defining UI API like this entirely in C without using Java, Android would have 100% monopolized the mobile OS market. So fast, efficient.
  - sgt 2y ago
    Somehow I don't think it's that easy. But yeah, the way Java was used and with XML etc was horrible. Android development continues to be pretty horrible to this day, but due to a variety of reasons. If I need to target Android natively today, I first consider Flutter (non-web). For iOS only apps there's little reason to stay away from Swift.
b3orn 2y ago
Right and middle click on links behaves like a left click on the website.
- 7bit 2y ago
  Instant recycle bin.
inson 2y ago
why it's not written in rust?! now every cool kid writes in rust)) Jokes aside this is nice!
citizenpaul 2y ago
I'm not a frontend person. Can anyone explain why this is better than using CSS directly or a CSS framework/library? Seems like added complexity when there are already hundreds of CSS frameworks available that seem like they do the same thing.
- hoppp 2y ago
  Maybe you want the compile some C to wasm and render to canvas. Then it's pretty neat.
- mdarens 2y ago
  This isn't really meant to replace such things an environment where you have a rendering engine that supports CSS— I think demoing it on the page is more for showing off how portable it is with WASM. Off the top of my head, a few uses for this: - Mapping components or structured document data with something like MDX or slate on to Clay components to render in different contexts outside the browser reasonably closely to what shows up in a browser preview, for example content for HUDs, in-world display panels or documents in games, or batch rendering printed documents - Layout for UI where something like Electron or React Native would be overkill, or isn't supported
- tenken 2y ago
  This UI library can be re-targeted to Raylib, Canvas, HTML from its markup ... Good luck doing that with just CSS. Put another way, this library is a step into writing an agnostic UI layer for your application which it just invokes from its business logic. If you can decouple your UI from your application code ala MVC or MVP architecture, as a developer you can find the right tool for the components that compose the sum of your project.
- corysama 2y ago
  The main goal is to enable nice UI without the requirement of a whole web browser in order to get CSS. The fact that it can be used to layout web pages is just showing off to get the attention of the billion web devs out there.
wishinghand 2y ago
It's a good first draft. I do find it a shame that the HTML output is only div elements. I think a little accessibility would go a long way. I also can't select text in many places before some re-render de-selects before I can hit control-c.
mendor 2y ago
the inspector at the end was a neat surprise! I had some issues trying to build the examples on windows but I think it's an opportunity to contribute to the project
NoZZz 2y ago
Oh sweet jesus, the preprocessor? Go away.
erichocean 2y ago
Would be fun to combine this with the single-file Impeller header from the Flutter people. The API approach could be implemented extremely cleanly in Clojure and Java, and then the whole thing would be runtime-dynamic, since Clojure generates new Java functions on the fly, and the JVM's JIT makes them fast. If anyone wants a fun project over the holidays…
steve-chavez 2y ago
So cool! For some reason navigating to Github/Discord by clicking the links is slow on my phone (old galaxy s20fe). The click highlight of the button is normal, just going to the sites is slow.
m3kw9 2y ago
The canvas renderer tried on iPhone feels weird. The scroll is completely different from regular, also no scroll bounce. That alone is a deal breaker
isagues 2y ago
My question may be to obvious but, how can you incorporate js to mutate your layout based on user interaction and api calls? Do you have a dynamic website example?
Naru41 2y ago
Excellent. If these compiled data structures were the web standard instead of HTML, www would be ridiculously fast.

460 points by ivmoreau 2y ago

Looks very nice, I just watch a great YT video from the developer here https://www.youtube.com/watch?v=DYWTw19_8r4 https://www.youtube.com/watch?v=DYWTw19_8r4

rubymamis 2y ago
It's so rare to see such a clear and intuitive explanation. This video is amazing.
- porjo 2y ago
  This. It is a rare and unique thing for the author to a) have the skills to put together such a presentation and b) take the time to do so. Thankyou.
  - deleted 2y ago
    [deleted]
- mi_lk 2y ago
  Just watched some of his videos and they are really good. Kudos @nicoburns
riazrizvi 2y ago
The developer is rediscovering the concept of a GUI library. The modern variant is the mouse-driven GUI developed by Xerox in the 1970s (and later commercialized by them as Xerox Star) which Jobs famously copied to create Apple’s Lisa, and Gates famously mimicked to create MS Windows. Since they determine the look and feel of a platform and their design determines the ease with which developers can create apps for the platform, GUI frameworks became pivotal to platform wars across all sorts of products, from OSs to browsers, graphics engines and anything else whose success was determined largely by the interface developer experience.
- keyle 2y ago
  I'm a gray beard like you probably but I disagree with this statement. This library makes use of modern composable components, is declarative driven and not imperative; and doesn't do immediate rendering in all cases. It can target incredibly different backends, e.g. DOM/canvas/raylib. All of this in modern C as a `.h` library alone. These are great features and not just a 'youngster discovers' project.
  - riazrizvi 2y ago
    Maybe a README that shows how it works and what it does would help. As it is it is quite opaque IMO, with just a few high level comments.
    - fredrikholm 2y ago
      It's in the repo; landing pages are usually for generating interest. https://github.com/nicbarker/clay https://github.com/nicbarker/clay
    - deleted 2y ago
      [deleted]
    - contrast 2y ago
      The README for the project is one of the most detailed READMEs I’ve ever seen. The landing page for the website has as much detail as you can reasonably expect, even including a couple of feature demos. There are clear links to the docs and the code. The developer has clearly put a lot of thought into this content. Worth taking a second or two to see what’s available before criticising it.
- coolgoose 2y ago
  I swear to god, I thought this is AI generated response.
  - aconbere 2y ago
    I’m still not sure it isn’t

chromanoid 2y ago

cool stuff! selectable text is a MUST in the browser for me. In clients and apps that do not need that or can provide it themselves, this seems to be a very nice and tiny solution.

dannyobrien 2y ago
it's weird to watch it break text selection/copy-and-paste : feels like it might be fixable, though. I'm a stuck record on this, but I really feel like the regressions in clipboard universality are one of most understated losses of UI shifts in the last few years (along with linkability and embedding)
- __m 2y ago
  Should that be part of a layout engine though? I’d expect to insert a tree of nodes with styling information that affect layout and receive a tree with calculated x, y, width and height for its elements.

britannio 2y ago

So cool. I wonder if it'd work for a Raspberry Pi Pico + https://pimoroni.com/picodisplay https://pimoroni.com/picodisplay or similar devices.

Woshiwuja 2y ago
[dead]

zibzob 2y ago

This looks pretty cool, but from the page I can't tell if there's any interactivity supported...there's a button example but it seems to have no click handler? Okay, from the examples there's something like this: if (isMouseDown && !scrollbarData.mouseDown && Clay_PointerOver(Clay_GetElementId(CLAY_STRING("ScrollBar")))) {

deleted 2y ago
[deleted]

jasonjmcghee 2y ago

Just wanted to drop a note - everything following the animation cannot be selected - seems focus is stolen somehow - whenever I try to select text, it immediately deselects it.

rmac 2y ago
this happens to me on mobile using all chromium and gecko based browsers what's also interesting is how much worse Firefox is at rendering this page; example => https://imgur.com/a/DNYe2WN https://imgur.com/a/DNYe2WN
- rmgk 2y ago
  If you mean the text position that overflows, that seems to be computed by the library. The same happens in chromium at some resolutions.
Reubend 2y ago
It's probably because it does it a full reset every frame, and there's an animation playing.

ahmedfromtunis 2y ago

Serious question: am I the only one who finds writing a webpage like this to be a little too much (even if the concept is cool): void LandingPageDesktop() { CLAY(CLAY_ID("LandingPage1Desktop"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIT({ .min = windowHeight - 70 }) }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { .x = 50 } })) { CLAY(CLAY_ID("LandingPage1"), CLAY_LAYOUT({ .sizing = { CLAY_SIZING_GROW(), CLAY_SIZING_GROW() }, .childAlignment = {.y = CLAY_ALIGN_Y_CENTER}, .padding = { 32, 32 }, .childGap = 32 }), CLAY_BORDER({ .left = { 2, COLOR_RED }, .right = { 2, COLOR_RED } })) { CLAY(CLAY_ID("LeftText"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_PERCENT(0.55f) }, .layoutDirection = CLAY_TOP_TO_BOTTOM, .childGap = 8 })) { CLAY_TEXT(CLAY_STRING("Clay is a flex-box style UI auto layout library in C, with declarative syntax and microsecond performance."), CLAY_TEXT_CONFIG({ .fontSize = 56, .fontId = FONT_ID_TITLE_56, .textColor = COLOR_RED })); CLAY(CLAY_ID("LandingPageSpacer"), CLAY_LAYOUT({ .sizing = { .width = CLAY_SIZING_GROW(), .height = CLAY_SIZING_FIXED(32) } })) {} CLAY_TEXT(CLAY_STRING("Clay is laying out this webpage right now!"), CLAY_TEXT_CONFIG({ .fontSize = 36, .fontId = FONT_ID_TITLE_36, .textColor = COLOR_ORANGE })); } CLAY(CLAY_ID("HeroImageOuter"), CLAY_LAYOUT({ .layoutDirection = CLAY_TOP_TO_BOTTOM, .sizing = { .width = CLAY_SIZING_PERCENT(0.45f) }, .childAlignment = { CLAY_ALIGN_X_CENTER }, .childGap = 16 })) { LandingPageBlob(1, 32, COLOR_BLOB_BORDER_5, CLAY_STRING("High performance"), CLAY_STRING("/clay/images/check_5.png")); LandingPageBlob(2, 32, COLOR_BLOB_BORDER_4, CLAY_STRING("Flexbox-style responsive layout"), CLAY_STRING("/clay/images/check_4.png")); LandingPageBlob(3, 32, COLOR_BLOB_BORDER_3, CLAY_STRING("Declarative syntax"), CLAY_STRING("/clay/images/check_3.png")); LandingPageBlob(4, 32, COLOR_BLOB_BORDER_2, CLAY_STRING("Single .h file for C/C++"), CLAY_STRING("/clay/images/check_2.png")); LandingPageBlob(5, 32, COLOR_BLOB_BORDER_1, CLAY_STRING("Compile to 15kb .wasm"), CLAY_STRING("/clay/images/check_1.png")); } } } } Source: https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15ed9d84269a86cd72b4e/examples/clay-official-website/main.c#L50C1-L67C2 https://github.com/nicbarker/clay/blob/35d72e5fba6872be48d15...

dvt 2y ago
If you don't use some kind of layouting language (like XML/HTML), this is inevitably what you will always end up with. See: AWT[1], SWT[2], Swing[3], Qt[4]†, Fyne[5], etc., etc., etc. [1] https://docs.oracle.com/javase/7/docs/api/java/awt/GridLayout.html https://docs.oracle.com/javase/7/docs/api/java/awt/GridLayou... [2] https://github.com/eclipse-platform/eclipse.platform.swt/blob/master/examples/org.eclipse.swt.snippets/src/org/eclipse/swt/snippets/Snippet75.java https://github.com/eclipse-platform/eclipse.platform.swt/blo... [3] https://stackoverflow.com/a/12867862/243613 https://stackoverflow.com/a/12867862/243613 [4] https://stackoverflow.com/questions/37304684/qwidgetsetlayout-attempting-to-set-qlayout-on-mainwindow-which-already https://stackoverflow.com/questions/37304684/qwidgetsetlayou... † Qt actually has a (XML-based, I think) layouting system, but you can also just do stuff in code, which is generally discouraged. [5] https://gist.github.com/ledongthuc/9686787fe51bbe763fa1e50389d63351 https://gist.github.com/ledongthuc/9686787fe51bbe763fa1e5038...

ilrwbwrkhv 2y ago

The d for debugging is so cool. Fantastic library. C is also such a good language. If I wasn't doing Rust, I would have gone back to C.

Diti 2y ago
> C is also such a good language. If I wasn't doing Rust, I would have gone back to C. Wouldn’t you try Zig instead?
- ilrwbwrkhv 2y ago
  I'm not sure I would have. There is a terseness in C which zig lags. I think. To be fair, I haven't played with Zig that much.

huhtenberg 2y ago

Getting an empty, cream-rose-colored page, followed by a warning that the script on the page is slowing the browser down with an offer to stop the script. Just FYI.

virtualritz 2y ago

There is also taffy (Rust) which has WIP C bindings. https://crates.io/crates/taffy https://crates.io/crates/taffy

fuzzythinker 2y ago

Press "d" to debug didn't work for me. On Chrome in Mac.

dgan 2y ago

Okey i was going to complain about what's the point of doing it in C, when it could be done more safely in Haskell/OCaml But 2000 lines of C, and no dependencies is pretty cool!

PittleyDunkin 2y ago
Hey at least this way other languages can use it

noamchompsit 2y ago

Cool, so if i look for 'clay', i'll find your lib?

deleted 2y ago
[deleted]
recursive 2y ago
You mean, like, using a search engine? I don't think anyone here is in any special position to be able to answer that question.
esperent 2y ago
"clay ui" or "clay layout" will find it, which seems ok to me.
- memsom 2y ago
  "clay ui" actually fails. My top hit is: https://clayui.com/docs/get-started/how-to-use-clay https://clayui.com/docs/get-started/how-to-use-clay which is a completely different UI library from what I can tell, and probably had the name first too as the Git repo has commits from 4 years ago.

bee_rider 2y ago

Just a funny note—there’s a button at the end to switch between HTML and Canvas. I think it is neat how little difference it makes… normally. But with iOS Safari + Dark Reader, at least on my side, the HTML page is turned into dark mode with Dark Reader, while the canvas page is not. So, it basically ruins the wow factor, haha. But it still looks nice.

deleted 2y ago
[deleted]
spiderfarmer 2y ago
Text selection and zoomng is also problematic.
- anonzzzies 2y ago
  Zooming is indeed an issue but selection works fine for me on safari ios.
  - Klaster_1 2y ago
    On Windows/Firefox, text selection doesn't work. Also not working is Home/End and wheel click scrolling. Cool project otherwise.
- red_trumpet 2y ago
  My Firefox on Linux zooms fine with both renderers. Text selection doesn't work though. Also the cursor doesn't adapt when hovering text, a button etc.
- wffurr 2y ago
  It won’t help with dark mode, but the canvas-place-element proposal (https://github.com/WICG/canvas-place-element https://github.com/WICG/canvas-place-element) should allow those interactions on canvas-rendered text backed by a text element placed under the canvas.
- sgt 2y ago

elcritch 2y ago

Nice! It's pretty cool what you can make in a few thousand lines. Though Flex isn't my favorite as I prefer full CSS Grid. So I ended up making a CSS Grid layout library that I'm proud of in pure Nim (1). Though I'll have to checkout Clay and compare some of the layout algorithms. It's neat to see boxes resizing themselves using an algorithm you implemented. Wonder if I could expose a C interface? The reason I like CSS Grid is that I could imitate the formatting like this: test "compute others": var gt: GridTemplate parseGridTemplateColumns gt, ["first"] 40'ux \ ["second", "line2"] 50'ux \ ["line3"] auto \ ["col4-start"] 50'ux \ ["five"] 40'ux ["end"] 1: https://github.com/elcritch/cssgrid https://github.com/elcritch/cssgrid

nicoburns 2y ago
Cool! I also have a standalone implementation of CSS Grid [1]. Implemented in Rust in my case (and we also support Flexbox and Block layout). Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. We aim to be fully web compatible, although we're not quite there yet. One thing we have that you may be particularly interested is a reasonably substantial test suite. The tests are defined as HTML snippets that we run through Chrome using webdriver in order the scrape (hopefully) correct assertions, and then format into pure-code unit tests. If you wanted to you could write your own test generator and reuse our snippets. (this test infrastructure is also partially shared with Yoga [2], the C++ Flexbox implementation that powers React Native) 1: https://github.com/DioxusLabs/taffy https://github.com/DioxusLabs/taffy 2: https://github.com/facebook/yoga https://github.com/facebook/yoga
- elcritch 2y ago
  Hey thanks! That's awesome and great to see other implementations. Figuring out test cases is half the battle and I've really only done the basics. I'll definitely look to stealing things. ;) > Looks like the licenses are both MIT (although you may want to add a LICENSE file to make that easier to find) so feel free to steal bits if you want. Good call, I'll add the license file.
- 2y ago

xhrpost 2y ago

I'm not proficient in C. Does this "just work" or do you need to provide some sort of rendering environment like SDL?

thot_experiment 2y ago
This is just a layout library, it doesn't do any rendering at all.
nine_k 2y ago
No, the library is about doing the layout only. Yes, the repo offers a couple of example renderers. The idea is that you already have a rendering pipeline (e.g. in your game engine), but want to lay out more complex UIs in it. Then you can use this library to make nice settings / chat / stats / whatever screens, or even render realistic content onto screens of in-game computers, pages of books, etc.

bvisness 2y ago

This is a delightful take on a style of UI I really love. Separating the UI logic from drawing with a set of draw commands is an excellent and very versatile idea - I first saw it in microui, and the separation allowed me to easily use the library in the browser using WASM and Canvas2D. (https://rxi.github.io/microui_v2_an_implementation_overview.html https://rxi.github.io/microui_v2_an_implementation_overview....) Also, doing layout in WASM and rendering to HTML is a great idea that I can't believe I never thought of before.

wangii 2y ago

Looks impressive! What are the connection/comparison with imgui though?

mtnygard 2y ago
Both use immediate mode rendering. Both have the “single header” design. There doesn’t appear to be any shared implementation. The examples use Raylib as a renderer behind the layout engine. I suppose it would be possible to use Dear Imgui as a renderer, but you might have to write some glue code.

thiht 2y ago

Using CSS translations to place elements on the page is... cursed to say the least. It's probably why text selection works (assuming it qualifies as working) in such a weird way when the cursor goes between blocks.

gnarlouse 2y ago

Highlighting is degraded for me running on Firefox, it's wigging out every time I nudge my cursor

sgt 2y ago

This is basically what Flutter web is doing - its own canvas, rendering UI, and leveraging Wasm

Naru41 2y ago
If Android had provided an defining UI API like this entirely in C without using Java, Android would have 100% monopolized the mobile OS market. So fast, efficient.
- sgt 2y ago
  Somehow I don't think it's that easy. But yeah, the way Java was used and with XML etc was horrible. Android development continues to be pretty horrible to this day, but due to a variety of reasons. If I need to target Android natively today, I first consider Flutter (non-web). For iOS only apps there's little reason to stay away from Swift.

b3orn 2y ago

Right and middle click on links behaves like a left click on the website.

7bit 2y ago
Instant recycle bin.

inson 2y ago

why it's not written in rust?! now every cool kid writes in rust)) Jokes aside this is nice!

citizenpaul 2y ago

I'm not a frontend person. Can anyone explain why this is better than using CSS directly or a CSS framework/library? Seems like added complexity when there are already hundreds of CSS frameworks available that seem like they do the same thing.

hoppp 2y ago
Maybe you want the compile some C to wasm and render to canvas. Then it's pretty neat.
mdarens 2y ago
This isn't really meant to replace such things an environment where you have a rendering engine that supports CSS— I think demoing it on the page is more for showing off how portable it is with WASM. Off the top of my head, a few uses for this: - Mapping components or structured document data with something like MDX or slate on to Clay components to render in different contexts outside the browser reasonably closely to what shows up in a browser preview, for example content for HUDs, in-world display panels or documents in games, or batch rendering printed documents - Layout for UI where something like Electron or React Native would be overkill, or isn't supported
tenken 2y ago
This UI library can be re-targeted to Raylib, Canvas, HTML from its markup ... Good luck doing that with just CSS. Put another way, this library is a step into writing an agnostic UI layer for your application which it just invokes from its business logic. If you can decouple your UI from your application code ala MVC or MVP architecture, as a developer you can find the right tool for the components that compose the sum of your project.
corysama 2y ago
The main goal is to enable nice UI without the requirement of a whole web browser in order to get CSS. The fact that it can be used to layout web pages is just showing off to get the attention of the billion web devs out there.

wishinghand 2y ago

It's a good first draft. I do find it a shame that the HTML output is only div elements. I think a little accessibility would go a long way. I also can't select text in many places before some re-render de-selects before I can hit control-c.

mendor 2y ago

the inspector at the end was a neat surprise! I had some issues trying to build the examples on windows but I think it's an opportunity to contribute to the project

NoZZz 2y ago

Oh sweet jesus, the preprocessor? Go away.

erichocean 2y ago

Would be fun to combine this with the single-file Impeller header from the Flutter people. The API approach could be implemented extremely cleanly in Clojure and Java, and then the whole thing would be runtime-dynamic, since Clojure generates new Java functions on the fly, and the JVM's JIT makes them fast. If anyone wants a fun project over the holidays…

steve-chavez 2y ago

So cool! For some reason navigating to Github/Discord by clicking the links is slow on my phone (old galaxy s20fe). The click highlight of the button is normal, just going to the sites is slow.

m3kw9 2y ago

The canvas renderer tried on iPhone feels weird. The scroll is completely different from regular, also no scroll bounce. That alone is a deal breaker

isagues 2y ago

My question may be to obvious but, how can you incorporate js to mutate your layout based on user interaction and api calls? Do you have a dynamic website example?

Naru41 2y ago

Excellent. If these compiled data structures were the web standard instead of HTML, www would be ridiculously fast.