2 files changed, 58 insertions, 0 deletions
diff --git a/test/example/index.html b/test/example/index.html
new file mode 100644
index 0000000..baaf9ed
--- /dev/null
+++ b/test/example/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+
+    <script type="module">
+        // `example` is set up as an alias in our `package.json` to point to
+        // some of Gleam's build artifacts.
+        import { main } from 'example/main.mjs'
+
+        document.addEventListener('DOMContentLoaded', main)
+    </script>
+</head>
+
+<body>
+    <div data-lustre-container></div>
+</body>
+
+</html>
+\ No newline at end of file
diff --git a/test/example/main.gleam b/test/example/main.gleam
new file mode 100644
index 0000000..cd9a71e
--- /dev/null
+++ b/test/example/main.gleam
@@ -0,0 +1,35 @@
+import gleam/int
+import lustre
+import lustre/attribute.{ style }
+import lustre/element.{ button, div, p, text }
+import lustre/event.{ dispatch, on_click }
+
+pub fn main () {
+    let selector = "[data-lustre-container]"
+    let program  = lustre.application(0, update, render)
+
+    lustre.start(program, selector)
+}
+
+type Action {
+    Incr
+    Decr
+}
+
+fn update (state, action) {
+    case action {
+        Incr ->
+            state + 1
+
+        Decr ->
+            state - 1
+    }
+}
+
+fn render (state) {
+    div([ style([ #("display", "flex") ]) ], [
+        button([ on_click(dispatch(Decr)) ], [ text("-") ]),
+        p([], [ int.to_string(state) |> text ]),
+        button([ on_click(dispatch(Incr)) ], [ text("+") ])
+    ])
+}