3 files changed, 71 insertions, 0 deletions
diff --git a/examples/api/index.html b/examples/api/index.html
new file mode 100644
index 0000000..158ee16
--- /dev/null
+++ b/examples/api/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/api/style.css b/examples/api/style.css
new file mode 100644
index 0000000..ad1dff9
--- /dev/null
+++ b/examples/api/style.css
@@ -0,0 +1,22 @@
+body {
+  --cssx-children: load-btn output-container;
+}
+
+#load-btn {
+  --cssx-on-click:
+    add-class(load-btn, 'loading')
+    get(url('./more-style.css'))
+    add-class(load-btn, 'hidden');
+}
+#load-btn.loading {
+  pointer-events: none;
+  opacity: 0.4;
+}
+#load-btn.hidden {
+  display: none;
+}
+
+#output-container {
+  --cssx-children: output-container-content;
+}
+
diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css
new file mode 100644
index 0000000..aeffde5
--- /dev/null
+++ b/examples/todo-list/style.css
@@ -0,0 +1,38 @@
+body {
+  --cssx-children: todo-container;
+}
+
+#todo-container {
+  --cssx-children: todo-input todo-list;
+  --todo-list: list();
+}
+
+#todo-input {
+  --cssx-children: input-field submit-btn;
+}
+
+#submit-btn {
+  --cssx-on-click: update(
+    todo-container,
+    --todo-list,
+    list-append(
+      var(--todo-list),
+      tuple(get-attr(input-field, value), false)
+    )
+  );
+}
+#submit-btn::after {
+  content: "Submit";
+}
+
+#todo-list {
+  --cssx-iter-children: iter(var(--todo-list), --todo-item, todo-item);
+}
+
+#todo-item {
+
+}
+#todo-item::after {
+  content: var(--todo-item);
+}
+