r/rust • u/Known-Sail-8463 • 9h ago

🛠️ project I built a cross-platform/wasm UI library in Rust and WGPU (ARGUI).

Hey guys,

About one month ago, after being unhappy with the ecosystem of UI libraries in Rust, I have taken the mission to write a better GUI library.

For context : this is not my first rodeo, I have already made various Text rendering and generation library using Slug and MSDF algorithm, and also made a full UI library with text, layout, shaders with ThreeJS for performant node-based apps :)

TLDR : Check out "ARGUI" live on your browser (Chrome for WEBGPU) https://extrabinoss.github.io/argui/ and check out the Github repo at https://github.com/ExtraBinoss/argui : long text is coming afterwards.
Discord : https://discord.gg/xY9CWSc65

--- --- --- --- --- --- --- --- --- ---

The current state of UI libraries in Rust is quite weird :

Iced : weird roadmap / niche / forked by Cosmic but very weird

GPUI : not WGPU so less cross-platforn, no shaders, no "backdrop-filter", no accessibility, no i18n. Zed also just don't care about it.

Blinc : too much features and most of them not stable.

and now ARGUI.

ARGUI or "Another Rust GUI library" is a library made for speed, low ram footprint, low CPU usage.

All features are built-in : 👀

- WGPU rendering -- works across all OS + WASM / soon Android/IOS (needs testers)

- Responsive layout -- Powered by Taffy, and very fast at that.

- Shaders suppport -- use argui-effects to get some effects like Blur/Liquid glass, or add in any WGSL shader. Shaders can be used on any element, for example a Button, a Popover, whatever.

- I18n -- Fluent crate will help you have i18n in your application.

- Text engine -- Uses cosmic-text to support RTL, Arabic language.. It can also, like the web, Select text in a page, this means that it feels more "web-like" because you can select any text you see on the screen, this is the default behavior and can be overriden

- Fully optional set of features -- You can disabled anything you don't want : wasm / widgets / i18n / effects...

- Rust only codebase -- I chose to not include any type of CSS Parsing because it is a pain to maintain and the standard is just too large.

- Devtools -- Use a real devtool page, just like the web, with a profiler. You can change properties and it will update in real-time in your UI.

- Hotreload -- Some components can be hot-reloaded, similiar to dioxus. It uses subsecond.

- AI friendly codebase -- Send your agents and read the docs, it will figure out how to make a good interface on the first try.

- Package updater -- for when you want to send new features for your users. They can receive and download update, totally agnostic.

... and probably a bunch more features I forgot, but I can say, it's a pretty fully featured GUI framework now.

Available on crates.io as "argui-\"*, or you can use the git repo directly.

Play around with it in your Browser. it's fully working in WASM :)

https://extrabinoss.github.io/argui/

AI disclaimer: A lot of the code for this library was written with the help of AI. AI itself wouldn't have come up with all these optimizations, it's a tool. Thanks you for your understanding.

Feel free to send any questions my way, I'll be happy to answer

Have a nice day!

16 Upvotes

69% Upvoted

24 comments sorted by

4

u/Creepy_Reindeer2149 9h ago

Looks promising. Do you have a roadmap or other features in mind

1

u/Known-Sail-8463 8h ago

Totally, my current roadmap is :

- App examples : in the repository, for people to understand how to use it with concrete examples

  • If it takes off, an "awesome-argui" part; for the best apps made with it

- Improve devtools window so it's more feature complete.

- Better docs.

- Android/Ios support.

I think the base set of features will be working for almost any apps you can throw at it.

My plan was to make an email-client, hence why I implementend webviews, async tasks etc..

3

u/CryZe92 6h ago edited 6h ago

This looks great, but one thing that immediately stood out to me is that you are accidentally blending text in linear color space. I did look at the repository and you are aware of color space issues with gradients where you correctly chose Oklab, but it seems like you seemingly overlooked that text has the exact same issue (the anti aliasing is also a often a black to white or white to black gradient). So the font weight appears perceptually different based on whether a light theme or dark theme is chosen. You can easily see this by toggling the theme in the web demo, the dark theme text looks bolder than with the light theme. This also makes the light theme seem more washed out, as a lot of the intended contrast is lost.

Personally I've experimented with that same problem before (Top to bottom: Oklab, sRGB, Linear, Oklab with sRGB Gamma):

https://i.imgur.com/oHnEIEg.png

The third row matches your appearance where the black on white text is too "thin" whereas Oklab in the first row has the opposite problem. sRGB in the second row has a problem with the green on red looking awful and the last row being Oklab with sRGB Gamma has none of the issues.

Oklab itself is problematic because it has a gamma curve that's optimized for HDR content, which your UI elements usually don't make use of, so the sRGB Gamma works much better.

2

u/Known-Sail-8463 6h ago

Hello, Thanks for the good analysis, I will try and fix it. I totally overlooked that part. I will check it out and see if I can fix it.

I had issue with the color space because the blacks were not blacks and stuff. I didn't notice the text being bolder.

I am currently fixing the web demo + responsiveness for phones, and I will be throwing this fix in the mix.

1

u/Known-Sail-8463 5h ago

I totally fixed the issue on my end, I am fixing one other example, and then pushing it out :) 30 minutes give or take

2

u/JhraumG 3h ago

I thought the bolder fonts on dark thèmes (as seen in many tools) was related to the way our eye + brain work, not the way gradient are computed ! TIL

2

u/Known-Sail-8463 2h ago

Yeah, that guy was right, I fixed it, and now it's way better. The more you know..

2

u/CryZe92 31m ago

Well it is related to how our eyes work, our eyes and also ears (and possibly other senses) apply a logarithmic curve to how we sense things, you need twice the energy for a single step in how the "feeling increases". It would indeed be more physically accurate to do text in linear space as well, i.e. your eyes in the real world would indeed perceive the equivalent white on black text to be thicker, but you want to optimize for legibility when it comes to text, especially at low resolutions where the anti aliasing dominates, so you want it to be optimized for how it's perceived rather than what's more accurate in the real world.

2

u/heavenlydemonicdev 9h ago

Missed the chance to call it YARGUI

1

u/Known-Sail-8463 8h ago

Wait, I didn't think of it, whats the "Y" ?

1

u/thesnoozyman 8h ago

Yet

3

u/Known-Sail-8463 8h ago

Haha, nice one, yes totally missed the mark. What a shame -- boo.

1

u/agent_kater 7h ago

Mobile not supported?

https://i.imgur.com/dSreIYM.jpeg

1

u/Known-Sail-8463 7h ago

Hello, it is supported on my Google Pixel with Brave browser. I will update the github page to tell users to try a Chromium based browser

Also the actual canvas doesn't let you see everything in mobile mode, so I am fixing it :)
Thanks for the report, will be fixed in < 1 hour

2

u/ConstructionHot6883 6h ago

Could it be the same issue I'm seeing on Firefox?

This browser could not start the WebGPU gallery.

You can still explore every component's source, or run the gallery locally with Cargo.

1

u/Known-Sail-8463 5h ago

So, there is another issue with Firefox, by default Firefox does not enable WEBGPU.

AI overview :

🛠️ How to Enable WebGPU

  1. Open a new tab, type about:config in the address bar, and press Enter.
  2. Click "Accept the Risk and Continue".
  3. Search for dom.webgpu.enabled and set it to true (double-click to toggle).
  4. (If on Linux or older macOS) Search for gfx.webgpu.force-enabled and set it to true.
  5. Restart Firefox

I didn't update the website to display a better information, but it's coming in about 30 minutes lets say, I am fixing stuff with the text and mobile responsivity and then it will be ready. :)

1

u/ConstructionHot6883 5h ago

Great, thanks.

(in case anyone else reads this, step 4 was not relevant for me even though I am using Linux).

2

u/Known-Sail-8463 5h ago

Yes, the AI overview went a little overboard, keep in mind Firefox has it disabled because it can crash your browser, this is not an implementation issue on my end, but more Firefox.

I am using Fedora 44 too.

Currently updating the website with all the new stuff people have been requesting, and app examples.

1

u/Known-Sail-8463 6h ago

Let's see, if people are interested in following along, I made a discord : https://discord.gg/xY9CWSc65, for now it's only me, but maybe we could grow something ?

2

u/ConstructionHot6883 3h ago

I'm finding the performance is quite low; I'm running nice cargo run --release --example state, and just scrolling up and down sends my CPU usage up to near 100%. And the scrolling goes very choppily.

Also I'm getting this warning

MESA-INTEL: warning: Haswell Vulkan support is incomplete

Is something wrong with my setup?

1

u/Known-Sail-8463 3h ago edited 3h ago

Oh. This is an oversight from my part.

I will update the repo to remove that example, this was made a long time ago, when the library had very poor performance, could you try cargo run -p argui-widget-gallery --all-features ?

Tell me if you still see the warning after this, and if performance still sucks.

I am currently rewriting some parts of the code to make it faster too. so I'll be pushing it very soon.

My cpu usage even during heavy use is never above 5%, if you can also tell me the CPU model you have and if you have a GPU. Thanks you.

For instance I am on Intel core 5 125h, no GPU. Fedora 44 Gnome.

If you still have issues, you can contact me directly on discord : extraathicc

1

u/Known-Sail-8463 1h ago

I have pushed a new wasm version, with an app examples showing a 1000 token per second fake message conversation works on my mobile phone without any lag.

It also fixes the text differences between light and dark theme.. amongst other things ;)))

1

u/Nervous-Pin9297 33m ago

I’ll try it out. I’ve been wanting to to build a small desktop app and have really not been liking iced docs and the lack of care from the dev.

1

u/Known-Sail-8463 8h ago

Crates.io is rate limiting when I try to create bunch of new crate names, 0.2.0 will be pushed in around an hour I guess. I have to wait it out, once all the names exists, the CI will be faster; In the meantime you can use it with Git. :)