3 files changed, 78 insertions, 4 deletions

diff --git a/core/gjs/src/application.ts b/core/gjs/src/application.ts
index 0ba247e..bf82cbe 100644
--- a/core/gjs/src/application.ts
+++ b/core/gjs/src/application.ts
@@ -22,7 +22,7 @@ type Config = Partial<{
 import { setConsoleLogDomain } from "console"
 import { exit, programArgs } from "system"
 
-class AstalJS extends Astal.Application {
+export default new (class AstalJS extends Astal.Application {
     static { GObject.registerClass(this) }
 
     eval(body: string): Promise<any> {
@@ -100,6 +100,4 @@ class AstalJS extends Astal.Application {
 
         this.runAsync([])
     }
-}
-
-export default new AstalJS()
+})
diff --git a/core/src/astal.vala b/core/src/astal.vala
index 316da6b..134293b 100644
--- a/core/src/astal.vala
+++ b/core/src/astal.vala
@@ -9,6 +9,27 @@ public class Application : Gtk.Application {
     public string socket_path { get; private set; }
 
     [DBus (visible=false)]
+    public signal void monitor_added(Gdk.Monitor monitor);
+
+    [DBus (visible=false)]
+    public signal void monitor_removed(Gdk.Monitor monitor);
+
+    [DBus (visible=false)]
+    public List<weak Gdk.Monitor> monitors {
+        owned get {
+            var display = Gdk.Display.get_default();
+            var list = new List<weak Gdk.Monitor>();
+            for (var i = 0; i <= display.get_n_monitors(); ++i) {
+                var mon = display.get_monitor(i);
+                if (mon != null) {
+                    list.append(mon);
+                }
+            }
+            return list;
+        }
+    }
+
+    [DBus (visible=false)]
     public string instance_name {
         get { return _instance_name; }
         set {
@@ -219,6 +240,18 @@ public class Application : Gtk.Application {
         if (instance_name == null)
             instance_name = "astal";
 
+        activate.connect(() => {
+            var display = Gdk.Display.get_default();
+            display.monitor_added.connect((mon) => {
+                monitor_added(mon);
+                notify_property("monitors");
+            });
+            display.monitor_removed.connect((mon) => {
+                monitor_removed(mon);
+                notify_property("monitors");
+            });
+        });
+
         shutdown.connect(() => { try { quit(); } catch(Error err) {} });
         Unix.signal_add(1, () => { try { quit(); } catch(Error err) {} }, Priority.HIGH);
         Unix.signal_add(2, () => { try { quit(); } catch(Error err) {} }, Priority.HIGH);
diff --git a/docs/ags/faq.md b/docs/ags/faq.md
index baf9d6c..eef0bcb 100644
--- a/docs/ags/faq.md
+++ b/docs/ags/faq.md
@@ -212,3 +212,46 @@ App.start({
 :::info
 It is considered bad practice to populate the global scope, but its your code, not a public library.
 :::
+
+## Auto create Window for each Monitor
+
+To have Window widgets appear on a monitor when its plugged in, listen to `App.monitor_added`.
+
+:::code-group
+
+```tsx [Bar.tsx]
+export default function Bar(gdkmonitor: Gdk.Monitor) {
+    return <window gdkmonitor={gdkmonitor} />
+}
+```
+
+:::
+
+:::code-group
+
+```ts [app.ts]
+import { Gdk, Gtk } from "astal"
+import Bar from "./Bar"
+
+function main() {
+    const bars = new Map<Gdk.Monitor, Gtk.Widget>()
+
+    // initialize
+    for (const gdkmonitor of App.get_monitors()) {
+        bars.set(gdkmonitor, Bar(gdkmonitor))
+    }
+
+    App.connect("monitor-added", (_, gdkmonitor) => {
+        bars.set(gdkmonitor, Bar(gdkmonitor))
+    })
+
+    App.connect("monitor-removed", (_, gdkmonitor) => {
+        bars.get(gdkmonitor)?.destroy()
+        bars.delete(gdkmonitor)
+    })
+}
+
+App.start({ main })
+```
+
+:::