elm-beautiful-example

This package makes it easy to create beautiful examples for your Elm projects and packages.

(If you are viewing this on package.elm-lang.org, images are broken due to elm-lang/elm-package#238. You can see the README with working images on github.)

Usage

Start with your not-so-pretty Elm example:

1. Install elm-beautiful-example

   elm-package install avh4/elm-beautiful-example

2. Add the following to your example (typically in the same file where your view function is defined) and fill in the fields as appropriate for your example:

   beautifulView : Model -> Html Msg
   beautifulView model =
       view model
           |> BeautifulExample.view
               { title = "Counter"
               , details =
                   Just """This shows how elm-beautiful-example can be used to
                     wrap the view of any other program (in this case, the Counter example
                     from the Elm Guide)."""
               , color = Just Color.blue
               , maxWidth = 400
               , githubUrl = Just "https://github.com/avh4/elm-beautiful-example"
               , documentationUrl = Just "http://package.elm-lang.org/packages/avh4/elm-beautiful-example/latest"
               }

3. Replace references to your original view function with the beautifulView that you just created:

    main : Program Never Model Msg
    main =
        Html.program
   -        { view = view
   +        { view = beautifulView
            , update = update
            , subscriptions = \_ -> Sub.none
            , init = ( model, Cmd.none )
            }

Now your example will look like this: