diff --git a/ui-keybindings/resources/demo/notebook/dialog.cljs b/ui-keybindings/resources/demo/notebook/dialog.cljs
new file mode 100644
index 0000000..062ea0f
--- /dev/null
+++ b/ui-keybindings/resources/demo/notebook/dialog.cljs
@@ -0,0 +1,18 @@
+(ns demo.notebook.dialog
+  (:require
+   [frontend.dialog :refer [dialog-show]]))
+
+(str *ns*)
+
+; dialogs can be closed with ESC
+
+(dialog-show [:h1.bg-blue-300.p-5 "dummy dialog"])
+
+(defn my-dialog []
+  [:div
+   {:style {:background-color "white"
+            :padding          "16px"
+            :border-radius    "6px"
+            :text-align "center"}} "Hello modal!"])
+
+(dialog-show (my-dialog))
\ No newline at end of file
diff --git a/ui-keybindings/resources/demo/notebook/notify.cljs b/ui-keybindings/resources/demo/notebook/notify.cljs
new file mode 100644
index 0000000..8b24884
--- /dev/null
+++ b/ui-keybindings/resources/demo/notebook/notify.cljs
@@ -0,0 +1,11 @@
+(ns demo.notebook.notify
+  (:require
+   [frontend.notification :refer [show-notification]]))
+
+(show-notification :info [:span.bg-blue-300.inline "the sky is blue!"] 1000)
+
+(show-notification :warning "shipping fee charged is below cost!")
+
+(show-notification :error
+        [:span "its " [:span.bg-red-300 "raining"] "in Panama!"]
+        0)
\ No newline at end of file