A big improvement over CSS, but still seems pretty manual and finnicky, I wonder if a constraint solver based system and syntax would be ideal for laying out UI.
For instance, being able to set the constraint "element.[x,y] = other.[x,y]+other.[width,height]/2;", instead of working with "attachment" objects.
This looks quite nice! Conceptually it reminds me of microui. But a bit more fleshed out and a nicer API.
I literally thought of building this kind of thing recently, although I have some differing ideas on how to implement it. But the general idea of a single header C-like file that compiles to wasm and outputs primitive drawing commands is exactly what I was thinking.
What I really want is something like the old Flash/ActionScript display list. Just a 2d scene graph with the option to output draw commands, text or sprites. Things like containers (with things like border/backgrounds/etc.) and layouts can be built on top of that, so you could have two separate header files, one for the display list and another for a layout library.
Has anybody made an attempt at making a library like this, but with cross platform user input, and support for accessibility? From personal experience, if you can output triangles and text, writing a UI library like this is maybe 2-3 days of work. The fun starts when you consider that younger people are touch-first.
I wonder if you can get better performance than the built-in browser engine for certain complex layouts by first calculating the layout using Clay and then absolutely positioning the elements with HTML/CSS.
There was some news feed web app that used <canvas /> for better scrolling performance.
This looks great! I am a big fan of the single header format. I've linked Clay from my list of game resources for C developers. Cheers!
The website says:
> Fast enough to recompute your entire UI every frame
Yet, when I scroll the front page, made with Clay, it stutters and feels like it can barely handle smooth scrolling, even on a modern Apple Silicon laptop.
Nice work. Love the arena allocators. Show those Rust weenies that memory management doesn't need all that ceremony.
Hey, that's 6502 code!
For what it's worth, my experience with the linked website was:
- Text selection isn't possible, except on the final slide when I change to HTML Renderer and then it works very strangely (randomly selects all texts sometimes)
- The page crashed: "Error code: STATUS_ACCESS_VIOLATION"
- Also rounded corners look very strange
Quite a lot of work went into those docs. I won't use it (because I don't have a need for it) but the examples look quite pleasing, nice work!
Would this work on a microcontroller like an ESP32?
Can one use it with love2d I wonder?
2000 loc, no dependencies, well-documented — this looks very nice! Kudos to the author!
I was looking for exactly this about two weeks ago for a 3D editor UI and ended up with Facebook's Yoga library. So far things are running smooth.
I would look closer at this library too, if it wasn't for:
"Clay UI hierarchies are built using C macros"
Yikes :S
[dead]
It seems that the Clay website (https://www.nicbarker.com/clay) can't be scrolled via keyboard.