{"id":15059458,"url":"https://github.com/kalutheo/elm-ui-explorer","last_synced_at":"2025-08-01T17:05:36.041Z","repository":{"id":25118834,"uuid":"95826226","full_name":"kalutheo/elm-ui-explorer","owner":"kalutheo","description":null,"archived":false,"fork":false,"pushed_at":"2023-03-05T03:00:06.000Z","size":5941,"stargazers_count":216,"open_issues_count":40,"forks_count":25,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-20T11:05:53.380Z","etag":null,"topics":["elm","elm-lang","ui","ui-components"],"latest_commit_sha":null,"homepage":"https://package.elm-lang.org/packages/kalutheo/elm-ui-explorer/latest","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kalutheo.png","metadata":{"files":{"readme":"readme.md","changelog":"CHANGELOG.MD","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-06-29T22:43:49.000Z","updated_at":"2024-11-26T04:22:48.000Z","dependencies_parsed_at":"2024-01-08T20:19:17.434Z","dependency_job_id":null,"html_url":"https://github.com/kalutheo/elm-ui-explorer","commit_stats":{"total_commits":428,"total_committers":16,"mean_commits":26.75,"dds":0.5677570093457944,"last_synced_commit":"4d93469614847cf8d478b387af8411ca17a35169"},"previous_names":[],"tags_count":22,"template":false,"template_full_name":null,"purl":"pkg:github/kalutheo/elm-ui-explorer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalutheo%2Felm-ui-explorer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalutheo%2Felm-ui-explorer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalutheo%2Felm-ui-explorer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalutheo%2Felm-ui-explorer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kalutheo","download_url":"https://codeload.github.com/kalutheo/elm-ui-explorer/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kalutheo%2Felm-ui-explorer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268265688,"owners_count":24222521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-01T02:00:08.611Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["elm","elm-lang","ui","ui-components"],"created_at":"2024-09-24T22:44:01.658Z","updated_at":"2025-08-01T17:05:36.003Z","avatar_url":"https://github.com/kalutheo.png","language":"CSS","funding_links":[],"categories":["Showcase generators"],"sub_categories":["Outdated Boilerplates"],"readme":"# Elm UI Explorer\n\n![logo](https://raw.githubusercontent.com/kalutheo/elm-ui-explorer/master/explorer-logo-small.png)\n\n![Build Status](https://github.com/kalutheo/elm-ui-explorer/workflows/Elm%20CI/badge.svg)\n\n[UI Component Explorers](https://blog.hichroma.com/the-crucial-tool-for-modern-frontend-engineers-fb849b06187a) and [Style Guides](http://styleguides.io/) have been around for a while now.\nWe don't build pages anymore but components that are assembled together to build systems.\n\nIn the Elm world, components are just called views, and are defined as [pure functions](https://en.wikipedia.org/wiki/Pure_function).\nElm UI Explorer takes advantage of the composability and the purity of Elm and offers a way to showcase\nyour views and their states in a single tool.\nThis project is inspired by [React Storybook](https://storybook.js.org/) and styled with [Tailwind](https://tailwindcss.com/)\n\n### How to use it ?\n\n\n### Quick Start \n\nFirst install the cli.\n```\nnpm install @kalutheo/uie\n```\n\nThen initialize your project.\n```\nuie init\n```\n\nTo run your explorer:\n```\nnpm run uie\n```\nFinally, you should be able to see your explorer by visiting `http://localhost:8000`\n\n\n\n\n### Manual Setup\n\nHere is a basic example of a button showcased in Elm UI Explorer:\n\nAdd this to your `Main.elm` file.\n\n```elm\nimport Html\nimport Html.Attributes exposing (style)\nimport UIExplorer exposing (UIExplorerProgram, defaultConfig, explore, storiesOf)\n\n\nbutton : String -\u003e String -\u003e Html.Html msg\nbutton label bgColor =\n    Html.button\n        [ style \"background-color\" bgColor ]\n        [ Html.text label ]\n\n\nmain : UIExplorerProgram {} () {}\nmain =\n    explore\n        defaultConfig\n        [ storiesOf\n            \"Button\"\n            [ ( \"SignIn\", \\_ -\u003e button \"Sign In\" \"pink\", {} )\n            , ( \"SignOut\", \\_ -\u003e button \"Sign Out\" \"cyan\", {} )\n            , ( \"Loading\", \\_ -\u003e button \"Loading please wait...\" \"white\", {} )\n            ]\n        ]\n```\n\nThen in your Html add a link to the Elm UI Explorer stylesheet\n\n```html\n\u003clink\n  rel=\"stylesheet\"\n  type=\"text/css\"\n  href=\"https://cdn.jsdelivr.net/gh/kalutheo/elm-ui-explorer@master/assets/styles.css\"\n/\u003e\n```\n\nYou can now run the `Main.elm` application with the tool of your choice.\n\n\n### Examples\n\n\n- [Simple](https://elm-ui-explorer.netlify.app/examples/button/explorer/#Default/Button/Primary) - The simplest example\n- [Notes \u0026 Code](https://elm-ui-explorer.netlify.app/examples/button/explorer-with-notes/#Default/Button/Primary) - How to add markdown and source code to your explorer\n\n\n- [Custom Menu](https://elm-ui-explorer.netlify.app/examples/button/explorer-with-notes/#Default/Button/Primary) - Advanced example with custom [MenuViewEnhancer](https://package.elm-lang.org/packages/kalutheo/elm-ui-explorer/latest/UIExplorer#MenuViewEnhancer)\n\n- [Knobs](https://elm-ui-explorer.netlify.app/examples/button/explorer-with-knobs/#Default/Button/WithKnobs) - How to make interactive stories \n\n- [Design System](https://elm-ui-explorer.netlify.app/examples/dsm/#Getting%20Started/About/About) - A real world example of a Design System\n\n\n[Checkout all examples source code here](https://github.com/kalutheo/elm-ui-explorer/tree/master/examples)\n\n### Main Features\n\n- **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... )\n\n- **Categories:** Your UI Explorer can be divided into categories. Convenient if you have many views and you want to group them by family.\n\n* **Plugins:** Elm UI Explorer has a mechanism that let you extend the tool by creating your own plugins. By defaults the library comes with [built in plugins](https://github.com/kalutheo/elm-ui-explorer/tree/master/src/UIExplorer/Plugins).\n\n- **Customization:** You can make the header match your brand identity by changing colors, title and icons.\n\n\n- **Responsivness:** The explorer navigation is adapted for devices with small screens.\n\n- **Dark mode:** For aesthetic purposes, Dark mode can be enabled with one click.\n\n### Best Practices\n\n- For hot reloading, it's recommended to use [Create Elm App](https://github.com/halfzebra/create-elm-app). [Elm Live](https://github.com/wking-io/elm-live) is also a great alternative that provides live reloading.\n\n- In order to avoid CSS conflicts with built in UI Explorer Styles, consider using [elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/) or [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/). Theses tools use technics that prevent styles collisions by scoping the css.\n\n- Try to adopt [SDD (StoryBook Driven Development)](https://medium.com/nulogy/storybook-driven-development-a3c517276c07), creating UI this way can be very efficient.\n\n- Use [Atomic Design](http://bradfrost.com/blog/post/atomic-web-design/) paradigm. This will help you build a scalable Design System.\n\n* All ids (Story names and categories) should be unique (ex: DropDown Menu, Loading, Loaded etc... )\n\n### FAQ\n\nFor further informations, you can check the\n[Frequently Asked Questions (FAQ)](FAQ.md) section.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalutheo%2Felm-ui-explorer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkalutheo%2Felm-ui-explorer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkalutheo%2Felm-ui-explorer/lists"}