🎉 Hologram - An Isomorphic Elixir Web Framework is Here!

bartblast

Creator of Hologram

Hey Elixir community!

First, I owe you all an apology. There’s a running joke among my friends that Hologram is like nuclear fusion or fully autonomous Tesla cars - always “coming very soon™” . While I’ve been telling many of you earlier dates, life had other plans.

I want to be transparent with you - the past two years have been incredibly challenging for me health-wise. I went through three surgeries, and from January to July, I was bedridden and unable to walk. It completely turned my life and work upside down. But I’m back now, stronger than ever, and ready to finally share Hologram with you!

What’s Hologram?

Hologram is an isomorphic web framework that runs as your frontend layer in Elixir projects. While it requires Phoenix to run, you can use it with other backend solutions like Ash (HASH stack, anyone? ). What makes it special? I’ve rebuilt it from the ground up with the ambitious goal of supporting 100% of Elixir syntax eventually.

Current Requirements

Elixir 1.13.4 - 1.17.3
OTP 22.3 - 27.1

(Other versions might work too, but they haven’t been tested yet)

Let’s Talk About the Current State

I want to be upfront about some current limitations and quirks:

While we don’t have 100% Elixir syntax coverage yet, what’s implemented lets you fully experience Hologram’s programming model.
Live reloading is a bit moody right now - if you run into issues, try restarting the server or deleting the _build directory.
Bundle sizes are currently larger than they’ll eventually be. The transpiled code is intentionally verbose for easier debugging.
Compilation is taking its time because everything recompiles on any change. We had incremental compilation before, but I temporarily removed it for better debugging.
Rendering is currently slower than planned due to full page rerenders on component state changes and a temporary bitstring implementation (yes, we’re using integer arrays for bits right now ).

What’s Next?

I’m working on Hologram full-time for the next couple of months, focusing on:

Addressing all the limitations mentioned above
Implementing cookies and session support
Porting the remaining Erlang functions to JS
Adding tons of optimizations

I believe we’ll be production-ready in a few months. I’ve spent the past months sharpening the saw, and now I’m all in!

How Can You Help?

The best help right now would be:

Play with Hologram and report any bugs you find
Share your feedback and experiences
Stay tuned for coding tasks if you’d like to contribute directly

Got questions? Create a topic in our Hologram Forum - I’m there daily, and your questions will help shape the documentation!

New Website!

Check out the new Hologram website! (Desktop users, you might want to disable f.lux or similar tools for an hour to get the full experience )

Special Thanks

A massive thank you to everyone who reached out, showed interest, and cheered me on during this journey. And the most special thanks goes to Emilia - without you, I don’t know how I would have made it through those bedridden months. You’re amazing!

Spread the Word!

If you’re excited about Hologram, please share this announcement with your network! Let’s get more eyes on this project and build something amazing together.

Let’s make web development in Elixir even more awesome!

P.S. Remember, this is just the beginning. The current quirks will be resolved soon, and I can’t wait to see what you’ll build with Hologram!

GitHub repo: GitHub - bartblast/hologram: Full stack Elixir web framework that intelligently compiles Elixir client-side code to JavaScript · GitHub

Website: https://hologram.page/

20 comments

/hologram #web-frameworks #releases #frameworks

78 4883 20

2025-01-25 23:53:59 UTC

First 10 of 20 Posts

AstonJ

Congrats on the launch Bart!

It’s great to see the Elixir ecosystem expanding, and in a way where new tools like Hologram are designed to work with stalwarts like Phoenix

Btw a quick easy way to link to the Hologram forum is forum.elixirforum.com/hologram

I’m also sorry to hear you’ve been poorly, I wish you a continued speedy recovery and you and Hologram all the very best for 2025!

Post #2

ken-kost

I got a hobby project in Ash, I will try it on there. Will post impressions. From the looks of it looks promising!

Post #3

venkatd

This is exciting stuff! In particular I’m excited about the ability to write Elixir on the full stack

Post #5

bartblast

Creator of Hologram

Sounds good! Let me know in case you need help! More documentation and guides are in progress!

Post #6

zachdaniel

Creator of Ash

needs an igniter installer

EDIT: me shortly:

mix igniter.new hash --with phx.new --install ash,hologram

With an igniter installer that sets up hologram you could have a one liner setup

Excited to tinker.

Post #8

bartblast

Creator of Hologram

nice!

Post #9

zachdaniel

Creator of Ash

Setup was easy, seems pretty clear how one might leverage Ash inside of commands

No notes really Wish I had a bit more time to tinker, but I don’t see any challenges to folks using Ash with Hologram as it stands now.

At some point I think a super power might be declarative modeling data sources for pages, and how commands affect that data. I’ve got some ideas for a “data pipeline” concept that might slot well into Hologram some day

Post #10

jam

Congrats Bart! Hologram looks awesome. Looking forward to seeing where you take it. Also great to hear that you’re doing better health wise.

A few initial thoughts:

Curious how the actions and commands work for a real world scenario. Looks like those areas are wip in the docs so looking forward to reading more when they’re ready.
A couple of simple app examples (e.g. todo app or basic chat) would also be really helpful to see recommended ways of structuring an app.
It looks like all state hangs off a component. Is it possible to have a global store that any component could access?
Would also be great to see how you might approach working with browser based APIs, e.g. localStorage and indexedDB and if it’s possible to use an npm package like idb.