A simple UI Explorer for ELM inspired by React-Storybook

elm, elm-lang, ui, ui-components
elm-package install kalutheo/elm-ui-explorer 1.0.4


Elm UI Explorer

Build Status

UI Component Explorers and Style Guides have been around for a while now. We don't build pages anymore but components that are assembled together to build systems.

In the Elm world, components are just called views, and are defined as pure functions. Elm UI Explorer takes advantage of the composability and the purity of Elm and offers a way to showcase your views and their states in a single tool. This project is inspired by React Storybook and styled with Tailwind


Main Features

  • Deep linking : You can easily share UI Explorer states by copying and pasting the url ( ex: attach them to your JIRA tickets, Pull Request etc... )

  • Categories : Your UI Explorer can be divided into categories. Convenient if you have many views and you want to group them by family.

  • Descriptions : A short paragraph can be added to describe how a view works and behaves.

Best Practices

  • In order to avoid CSS conflicts with built in UI Explorer Styles, consider using CSS Namespacing if using elm-css or any technic that prevents styles collisions.

  • All ids should be unique and be written in CamelCase without spaces or special characters (ex: DropDownMenu, Loading, Loaded etc... )

  • For Hot Reloading, it's recommended to use Create Elm App

  • Try to adopt SDD (StoryBook Driven Development), creating UI this way can be very efficient.

  • Use Atomic Design paradigm. This will help you build a scalable Design System.