Would you be interested in an opensource Liveview storybook?

Just released 0.1.0 :tada:

:point_right: GitHub
:point_right: Official documentation
:point_right: Demo


Now on track for 0.2.0 :slight_smile:

Last features:

  • copy/paste code snippets
  • component sub-navigation
  • preview your component source code

Today I shipped the ability to mix regular page entries within your storybook content.
We found it useful to share some general UI guidelines with the team.


Shipped 0.2.0 a few days ago and 0.3.0 is under work with a new responsive UI


After a lot of technical code and refactoring (btw I still need help on this topic), I just started working on a pillar feature of the storybook: component documentation & playground.

It will list and document all your component’s properties, and allow you to play with them interactively.

I wrote an attributes API that mimics forthcoming LiveView 0.18.0 declarative assigns

Stay tuned :fire:

1 Like

This is cool! We are slowly migrating over to a more component based structure for our liveview project.
Thanks for you effort, will give it a go soonish. :slight_smile:

1 Like

Cool! Feel free to give some feedbacks after you tried it.

If you are still building your components library, make sure to have a look at our other library, it helped us a lot.


This came at the right time for us, as I was planning to dump all our components on a blank page to aid our designer as we start our topdown redesign with Phoenix Components next week. Now we have this set up for our atomic components. We’re very excited to see how this progresses.

1 Like

A couple of days later, the new playground tab (inspired by what @msaraiva did on Surface Catalogue) is shaping up!


I just went through a bit of refactoring to compartmentalize component playground rendering in a dedicated child LiveView.

Below is an example where a component crashes, because of a missing required attribute.
I’m always amazed by seeing the crashed LiveView restart & recover by itself, with 0 lines of code.

In a further release, it will also help with a real-time state inspection feature.


Looking awesome!

1 Like