htmz

Quick start

gleam test  # Run the tests
gleam shell # Run an Erlang shell

Installation

If available on Hex this package can be added to your Gleam project:

gleam add htmz

Its documentation can be found at https://hexdocs.pm/htmz.

Usage

Examples

import htmz.{Html, Title, Head, Body, Div} as z
import gleam/io

pub fn main() {
  let html =
    Html
    |> z.child(
      Body
      |> z.child(
        Div
        |> z.text("Hello World"),
      ),
    )

   html
   |> z.to_string()
   |> io.debug()
}

fn nav(inner: Htmz) -> Htmz {
  Z(".admins")
  |> z.children([
    Header
    |> z.children([
      H2
      |> z.text("Administratorzy"),
      Menu
      |> z.class("sub-menu")
      |> z.hx_target("#admins-main")
      |> z.hx_push_url("true")
      |> z.hx_indicator("#indicator")
      |> z.hx_sync("closest menu:replace")
      |> z.children([
        Li
        |> z.child(
          Button
          |> z.hx_get("/admin/admins")
          |> z.text("Lista"),
        ),
        Li
        |> z.child(
          Button
          |> z.hx_get("/admin/admins/new")
          |> z.text("Dodaj"),
        ),
      ]),
    ]),
    Z("article#admins-main")
    |> z.child(inner),
  ])
}

pub fn main() {
  let el = 
    Html
    |> z.children([
      Head
      |> z.children([
        Title
        |> z.text("Hello World"),
        Meta
        |> z.charset("utf-8"),
      ]),
      Body
      |> z.children([
        Menu
        |> z.children([
          Li
          |> z.child(
            A
            |> z.href("/about")
            |> z.text("About"),
          ),
          Li
          |> z.child(
            A
            |> z.href("/contact")
            |> z.text("Contact"),
          ),
        ]),
        Main
        |> z.children([
          H1
          |> z.text("Hello World"),
        ]),
      ]),
    ])

   el
   |> z.to_string()
   |> io.debug()
}

"type=" issue

The "type" is a keyword in gleam, so you can't use it as a field name. Use "type_" instead.

Input
|> z.type_("text")

"Z" element

You can use "Z" element to create any element using css selector notation

Z("sl-button")
|> z.attr("variant", "success")
|> z.label("Click me")

Z(".foo#bar[baz=qux]")
// <div class="foo" id="bar" baz="qux"></div>

Z("i.fa.fa-user")
// <i class="fa fa-user"></i>

Z("input#password-input.form-control[type=password][name=password]")
// <input id="name-input" class="form-control" type="text" placeholder="Name" />

HTMX support

All htmx attributes are supported.

Button
|> z.HxGet("/load-me")
|> z.HxSwap("outerHTML")
|> z.HxTrigger("load")

Alpine.js support

All Alpine.js attributes are supported.

Div
|> z.x_data("{ username: 'calebporzio' }")
|> z.children([
  Text("Username: "),
  Strong
  |> z.x_text("username"),
])

Inserting text

Text is just a Text node but it has a value parameter. You can insert text nodes like this:

Div |> z.child(Text("Hello World"))

However, since this is a common operation, there is a text(el: Htmz, value: String) helper function:

Div |> z.text("Hello World")

The z.text() does exactly the same thing as the previous example.

Conditions

Using case you can conditionally render elements:

Div
|> z.children([
  H3 
  |> z.text("Title"),
  case maybe_user {
    Ok(user) -> z.text(user.name)
    Error(_) -> z.text("No user")
  }
])

Sometimes it's required to not insert anything. In this case, there is a special node: Nothing

Div
|> z.children([
  H3 |> z.text("Title"),
  case user 
    Ok(user) -> z.text(user.name)
    Error(_) -> Nothing
  }
])

For conditionally inserting attributes follow this pattern:

Div
|> case is_active {
  True -> z.class(_, "active")
  False -> z.nothing(_)
}
|> z.text("Hello World")