1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
# Lustre
[](https://hex.pm/packages/lustre)
An Elm-inspired framework for building web apps in Gleam!
```gleam
import gleam/int
import lustre
import lustre/element.{text}
import lustre/element/html.{div, button, p}
import lustre/event.{on_click}
pub fn main() {
let app = lustre.simple(init, update, view)
let assert Ok(_) = lustre.start("[data-lustre-app]", Nil)
Nil
}
fn init(_) {
0
}
type Msg {
Incr
Decr
}
fn update(model, msg) {
case msg {
Incr -> model + 1
Decr -> model - 1
}
}
fn view(model) {
let count = int.to_string(model)
div([], [
button([on_click(Decr)], [text(" + ")]),
p([], [text(count)]),
button([on_click(Incr)], [text(" - ")])
])
}
```
## Documentation
You can find the official documentation over at [pkg.hayleigh.dev/lustre](https://pkg.hayleigh.dev/lustre).
Note that if you're viewing the documentation published on Hexdocs, you may find
that things are missing! Because of the way Gleam's documentation is generated,
packages and functions that target JavaScript don't get documented.
## Installation
Lustre is available on [Hex](https://hex.pm/packages/lustre). You can install
it like any other Hex package:
```sh
$ gleam add lustre
```
|
