Elm-UI and Elm-CSS

When building our UIs with Elm, we're lucky to have such awesome libraries to choose from such as Elm-UI, Elm-CSS, Elm-Tailwind-Modules, etc. So ElmBook is obviously compatible with all of them!

Package approach

Since working with Elm-UI and Elm-CSS is so common we also provide two packages that can be used alongside ElmBook to make this process even simpler:

Do it yourself

We enable you to work with any custom elements via the ElmBook.Custom module. Lets see how we would integrate Elm-UI and ElmBook ourselves:

module ElmBook.ElmUI exposing (Book, Chapter, book)

import Element exposing (Element, layout)
import ElmBook.Custom exposing (customBook)


type alias Html state =
    Element (ElmBook.Custom.Msg state)


type alias BookBuilder state =
    ElmBook.Custom.BookBuilder state (Html state)


type alias Book state =
    ElmBook.Custom.Book state (Html state)


type alias Chapter state =
    ElmBook.Custom.Chapter state (Html state)


book : String -> BookBuilder state
book =
    customBook (layout [])

After that you would only need to use this custom book function and Book type when creating a new book and the custom Chapter type when creating a new chapter. Simple as that.