# Tagg
[](https://hex.pm/packages/tagg)
[](https://hexdocs.pm/tagg/)
Tagg is an HTML templating engine written in [Gleam](https://gleam.run/) that
uses XML/HTML tag syntax to render HTML.
Goals of the project include:
- Familiar HTML tag syntax that editors can already highlight and format
- Write custom, reusable components (e.g. the `<component />` tag)
- Include scripts (e.g. the `<include />` tag)
**Note**: This library is still being written!
## Tags
Here is a list of the supported custom tags, with sample usage:
- `<component path="/path/to/component.html" />`
- `<include path="/path/to/script.js" />`
- `<for items="list" item="item" index="i" />`
## TODO
- Add an `<if />` tag
## Example
### router.gleam
```gleam
fn events_page(req: Request, web_context: Context) -> Response {
// The home page can only be accessed via GET requests, so this middleware is
// used to return a 405: Method Not Allowed response for all other methods.
use <- wisp.require_method(req, Get)
let context =
cx.dict()
|> cx.add_list("events", [
cx.dict()
|> cx.add_string("name", "Muse Concert")
|> cx.add_string("location", "Los Angeles, CA"),
cx.dict()
|> cx.add_string("name", "The Killers")
|> cx.add_string("location", "Las Vegas, NV"),
])
case tagg.render(web_context.tagg, "events.html", context) {
Ok(html) -> {
wisp.ok()
|> wisp.html_body(string_builder.from_string(html))
}
Error(err) -> {
io.debug(err)
wisp.internal_server_error()
}
}
}
```
### events.html
```html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Events</title>
</head>
<body>
<component path="/events-component.html"/>
</body>
</html>
```
### events-component.html
```html
<h2>Events</h2>
<table border="1">
<for items="events" item="event" index="i">
<tr>
<td>@event.name</td>
<td>@event.location</td>
</tr>
</for>
</table>
```
### Output
The output HTML (whitespace is preserved) is:
```html
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>Events</title>
</head>
<body>
<h2>Events</h2>
<table border="1">
<tr>
<td>Muse Concert</td>
<td>Los Angeles, CA</td>
</tr>
<tr>
<td>The Killers</td>
<td>Las Vegas, NV</td>
</tr>
</table>
</body>
</html>
```
The page looks like this:
## Installing
```sh
gleam add tagg
```
## Development
```sh
gleam run # Run the project
gleam test # Run the tests
gleam shell # Run an Erlang shell
```
