2 files changed, 37 insertions, 0 deletions
diff --git a/examples/counter/index.html b/examples/counter/index.html
new file mode 100644
index 0000000..158ee16
--- /dev/null
+++ b/examples/counter/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Counter example</title>
+    <meta charset="UTF-8">
+    <link href="./style.css" rel="stylesheet">
+  </head>
+  <body>
+    <script async defer src="../../dist/index.js"></script>
+  </body>
+</html>
diff --git a/examples/counter/style.css b/examples/counter/style.css
new file mode 100644
index 0000000..9cf50e0
--- /dev/null
+++ b/examples/counter/style.css
@@ -0,0 +1,26 @@
+body {
+  --cssx-children: container todo-container;
+  --cssx-on-load: js(console.log("what have we done?!"));
+}
+
+#container {
+  --cssx-children: counter btn-increment;
+  --count: '0';
+}
+
+#counter {
+}
+#counter::before {
+  content: "Count: " var(--count);
+}
+
+#btn-increment {
+  display: inline-block;
+  padding: 0.5rem 1rem;
+  border: 1px solid gray;
+
+  --cssx-on-click: update(container, --count, calc(var(--count) + 1));
+}
+#btn-increment::after {
+  content: "Increment";
+}