Packages
lustre
3.0.0-rc.5
5.7.1
5.7.0
5.6.0
5.5.2
5.5.1
5.5.0
5.4.0
5.3.5
5.3.4
5.3.3
5.3.2
5.3.1
5.3.0
5.2.1
5.2.0
5.1.1
5.1.0
5.0.3
5.0.2
5.0.1
5.0.0
4.6.4
4.6.3
4.6.2
4.6.1
4.6.0
4.5.1
4.5.0
4.4.4
4.4.3
4.4.1
4.4.0
4.3.6
4.3.5
4.3.4
4.3.3
4.3.2
4.3.1
4.3.0
4.2.6
4.2.5
4.2.4
4.2.3
4.2.2
4.2.1
4.2.0
4.1.8
4.1.7
4.1.6
4.1.5
4.1.4
4.1.3
4.1.2
4.1.1
4.1.0
4.0.0
4.0.0-rc1
4.0.0-rc.2
3.1.4
3.1.3
3.1.2
3.1.1
3.1.0
3.0.12
3.0.11
3.0.10
3.0.9
3.0.8
3.0.7
3.0.6
3.0.5
3.0.4
3.0.3
3.0.2
3.0.1
3.0.0
3.0.0-rc.8
3.0.0-rc.7
3.0.0-rc.6
3.0.0-rc.5
3.0.0-rc.4
3.0.0-rc.3
3.0.0-rc.2
3.0.0-rc.1
2.0.1
2.0.0
1.3.0
1.2.0
1.1.0
1.0.0
Create HTML templates, single page applications, Web Components, and real-time server components in Gleam!
Current section
Files
Jump to
Current section
Files
README.md
# Lustre
An Elm-inspired framework for building web apps in Gleam!
---
[](https://hex.pm/packages/lustre)
[](https://hexdocs.pm/lustre/)
```gleam
import gleam/int
import lustre
import lustre/element.{button, div, p, text}
import lustre/event.{on_click}
import lustre/cmd
pub fn main() {
let app = lustre.simple(init, update, render)
let assert Ok(_) = lustre.start(app, "#app")
Nil
}
fn init() {
0
}
type Msg {
Incr
Decr
}
fn update(state, msg) {
case msg {
Incr -> state + 1
Decr -> state - 1
}
}
fn render(state) {
div(
[],
[
button([on_click(Decr)], [text("-")]),
p([], [text(int.to_string(state))]),
button([on_click(Incr)], [text("+")]),
],
)
}
```
---
❗️ This package relies on Gleam's JavaScript FFI and is intended to be run in
the browser. **It will not work if your are targetting Node.js or Erlang.**
---
## Installation
Lustre is available on [Hex](https://hex.pm/packages/lustre). You can install
it like any other Hex package:
```sh
$ gleam add lustre
```