Announcing Elm UI Explorer 2.0
A tool for browsing and documenting your Elm views in an isolated development environment.
Today, I am excited to announce the publication of Elm UI Explorer 2.0! This is a major release that includes:
- 🔌 Simplified API: for an easier usage
- ⚙️ New plugins system: for extending the tool
- 🖍 Customization: to match your brand identity
- 🎨 Complete redesign: fresh and minimalist
A little bit of history
Elm is, in my opinion, the best frontend language to build reliable web applications. The type safety it guarantees and it’s built in architecture makes working with it an absolute joy.
However, tools for quickly building & browsing UI elements in isolation sadly lack in Elm.
If like me, you are a developer coming from the JavaScript world, then I am sure that you already came across Storybook.
This tool has revolutionized the way we approach UI development. In fact, it provides a great development environment that allows you to develop, test, and document your UI elements seamlessly.
I always dreamt about this kind of tool for the Elm eco-system, and that is why 2 years ago, I decided to create Elm UI Explorer for Elm 0.18. A library that deals with browsing and documenting your Elm views in an isolated environment just like Storybook.
This project was a real success as it allows :
- Increased productivity: Just combine live reloading or hot reloading with Elm UI Explorer and enjoy building your views without opening your App;
- Better communication: Provides a way to lay down all your views and their states in one place. It acts as a single source of truth, which facilitates collaboration with other developers or even designers.
Now It‘s time to bring Elm UI Explorer to Elm 0.19 with version 2.0.
A Simplified API
Suppose that you have built this simple Elm view:
If you need to explore possible states of this button in Elm UI Explorer, just run the following snippet:
Extensible with plugins
Elm UI Explorer 2.0 version has been developed with extensibility in mind.
This new version comes with some built-in plugins such as the Notes Plugin.
This Plugin allows you to add markdown notes to your stories like that:
Then you should see some rich HTML content below your story:
This is perfect for enriching the documentation of your views.
Customizable
The new configuration type allows you to change the look and feel of the header.
You can customize the title, logo, and even the colors to make the explorer match your brand identity.
A brand new design
A more subtle and minimalist design has been integrated to Elm UI Explorer. This allows us to focus more on your visual content and reduces noise.
Example of a Design System built with UI Explorer:
Check it out!
I invite you to try it and check out the examples where you will find some useful codes samples to get you started. Feedbacks and PR are always welcome!
