{"id":21618653,"url":"https://github.com/dtwrks/elm-ui-book","last_synced_at":"2026-03-16T08:34:54.139Z","repository":{"id":50927197,"uuid":"327602873","full_name":"dtwrks/elm-ui-book","owner":"dtwrks","description":"UI documentation tool for Elm applications. ","archived":false,"fork":false,"pushed_at":"2021-07-18T11:02:17.000Z","size":285,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-02T12:05:46.580Z","etag":null,"topics":["design-system","elm","elm-css","elm-ui","storybook","ui-docs","ui-library"],"latest_commit_sha":null,"homepage":"https://package.elm-lang.org/packages/dtwrks/elm-ui-book/latest","language":"Elm","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/dtwrks.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-07T12:18:05.000Z","updated_at":"2021-07-18T11:01:34.000Z","dependencies_parsed_at":"2022-08-25T11:30:24.450Z","dependency_job_id":null,"html_url":"https://github.com/dtwrks/elm-ui-book","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtwrks%2Felm-ui-book","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtwrks%2Felm-ui-book/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtwrks%2Felm-ui-book/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/dtwrks%2Felm-ui-book/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/dtwrks","download_url":"https://codeload.github.com/dtwrks/elm-ui-book/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248362482,"owners_count":21091138,"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","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":["design-system","elm","elm-css","elm-ui","storybook","ui-docs","ui-library"],"created_at":"2024-11-24T23:06:20.775Z","updated_at":"2026-03-16T08:34:54.068Z","avatar_url":"https://github.com/dtwrks.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Important!\n\n**This package has been deprecated in favor of [dtwrks/elm-book](https://package.elm-lang.org/packages/dtwrks/elm-book/latest/)** – 100% features are already there plus a lot more. Please use that package from now on.\n\n# UI Book\n\nA book that tells the story of the UI elements of your Elm application.\n\n- Plain Elm (no custom setup)\n- Customizable theme colors and header\n- Organize your UI elements into chapters and sections\n- Showcase stateful widgets, not only static elements\n- Log your actions\n- Built-in integration with elm-ui, elm-css and others\n- Built-in development server (Optional)\n\nA live example can be found here: https://elm-ui-book.netlify.app/\n\n## Start with a chapter.\n\nYou can create one chapter for each one of your UI elements and split it in sections to showcase all of their possible variants.\n\n    buttonsChapter : UIChapter x\n    buttonsChapter =\n        chapter \"Buttons\"\n            |\u003e withSections\n                [ ( \"Default\", button [] [] )\n                , ( \"Disabled\", button [ disabled True ] [] )\n                ]\n\nDon't be limited by this pattern though. A chapter and its sections may be used however you want. For instance, if it's useful to have a catalog of possible colors or typographic styles in your documentation, why not dedicate a chapter to it?\n\n## Then, create your book.\n\nYour UIBook is a collection of chapters.\n\n    book : UIBook ()\n    book =\n        book \"MyApp\" ()\n            |\u003e withChapters\n                [ colorsChapter\n                , buttonsChapter\n                , inputsChapter\n                , chartsChapter\n                ]\n\nThis returns a standard `Browser.application`. You can choose to use it just as you would any Elm application – however, this package can also be added as a NPM dependency to be used as zero-config dev server to get things started.\n\nIf you want to use our zero-config dev server, just install `elm-ui-book` as a devDependency then run `npx elm-ui-book {MyBookModule}.elm` and you should see your brand new Book running on your browser.\n\n## Customize the book's style.\n\nYou can configure your book with a few extra settings to make it more personalized. Want to change the theme color so it's more fitting to your brand? Sure. Want to use your app's logo as the header? Go crazy.\n\n    book \"MyApp\" ()\n        |\u003e withColor \"#007\"\n        |\u003e withSubtitle \"Design System\"\n        |\u003e withChapters [ ... ]\n\n## Built-in integration with [elm-css](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest), [elm-ui](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/) and others.\n\nIf you're using one of these two common ways of styling your Elm app, just import the proper definitions and you're good to go.\n\n    import UIBook.ElmCSS exposing (UIBook, book)\n    import UIBook exposing (withChapters)\n\n    main : UIBook ()\n    main =\n        book \"MyElmCSSApp\" ()\n            |\u003e withChapters []\n\nIf you're using other packages that also work with a custom html, don't worry , defining a custom setup is pretty simple as well. Check the docs!\n\n## Log your actions\n\nLog your action intents to showcase how your components would react to interactions.\n\n    -- Will log \"Clicked!\" after pressing the button\n    button [ onClick \u003c| logAction \"Clicked!\" ] []\n\n    -- Will log \"Input: x\" after pressing the \"x\" key\n    input [ onInput \u003c| logActionWithString \"Input: \" ] []\n\n## Showcase stateful widgets\n\nSometimes it's useful to display a complex component so people can understand how it works on an isolated environment, not only see their possible static states. But how to accomplish this with Elm's static typing? Simply provide your own custom \"state\" that can be used and updated by your own elements.\n\n    type alias MyState =\n        { input : String, counter : Int }\n\n\n    initialState : MyState\n    initialState =\n        { input = \"\", counter = 0 }\n\n\n    main : UIBook MyState\n    main =\n        book \"MyStatefulApp\" initialState\n            |\u003e withChapters\n                [ inputChapter\n                , counterChapter\n                ]\n\n\n    counterChapter : UIChapter { x | counter : Int }\n    counterChapter =\n        let\n            updateCounter state =\n                { state | counter = state.counter + 1 }\n        in\n        chapter \"Counter\"\n            |\u003e withStatefulSection\n                (\\state -\u003e\n                    button\n                        [ onClick (updateState updateCounter) ]\n                        [ text \u003c| String.fromInt state.counter ]\n                )\n\n\n    inputChapter : UIChapter { x | input : String }\n    inputChapter =\n        let\n            updateInput value state =\n                { state | input = value }\n        in\n        chapter \"Input\"\n            |\u003e withStatefulSection\n                (\\state -\u003e\n                    input\n                        [ value state.input\n                        , onInput (updateState1 updateInput)\n                        ]\n                        []\n                )\n\n## Built-in Development Server\n\nIf you want to use our zero-config dev server, just install `elm-ui-book` as an npm devDependency then run `npx elm-ui-book {MyBookModule}.elm` and you should see your brand new Book running on your browser.\n\n🤫 I'll let you in on a secret… this is just an instance of [elm-live](https://www.elm-live.com) with a few predefined arguments passed in! So any additional arguments you pass to this command will work exactly like it would with elm-live, so `npx elm-ui-book {MyBookModule}.elm --port=3000 --dir=./static` would start your development server on port 3000 with static files from the `./static` folder.\n\n## What's next?\n\nSo far this project has been following a lot of the same standards as [storybook](http://storybook.js.org/) – however, why should we limit ourselves by it? I'm thinking about exploring more book-like features that would make this project more useful for design systems and documentations and not only a library of UI components. Let's see! :)\n\nIf you have any ideas or problems, please reach me on Elm's slack as georgesboris.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtwrks%2Felm-ui-book","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdtwrks%2Felm-ui-book","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdtwrks%2Felm-ui-book/lists"}