Packages
lustre
2.0.1
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
A framework for building create web apps – powered by Gleam and React!
---
[](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.application(#(0, cmd.none()), update, render)
lustre.start(app, "#app")
}
pub type Action {
Incr
Decr
}
fn update(state, action) {
case action {
Incr -> #(state + 1, cmd.none())
Decr -> #(state - 1, cmd.none())
}
}
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
If available on Hex, this package can be added to your Gleam project:
```sh
gleam add lustre
```
and its documentation can be found at <https://hexdocs.pm/lustre>. You will also
need to install `react` and `react-dom` from npm:
```sh
npm i react react-dom
```
---
## Development
First, make sure you have both Gleam and Node.js installed, then:
```bash
npm i
npm start
```
This sets up `chokidar` to watch our gleam source code and runs the compiler
whenever we make a change. It also starts a server that will serve the examples
located in `test/example/`.