3 files changed, 88 insertions, 0 deletions
diff --git a/examples/events/gleam.toml b/examples/events/gleam.toml
new file mode 100644
index 0000000..46a962c
--- /dev/null
+++ b/examples/events/gleam.toml
@@ -0,0 +1,7 @@
+name = "events"
+version = "1.0.0"
+target = "javascript"
+
+[dependencies]
+gleam_stdlib = "~> 0.34"
+lustre = { path = "../../" }
+\ No newline at end of file
diff --git a/examples/events/manifest.toml b/examples/events/manifest.toml
new file mode 100644
index 0000000..715dadc
--- /dev/null
+++ b/examples/events/manifest.toml
@@ -0,0 +1,11 @@
+# This file was generated by Gleam
+# You typically do not need to edit this file
+
+packages = [
+  { name = "gleam_stdlib", version = "0.34.0", build_tools = ["gleam"], requirements = [], otp_app = "gleam_stdlib", source = "hex", outer_checksum = "1FB8454D2991E9B4C0C804544D8A9AD0F6184725E20D63C3155F0AEB4230B016" },
+  { name = "lustre", version = "3.0.12", build_tools = ["gleam"], requirements = ["gleam_stdlib"], source = "local", path = "../.." },
+]
+
+[requirements]
+gleam_stdlib = { version = "~> 0.34" }
+lustre = { path = "../../" }
diff --git a/examples/events/src/events.gleam b/examples/events/src/events.gleam
new file mode 100644
index 0000000..7b4a4da
--- /dev/null
+++ b/examples/events/src/events.gleam
@@ -0,0 +1,70 @@
+// IMPORTS ---------------------------------------------------------------------
+
+import gleam/int
+import lustre
+import lustre/attribute
+import lustre/element.{type Element, text}
+import lustre/element/html.{button, div, p}
+import lustre/event
+
+// MAIN ------------------------------------------------------------------------
+
+pub fn main() {
+  // A `simple` lustre application doesn't produce `Effect`s. These are best to 
+  // start with if you're just getting started with lustre or you know you don't
+  // need the runtime to manage any side effects.
+  let app = lustre.simple(init, update, view)
+  let assert Ok(_) = lustre.start(app, "[data-lustre-app]", Nil)
+}
+
+// MODEL -----------------------------------------------------------------------
+
+pub type Model {
+  Model(count: Int, active: Bool)
+}
+
+pub fn init(_) -> Model {
+  Model(count: 0, active: True)
+}
+
+// UPDATE ----------------------------------------------------------------------
+
+pub opaque type Msg {
+  Incr
+  Decr
+  Reset
+  Toggle
+}
+
+pub fn update(model: Model, msg: Msg) -> Model {
+  case msg {
+    Incr -> Model(..model, count: model.count + 1)
+    Decr -> Model(..model, count: model.count - 1)
+    Reset -> Model(..model, count: 0)
+    Toggle -> Model(..model, active: !model.active)
+  }
+}
+
+// VIEW ------------------------------------------------------------------------
+
+pub fn view(model: Model) -> Element(Msg) {
+  let on_click = fn(msg) {
+    case model.active {
+      True -> event.on_click(msg)
+      False -> attribute.none()
+    }
+  }
+
+  div([], [
+    button([on_click(Incr)], [text("+")]),
+    button([on_click(Decr)], [text("-")]),
+    button([on_click(Reset)], [text("Reset")]),
+    button([event.on_click(Toggle)], [
+      case model.active {
+        True -> text("Disable")
+        False -> text("Enable")
+      },
+    ]),
+    p([], [text(int.to_string(model.count))]),
+  ])
+}