diff --git a/crates/egui/src/containers/area.rs b/crates/egui/src/containers/area.rs
index e93217e5..7a9111f6 100644
--- a/crates/egui/src/containers/area.rs
+++ b/crates/egui/src/containers/area.rs
@@ -52,7 +52,7 @@ impl State {
 ///
 /// ```
 /// # egui::__run_test_ctx(|ctx| {
-/// egui::Area::new("my_area")
+/// egui::Area::new(egui::Id::new("my_area"))
 ///     .fixed_pos(egui::pos2(32.0, 32.0))
 ///     .show(ctx, |ui| {
 ///         ui.label("Floating text!");
@@ -79,9 +79,10 @@ pub struct Area {
 }
 
 impl Area {
-    pub fn new(id: impl Into<Id>) -> Self {
+    /// The `id` must be globally unique.
+    pub fn new(id: Id) -> Self {
         Self {
-            id: id.into(),
+            id,
             movable: true,
             interactable: true,
             constrain: false,
@@ -96,6 +97,9 @@ impl Area {
         }
     }
 
+    /// Let's you change the `id` that you assigned in [`Self::new`].
+    ///
+    /// The `id` must be globally unique.
     #[inline]
     pub fn id(mut self, id: Id) -> Self {
         self.id = id;
diff --git a/crates/egui_demo_lib/src/demo/pan_zoom.rs b/crates/egui_demo_lib/src/demo/pan_zoom.rs
index 6aa42179..08829d6d 100644
--- a/crates/egui_demo_lib/src/demo/pan_zoom.rs
+++ b/crates/egui_demo_lib/src/demo/pan_zoom.rs
@@ -69,30 +69,25 @@ impl super::View for PanZoom {
             }
         }
 
-        for (id, pos, callback) in [
+        for (i, (pos, callback)) in [
             (
-                "a",
                 egui::Pos2::new(0.0, 0.0),
                 Box::new(|ui: &mut egui::Ui, _: &mut Self| ui.button("top left!"))
                     as Box<dyn Fn(&mut egui::Ui, &mut Self) -> egui::Response>,
             ),
             (
-                "b",
                 egui::Pos2::new(0.0, 120.0),
                 Box::new(|ui: &mut egui::Ui, _| ui.button("bottom left?")),
             ),
             (
-                "c",
                 egui::Pos2::new(120.0, 120.0),
                 Box::new(|ui: &mut egui::Ui, _| ui.button("right bottom :D")),
             ),
             (
-                "d",
                 egui::Pos2::new(120.0, 0.0),
                 Box::new(|ui: &mut egui::Ui, _| ui.button("right top ):")),
             ),
             (
-                "e",
                 egui::Pos2::new(60.0, 60.0),
                 Box::new(|ui, state| {
                     use egui::epaint::*;
@@ -110,8 +105,11 @@ impl super::View for PanZoom {
                     ui.add(egui::Slider::new(&mut state.drag_value, 0.0..=100.0).text("My value"))
                 }),
             ),
-        ] {
-            let id = egui::Area::new(id)
+        ]
+        .into_iter()
+        .enumerate()
+        {
+            let id = egui::Area::new(id.with(("subarea", i)))
                 .default_pos(pos)
                 // Need to cover up the pan_zoom demo window,
                 // but may also cover over other windows.