diff --git a/docs/src/configuration.md b/docs/src/configuration.md
index 67acc59..ed1460b 100644
--- a/docs/src/configuration.md
+++ b/docs/src/configuration.md
@@ -381,6 +381,8 @@ If you want to display a list of values, you can use the `for`-Element to fill a
 This can be useful in many situations, for example when generating a workspace list from a JSON representation of your workspaces.
 In many cases, this can be used instead of `literal`, and should most likely be preferred in those cases.
 
+To see how to declare and use more advanced data structures, check out the [data structures example](/examples/data-structures/eww.yuck).
+
 ## Splitting up your configuration
 
 As time passes, your configuration might grow larger and larger. Luckily, you can easily split up your configuration into multiple files!
diff --git a/docs/src/examples.md b/docs/src/examples.md
index 8f50497..54da0ec 100644
--- a/docs/src/examples.md
+++ b/docs/src/examples.md
@@ -4,3 +4,7 @@ These configurations of eww are available in the `examples/` directory of the [r
 
 An eww bar configuration:
 ![Example bar](https://github.com/elkowar/eww/raw/master/examples/eww-bar/eww-bar.png)
+
+A demo on how to declare and use data structures:
+
+![Data structure example](/examples/data-structures/data-structures-preview.png)
diff --git a/examples/data-structures/data-structures-preview.png b/examples/data-structures/data-structures-preview.png
new file mode 100644
index 0000000..f4dc519
Binary files /dev/null and b/examples/data-structures/data-structures-preview.png differ
diff --git a/examples/data-structures/eww.scss b/examples/data-structures/eww.scss
new file mode 100644
index 0000000..0970ad4
--- /dev/null
+++ b/examples/data-structures/eww.scss
@@ -0,0 +1,29 @@
+* {
+  all: unset;
+}
+
+.layout {
+  padding: 8px;
+  border: 1px solid black;
+  border-radius: 4px;
+  background-color: bisque;
+  font-size: 16px;
+  color: black;
+}
+
+.animalLayout {
+  margin: 0 4px;
+}
+
+.animal {
+  font-size: 24px;
+  transition: 0.2s;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0);
+  border: 0 solid lightcoral;
+}
+
+.animal.selected {
+  background-color: rgba(0, 0, 0, 0.2);
+  border-width: 2px;
+}
diff --git a/examples/data-structures/eww.yuck b/examples/data-structures/eww.yuck
new file mode 100644
index 0000000..c7ad974
--- /dev/null
+++ b/examples/data-structures/eww.yuck
@@ -0,0 +1,73 @@
+(defvar stringArray `[
+  "🦝",
+  "🐱",
+  "🐵",
+  "🦁",
+  "🐹",
+  "🦊"
+]`)
+
+(defvar object `{
+  "🦝": "racoon",
+  "🐱": "cat",
+  "🐵": "ape",
+  "🦁": "lion",
+  "🐹": "hamster",
+  "🦊": "fox"
+}`)
+
+; You could also create an array of objects:
+; (defvar objectArray `[{ "emoji": "🦝", "name": "racoon" }, { "emoji": "🦊", "name": "fox" }]`)
+
+(defvar selected `🦝`)
+
+(defwidget animalButton [emoji]
+  (box
+    :class "animalLayout"
+    (eventbox
+      :class `animal ${selected == emoji ? "selected" : ""}`
+      :cursor "pointer"
+      :onhover "eww update selected=${emoji}"
+      emoji
+    )
+  )
+)
+
+(defwidget animalRow []
+  (box
+    :class "animals"
+    :orientation "horizontal"
+    :halign "center"
+    (for animal in stringArray
+      (animalButton
+        :emoji animal
+      )
+    )
+  )
+)
+
+(defwidget currentAnimal []
+  (box
+    `${object[selected]} ${selected}`
+  )
+)
+
+(defwidget layout []
+  (box
+    :class "layout"
+    :orientation "vertical"
+    :halign "center"
+    (animalRow)
+    (currentAnimal)
+  )
+)
+
+(defwindow data-structures
+  :monitor 0
+  :exclusive false
+  :focusable false
+  :geometry (geometry
+    :anchor "center"
+  )
+  (layout)
+)