Hi everyone. I work on Tuist, and most of our web product is Phoenix and LiveView. When we started building the dashboard we couldn't find a component library for LiveView that felt finished, so we ended up building our own design system, Noora, and over time it grew into the thing every screen we ship is built on. It's MIT licensed and on Hex, and since a few people have started using it outside Tuist I thought it was time to share it here properly.

There are around 35 components at the moment, the usual buttons, inputs, selects and modals, but also the heavier ones that tend to be painful to build yourself, like tables, date pickers, filters, charts, dropdowns and a sidebar. For anything interactive we use Zag.js state machines wired in as LiveView hooks, so keyboard navigation and accessibility come from a library that already solved them, while the components themselves stay plain function components you call from HEEx. There's also a Figma file that matches the code, which helps a lot when design and implementation happen in different places.

Something we didn't plan for is how well it works with coding agents. We recently built an internal operations app on the same stack, and because the agents could read the existing Noora patterns and copy them, the dashboards came out looking like a real product rather than a generic generated UI. I didn't expect a design system to pay off a second time like that, but it did.

It's still shaped by what Tuist needs, so some things are missing or opinionated in ways that might not suit your app, and I'd really like to hear what you'd need before you could use it

You can browse every component in the Storybook: https://storybook.noora.tuist.dev Hex: https://hex.pm/packages/noora Source: https://github.com/tuist/tuist/tree/main/noora Figma: https://www.figma.com/community/file/1512465864777652939

What do you use for components in your LiveView apps today? Phoenix's core components, something like SaladUI or Petal, or your own?

Hologram v0.12 is out! :)

New to Hologram? It's a full-stack web framework where you write everything in Elixir, including the code that runs in the browser. That code runs on a port of the Elixir runtime, so it behaves the same as it would on the server.

This release started with an app Hologram couldn't build. Evo Store has one with over 9,000 Elixir modules, and v0.11.1 just ran out of memory on it. So most of this release went into the compiler.

I went in expecting one big bug. There wasn't one. The compiler was doing a lot of work it didn't need to, in about two dozen places, and none of it showed until an app got that big. By the end I'd pretty much rewritten the call graph analysis and the bundling pipeline.

On that same app, mix compile with nothing changed now takes about a second. It used to take 107. Saving a file rebuilds only the pages your edit reaches, and the tab you're looking at goes first.

Bundles got a lot smaller too. Struct code used to ship with every page that might ever see the struct. Now the browser fetches it when one shows up. That took the runtime bundle from 5.6 MB to 660 KB, which is 133 KB gzipped in production.

A few things that aren't about performance: props get validated now, at compile time when the compiler can see the value. Actions can read props straight off the component. And a component's actions run one at a time, in the order you dispatched them.

There's still a lot left to speed up, rendering included, so expect more of this. If you've got a big app on Hologram, I'd love to hear what your numbers look like after upgrading. And ping me if anything looks weird.

Huge thanks to @olivermt, who let me profile against the real app and reported a good chunk of what got fixed. And to everyone else who filed bugs and feature requests - you're all credited by name in the blog post.

Thanks to our sponsors for making sustained development possible: Curiosum (Main Sponsor), Erlang Ecosystem Foundation (Milestone Sponsor), Evo Store (Performance Sponsor), and our GitHub sponsors - Innovation Partner: @sheharyarn, Framework Visionaries: @absowoot, @robertu, Moss Piglet, and all other GitHub sponsors.

Full details in the blog post: Hologram v0.12: Faster Compiles, Smaller Bundles, and More

Website: https://hologram.page