Merge branch 'master' into explicit-text-caching

80 files changed, 372 insertions, 238 deletions

diff --git a/examples/README.md b/examples/README.md
index 111e8910..71dad13e 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -10,8 +10,8 @@ A simple UI tour that can run both on native platforms and the web! It showcases
 The __[`main`](tour/src/main.rs)__ file contains all the code of the example! All the cross-platform GUI is defined in terms of __state__, __messages__, __update logic__ and __view logic__.
 
 <div align="center">
-  <a href="https://gfycat.com/politeadorableiberianmole">
-    <img src="https://thumbs.gfycat.com/PoliteAdorableIberianmole-small.gif">
+  <a href="https://iced.rs/examples/tour.mp4">
+    <img src="https://iced.rs/examples/tour.gif">
   </a>
 </div>
 
@@ -33,8 +33,8 @@ A todos tracker inspired by [TodoMVC]. It showcases dynamic layout, text input,
 The example code is located in the __[`main`](todos/src/main.rs)__ file.
 
 <div align="center">
-  <a href="https://gfycat.com/littlesanehalicore">
-    <img src="https://thumbs.gfycat.com/LittleSaneHalicore-small.gif" height="400px">
+  <a href="https://iced.rs/examples/todos.mp4">
+    <img src="https://iced.rs/examples/todos.gif" height="400px">
   </a>
 </div>
 
@@ -53,9 +53,7 @@ It runs a simulation in a background thread while allowing interaction with a `C
 The relevant code is located in the __[`main`](game_of_life/src/main.rs)__ file.
 
 <div align="center">
-  <a href="https://gfycat.com/briefaccurateaardvark">
-    <img src="https://thumbs.gfycat.com/BriefAccurateAardvark-size_restricted.gif">
-  </a>
+  <img src="https://iced.rs/examples/game_of_life.gif">
 </div>
 
 You can run it with `cargo run`:
@@ -72,9 +70,7 @@ An example showcasing custom styling with a light and dark theme.
 The example code is located in the __[`main`](styling/src/main.rs)__ file.
 
 <div align="center">
-  <a href="https://user-images.githubusercontent.com/518289/71867993-acff4300-310c-11ea-85a3-d01d8f884346.gif">
-    <img src="https://user-images.githubusercontent.com/518289/71867993-acff4300-310c-11ea-85a3-d01d8f884346.gif" height="400px">
-  </a>
+  <img src="https://iced.rs/examples/styling.gif">
 </div>
 
 You can run it with `cargo run`:
@@ -120,9 +116,7 @@ Since [Iced was born in May 2019], it has been powering the user interfaces in
 
 
 <div align="center">
-  <a href="https://gfycat.com/gloomyweakhammerheadshark">
-    <img src="https://thumbs.gfycat.com/GloomyWeakHammerheadshark-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/coffee.gif">
 </div>
 
 [Iced was born in May 2019]: https://github.com/hecrj/coffee/pull/35
diff --git a/examples/arc/Cargo.toml b/examples/arc/Cargo.toml
index e6e74363..5012ff82 100644
--- a/examples/arc/Cargo.toml
+++ b/examples/arc/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas", "tokio", "debug"] }
+iced.workspace = true
+iced.features = ["canvas", "tokio", "debug"]
diff --git a/examples/bezier_tool/Cargo.toml b/examples/bezier_tool/Cargo.toml
index 890e3027..b2547ff1 100644
--- a/examples/bezier_tool/Cargo.toml
+++ b/examples/bezier_tool/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas"] }
+iced.workspace = true
+iced.features = ["canvas"]
diff --git a/examples/bezier_tool/README.md b/examples/bezier_tool/README.md
index ebbb12cc..6dc13785 100644
--- a/examples/bezier_tool/README.md
+++ b/examples/bezier_tool/README.md
@@ -5,9 +5,7 @@ A Paint-like tool for drawing Bézier curves using the `Canvas` widget.
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/soulfulinfiniteantbear">
-    <img src="https://thumbs.gfycat.com/SoulfulInfiniteAntbear-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/bezier_tool.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/checkbox/Cargo.toml b/examples/checkbox/Cargo.toml
index dde8f910..1e027c4c 100644
--- a/examples/checkbox/Cargo.toml
+++ b/examples/checkbox/Cargo.toml
@@ -6,4 +6,4 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
diff --git a/examples/clock/Cargo.toml b/examples/clock/Cargo.toml
index 5e869eb5..2d3d5908 100644
--- a/examples/clock/Cargo.toml
+++ b/examples/clock/Cargo.toml
@@ -6,5 +6,7 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas", "tokio", "debug"] }
-time = { version = "0.3.5", features = ["local-offset"] }
+iced.workspace = true
+iced.features = ["canvas", "tokio", "debug"]
+
+time = { version = "0.3", features = ["local-offset"] }
diff --git a/examples/color_palette/Cargo.toml b/examples/color_palette/Cargo.toml
index 3be732bb..2da6c6ed 100644
--- a/examples/color_palette/Cargo.toml
+++ b/examples/color_palette/Cargo.toml
@@ -6,5 +6,7 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas", "palette"] }
-palette = "0.7.0"
+iced.workspace = true
+iced.features = ["canvas", "palette"]
+
+palette.workspace = true
diff --git a/examples/color_palette/README.md b/examples/color_palette/README.md
index f90020b1..9c135937 100644
--- a/examples/color_palette/README.md
+++ b/examples/color_palette/README.md
@@ -3,13 +3,11 @@
 A color palette generator, based on a user-defined root color.
 
 <div align="center">
-  <a href="https://gfycat.com/dirtylonebighornsheep">
-    <img src="screenshot.png">
-  </a>
+  <img src="screenshot.png">
 </div>
 
 You can run it with `cargo run`:
 
 ```
-cargo run --package pure_color_palette
+cargo run --package color_palette
 ```
diff --git a/examples/combo_box/Cargo.toml b/examples/combo_box/Cargo.toml
index be1b5e32..0f5ecf2a 100644
--- a/examples/combo_box/Cargo.toml
+++ b/examples/combo_box/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug"] }
+iced.workspace = true
+iced.features = ["debug"]
diff --git a/examples/component/Cargo.toml b/examples/component/Cargo.toml
index 9db1e6b4..83b7b8a4 100644
--- a/examples/component/Cargo.toml
+++ b/examples/component/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug", "lazy"] }
+iced.workspace = true
+iced.features = ["debug", "lazy"]
diff --git a/examples/counter/Cargo.toml b/examples/counter/Cargo.toml
index e31f440f..22f86064 100644
--- a/examples/counter/Cargo.toml
+++ b/examples/counter/Cargo.toml
@@ -6,4 +6,8 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+iced.workspace = true
+iced.features = ["webgl"]
diff --git a/examples/counter/README.md b/examples/counter/README.md
index 4d9fc5b9..18761bba 100644
--- a/examples/counter/README.md
+++ b/examples/counter/README.md
@@ -5,9 +5,7 @@ The classic counter example explained in the [`README`](../../README.md).
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/fairdeadcatbird">
-    <img src="https://thumbs.gfycat.com/FairDeadCatbird-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/counter.gif">
 </div>
 
 You can run it with `cargo run`:
@@ -15,4 +13,12 @@ You can run it with `cargo run`:
 cargo run --package counter
 ```
 
+The web version can be run with [`trunk`]:
+
+```
+cd examples/counter
+trunk serve
+```
+
 [`main`]: src/main.rs
+[`trunk`]: https://trunkrs.dev/
diff --git a/examples/custom_quad/Cargo.toml b/examples/custom_quad/Cargo.toml
index f097c2dd..31b5055d 100644
--- a/examples/custom_quad/Cargo.toml
+++ b/examples/custom_quad/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["advanced"] }
+iced.workspace = true
+iced.features = ["advanced"]
diff --git a/examples/custom_widget/Cargo.toml b/examples/custom_widget/Cargo.toml
index dda0efe8..1e94bc52 100644
--- a/examples/custom_widget/Cargo.toml
+++ b/examples/custom_widget/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["advanced"] }
+iced.workspace = true
+iced.features = ["advanced"]
diff --git a/examples/custom_widget/README.md b/examples/custom_widget/README.md
index 3d6cf902..b80e898f 100644
--- a/examples/custom_widget/README.md
+++ b/examples/custom_widget/README.md
@@ -5,9 +5,7 @@ A demonstration of how to build a custom widget that draws a circle.
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/jealouscornyhomalocephale">
-    <img src="https://thumbs.gfycat.com/JealousCornyHomalocephale-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/custom_widget.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/download_progress/Cargo.toml b/examples/download_progress/Cargo.toml
index 212832f4..18a49f66 100644
--- a/examples/download_progress/Cargo.toml
+++ b/examples/download_progress/Cargo.toml
@@ -6,7 +6,8 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["tokio"] }
+iced.workspace = true
+iced.features = ["tokio"]
 
 [dependencies.reqwest]
 version = "0.11"
diff --git a/examples/download_progress/README.md b/examples/download_progress/README.md
index 7999ce94..19cb2966 100644
--- a/examples/download_progress/README.md
+++ b/examples/download_progress/README.md
@@ -5,9 +5,7 @@ A basic application that asynchronously downloads multiple dummy files of 100 MB
 The example implements a custom `Subscription` in the __[`download`](src/download.rs)__ module. This subscription downloads and produces messages that can be used to keep track of its progress.
 
 <div align="center">
-  <a href="https://gfycat.com/wildearlyafricanwilddog">
-    <img src="https://thumbs.gfycat.com/WildEarlyAfricanwilddog-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/download_progress.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/events/Cargo.toml b/examples/events/Cargo.toml
index 15ffc0af..87315a10 100644
--- a/examples/events/Cargo.toml
+++ b/examples/events/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug"] }
+iced.workspace = true
+iced.features = ["debug"]
diff --git a/examples/events/README.md b/examples/events/README.md
index 3c9a1cab..fd7f9b47 100644
--- a/examples/events/README.md
+++ b/examples/events/README.md
@@ -4,12 +4,6 @@ A log of native events displayed using a conditional `Subscription`.
 
 The __[`main`]__ file contains all the code of the example.
 
-<div align="center">
-  <a href="https://gfycat.com/infamousicyermine">
-    <img src="https://thumbs.gfycat.com/InfamousIcyErmine-small.gif">
-  </a>
-</div>
-
 You can run it with `cargo run`:
 ```
 cargo run --package events
diff --git a/examples/events/src/main.rs b/examples/events/src/main.rs
index 7f3a5e1d..32d0da2c 100644
--- a/examples/events/src/main.rs
+++ b/examples/events/src/main.rs
@@ -1,9 +1,8 @@
 use iced::alignment;
+use iced::event::{self, Event};
 use iced::executor;
-use iced::subscription;
 use iced::widget::{button, checkbox, container, text, Column};
 use iced::window;
-use iced::Event;
 use iced::{
     Alignment, Application, Command, Element, Length, Settings, Subscription,
     Theme,
@@ -71,7 +70,7 @@ impl Application for Events {
     }
 
     fn subscription(&self) -> Subscription<Message> {
-        subscription::events().map(Message::EventOccurred)
+        event::listen().map(Message::EventOccurred)
     }
 
     fn view(&self) -> Element<Message> {
diff --git a/examples/exit/Cargo.toml b/examples/exit/Cargo.toml
index 34d0789a..b06fbadc 100644
--- a/examples/exit/Cargo.toml
+++ b/examples/exit/Cargo.toml
@@ -5,4 +5,4 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
diff --git a/examples/game_of_life/Cargo.toml b/examples/game_of_life/Cargo.toml
index 6de45db6..9b291de8 100644
--- a/examples/game_of_life/Cargo.toml
+++ b/examples/game_of_life/Cargo.toml
@@ -6,8 +6,10 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas", "tokio", "debug"] }
-tokio = { version = "1.0", features = ["sync"] }
-itertools = "0.9"
-rustc-hash = "1.1"
-env_logger = "0.10"
+iced.workspace = true
+iced.features = ["debug", "canvas", "tokio"]
+
+itertools = "0.11"
+rustc-hash.workspace = true
+tokio = { workspace = true, features = ["sync"] }
+tracing-subscriber = "0.3"
diff --git a/examples/game_of_life/README.md b/examples/game_of_life/README.md
index aa39201c..60033c1a 100644
--- a/examples/game_of_life/README.md
+++ b/examples/game_of_life/README.md
@@ -7,9 +7,7 @@ It runs a simulation in a background thread while allowing interaction with a `C
 The __[`main`]__ file contains the relevant code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/WhichPaltryChick">
-    <img src="https://thumbs.gfycat.com/WhichPaltryChick-size_restricted.gif">
-  </a>
+  <img src="https://iced.rs/examples/game_of_life.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/game_of_life/src/main.rs b/examples/game_of_life/src/main.rs
index fa711744..e451cb06 100644
--- a/examples/game_of_life/src/main.rs
+++ b/examples/game_of_life/src/main.rs
@@ -18,7 +18,7 @@ use iced::{
 use std::time::{Duration, Instant};
 
 pub fn main() -> iced::Result {
-    env_logger::builder().format_timestamp(None).init();
+    tracing_subscriber::fmt::init();
 
     GameOfLife::run(Settings {
         antialiasing: true,
@@ -550,7 +550,7 @@ mod grid {
                     frame.translate(center);
                     frame.scale(self.scaling);
                     frame.translate(self.translation);
-                    frame.scale(Cell::SIZE as f32);
+                    frame.scale(Cell::SIZE);
 
                     let region = self.visible_region(frame.size());
 
@@ -576,7 +576,7 @@ mod grid {
                         frame.translate(center);
                         frame.scale(self.scaling);
                         frame.translate(self.translation);
-                        frame.scale(Cell::SIZE as f32);
+                        frame.scale(Cell::SIZE);
 
                         frame.fill_rectangle(
                             Point::new(cell.j as f32, cell.i as f32),
@@ -630,7 +630,7 @@ mod grid {
                         frame.translate(center);
                         frame.scale(self.scaling);
                         frame.translate(self.translation);
-                        frame.scale(Cell::SIZE as f32);
+                        frame.scale(Cell::SIZE);
 
                         let region = self.visible_region(frame.size());
                         let rows = region.rows();
@@ -834,7 +834,7 @@ mod grid {
     }
 
     impl Cell {
-        const SIZE: usize = 20;
+        const SIZE: u16 = 20;
 
         fn at(position: Point) -> Cell {
             let i = (position.y / Cell::SIZE as f32).ceil() as isize;
diff --git a/examples/geometry/Cargo.toml b/examples/geometry/Cargo.toml
index 6068d651..9606dcb3 100644
--- a/examples/geometry/Cargo.toml
+++ b/examples/geometry/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["advanced"] }
+iced.workspace = true
+iced.features = ["advanced"]
diff --git a/examples/geometry/README.md b/examples/geometry/README.md
index 4d5c81cb..16be8d19 100644
--- a/examples/geometry/README.md
+++ b/examples/geometry/README.md
@@ -5,9 +5,7 @@ A custom widget showcasing how to draw geometry with the `Mesh2D` primitive in [
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/activeunfitkangaroo">
-    <img src="https://thumbs.gfycat.com/ActiveUnfitKangaroo-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/geometry.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/gradient/Cargo.toml b/examples/gradient/Cargo.toml
new file mode 100644
index 00000000..2dea2c4f
--- /dev/null
+++ b/examples/gradient/Cargo.toml
@@ -0,0 +1,8 @@
+[package]
+name = "gradient"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+[dependencies]
+iced = { path = "../.." }
diff --git a/examples/gradient/src/main.rs b/examples/gradient/src/main.rs
new file mode 100644
index 00000000..1bf5822d
--- /dev/null
+++ b/examples/gradient/src/main.rs
@@ -0,0 +1,99 @@
+use iced::gradient;
+use iced::widget::{column, container, horizontal_space, row, slider, text};
+use iced::{
+    Alignment, Background, Color, Element, Length, Radians, Sandbox, Settings,
+};
+
+pub fn main() -> iced::Result {
+    Gradient::run(Settings::default())
+}
+
+#[derive(Debug, Clone, Copy)]
+struct Gradient {
+    start: Color,
+    end: Color,
+    angle: Radians,
+}
+
+#[derive(Debug, Clone, Copy)]
+enum Message {
+    StartChanged(Color),
+    EndChanged(Color),
+    AngleChanged(Radians),
+}
+
+impl Sandbox for Gradient {
+    type Message = Message;
+
+    fn new() -> Self {
+        Self {
+            start: Color::WHITE,
+            end: Color::new(0.0, 0.0, 1.0, 1.0),
+            angle: Radians(0.0),
+        }
+    }
+
+    fn title(&self) -> String {
+        String::from("Gradient")
+    }
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::StartChanged(color) => self.start = color,
+            Message::EndChanged(color) => self.end = color,
+            Message::AngleChanged(angle) => self.angle = angle,
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let Self { start, end, angle } = *self;
+
+        let gradient_box = container(horizontal_space(Length::Fill))
+            .width(Length::Fill)
+            .height(Length::Fill)
+            .style(move |_: &_| {
+                let gradient = gradient::Linear::new(angle)
+                    .add_stop(0.0, start)
+                    .add_stop(1.0, end)
+                    .into();
+
+                container::Appearance {
+                    background: Some(Background::Gradient(gradient)),
+                    ..Default::default()
+                }
+            });
+
+        let angle_picker = row![
+            text("Angle").width(64),
+            slider(Radians::RANGE, self.angle, Message::AngleChanged)
+                .step(0.01)
+        ]
+        .spacing(8)
+        .padding(8)
+        .align_items(Alignment::Center);
+
+        column![
+            color_picker("Start", self.start).map(Message::StartChanged),
+            color_picker("End", self.end).map(Message::EndChanged),
+            angle_picker,
+            gradient_box
+        ]
+        .into()
+    }
+}
+
+fn color_picker(label: &str, color: Color) -> Element<'_, Color> {
+    row![
+        text(label).width(64),
+        slider(0.0..=1.0, color.r, move |r| { Color { r, ..color } })
+            .step(0.01),
+        slider(0.0..=1.0, color.g, move |g| { Color { g, ..color } })
+            .step(0.01),
+        slider(0.0..=1.0, color.b, move |b| { Color { b, ..color } })
+            .step(0.01),
+    ]
+    .spacing(8)
+    .padding(8)
+    .align_items(Alignment::Center)
+    .into()
+}
diff --git a/examples/integration/Cargo.toml b/examples/integration/Cargo.toml
index 22914742..a4a961f8 100644
--- a/examples/integration/Cargo.toml
+++ b/examples/integration/Cargo.toml
@@ -6,19 +6,18 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced_winit = { path = "../../winit" }
-iced_wgpu = { path = "../../wgpu" }
-iced_widget = { path = "../../widget" }
-iced_renderer = { path = "../../renderer", features = ["wgpu"] }
-env_logger = "0.10"
+iced_winit.workspace = true
+iced_wgpu.workspace = true
+iced_widget.workspace = true
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+tracing-subscriber = "0.3"
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
-console_error_panic_hook = "0.1.7"
-console_log = "0.2.0"
-log = "0.4"
+iced_wgpu.workspace = true
+iced_wgpu.features = ["webgl"]
+
+console_error_panic_hook = "0.1"
+console_log = "1.0"
 wasm-bindgen = "0.2"
 web-sys = { version = "0.3", features = ["Element", "HtmlCanvasElement", "Window", "Document"] }
-# This dependency a little bit quirky, it is deep in the tree and without `js` feature it
-# refuses to work with `wasm32-unknown-unknown target`. Unfortunately, we need this patch
-# to make it work
-getrandom = { version = "0.2", features = ["js"] }
diff --git a/examples/integration/README.md b/examples/integration/README.md
index ece9ba1e..996cdc17 100644
--- a/examples/integration/README.md
+++ b/examples/integration/README.md
@@ -5,9 +5,7 @@ A demonstration of how to integrate Iced in an existing [`wgpu`] application.
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/nicemediocrekodiakbear">
-    <img src="https://thumbs.gfycat.com/NiceMediocreKodiakbear-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/integration.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/integration/src/main.rs b/examples/integration/src/main.rs
index e011a411..7945bd20 100644
--- a/examples/integration/src/main.rs
+++ b/examples/integration/src/main.rs
@@ -29,7 +29,7 @@ use winit::platform::web::WindowBuilderExtWebSys;
 pub fn main() -> Result<(), Box<dyn std::error::Error>> {
     #[cfg(target_arch = "wasm32")]
     let canvas_element = {
-        console_log::init_with_level(log::Level::Debug)?;
+        console_log::init().expect("Initialize logger");
 
         std::panic::set_hook(Box::new(console_error_panic_hook::hook));
 
@@ -41,7 +41,7 @@ pub fn main() -> Result<(), Box<dyn std::error::Error>> {
     };
 
     #[cfg(not(target_arch = "wasm32"))]
-    env_logger::init();
+    tracing_subscriber::fmt::init();
 
     // Initialize winit
     let event_loop = EventLoop::new();
@@ -82,7 +82,6 @@ pub fn main() -> Result<(), Box<dyn std::error::Error>> {
         futures::futures::executor::block_on(async {
             let adapter = wgpu::util::initialize_adapter_from_env_or_default(
                 &instance,
-                backend,
                 Some(&surface),
             )
             .await
diff --git a/examples/lazy/Cargo.toml b/examples/lazy/Cargo.toml
index e03e89a9..4ccb9584 100644
--- a/examples/lazy/Cargo.toml
+++ b/examples/lazy/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug", "lazy"] }
+iced.workspace = true
+iced.features = ["debug", "lazy"]
diff --git a/examples/loading_spinners/Cargo.toml b/examples/loading_spinners/Cargo.toml
index ee9a48aa..a32da386 100644
--- a/examples/loading_spinners/Cargo.toml
+++ b/examples/loading_spinners/Cargo.toml
@@ -6,6 +6,8 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["advanced", "canvas"] }
-lyon_algorithms = "1"
-once_cell = "1"
+iced.workspace = true
+iced.features = ["advanced", "canvas"]
+
+lyon_algorithms = "1.0"
+once_cell.workspace = true
\ No newline at end of file
diff --git a/examples/loading_spinners/README.md b/examples/loading_spinners/README.md
index 3573c6f6..75b88804 100644
--- a/examples/loading_spinners/README.md
+++ b/examples/loading_spinners/README.md
@@ -2,12 +2,6 @@
 
 Example implementation of animated indeterminate loading spinners.
 
-<div align="center">
-  <a href="https://gfycat.com/importantdevotedhammerheadbird">
-    <img src="https://thumbs.gfycat.com/ImportantDevotedHammerheadbird-small.gif">
-  </a>
-</div>
-
 You can run it with `cargo run`:
 ```
 cargo run --package loading_spinners
diff --git a/examples/modal/Cargo.toml b/examples/modal/Cargo.toml
index 3ac61e6a..009d9653 100644
--- a/examples/modal/Cargo.toml
+++ b/examples/modal/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["advanced"] }
+iced.workspace = true
+iced.features = ["advanced"]
diff --git a/examples/modal/src/main.rs b/examples/modal/src/main.rs
index aa9107d0..c050d3cc 100644
--- a/examples/modal/src/main.rs
+++ b/examples/modal/src/main.rs
@@ -1,12 +1,14 @@
+use iced::event::{self, Event};
 use iced::executor;
 use iced::keyboard;
-use iced::subscription::{self, Subscription};
 use iced::theme;
 use iced::widget::{
     self, button, column, container, horizontal_space, pick_list, row, text,
     text_input,
 };
-use iced::{Alignment, Application, Command, Element, Event, Length, Settings};
+use iced::{
+    Alignment, Application, Command, Element, Length, Settings, Subscription,
+};
 
 use modal::Modal;
 use std::fmt;
@@ -49,7 +51,7 @@ impl Application for App {
     }
 
     fn subscription(&self) -> Subscription<Self::Message> {
-        subscription::events().map(Message::Event)
+        event::listen().map(Message::Event)
     }
 
     fn update(&mut self, message: Message) -> Command<Message> {
diff --git a/examples/multitouch/Cargo.toml b/examples/multitouch/Cargo.toml
index 867312f8..e0d14f58 100644
--- a/examples/multitouch/Cargo.toml
+++ b/examples/multitouch/Cargo.toml
@@ -6,7 +6,8 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas", "tokio", "debug"] }
-tokio = { version = "1.0", features = ["sync"] }
-env_logger = "0.10"
+iced.workspace = true
+iced.features = ["debug", "canvas", "tokio"]
+
+tracing-subscriber = "0.3"
 voronator = "0.2"
diff --git a/examples/multitouch/src/main.rs b/examples/multitouch/src/main.rs
index 2830b78d..ba8df7aa 100644
--- a/examples/multitouch/src/main.rs
+++ b/examples/multitouch/src/main.rs
@@ -13,7 +13,7 @@ use iced::{
 use std::collections::HashMap;
 
 pub fn main() -> iced::Result {
-    env_logger::builder().format_timestamp(None).init();
+    tracing_subscriber::fmt::init();
 
     Multitouch::run(Settings {
         antialiasing: true,
diff --git a/examples/pane_grid/Cargo.toml b/examples/pane_grid/Cargo.toml
index 4c0bf072..095ecd10 100644
--- a/examples/pane_grid/Cargo.toml
+++ b/examples/pane_grid/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug", "lazy"] }
+iced.workspace = true
+iced.features = ["debug", "lazy"]
diff --git a/examples/pane_grid/README.md b/examples/pane_grid/README.md
index a4cfcb7d..65357b23 100644
--- a/examples/pane_grid/README.md
+++ b/examples/pane_grid/README.md
@@ -15,9 +15,7 @@ This example showcases the `PaneGrid` widget, which features:
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/frailfreshairedaleterrier">
-    <img src="https://thumbs.gfycat.com/FrailFreshAiredaleterrier-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/pane_grid.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/pane_grid/src/main.rs b/examples/pane_grid/src/main.rs
index 04896e20..af87e2c0 100644
--- a/examples/pane_grid/src/main.rs
+++ b/examples/pane_grid/src/main.rs
@@ -1,8 +1,6 @@
 use iced::alignment::{self, Alignment};
-use iced::event::{self, Event};
 use iced::executor;
 use iced::keyboard;
-use iced::subscription;
 use iced::theme::{self, Theme};
 use iced::widget::pane_grid::{self, PaneGrid};
 use iced::widget::{
@@ -146,18 +144,12 @@ impl Application for Example {
     }
 
     fn subscription(&self) -> Subscription<Message> {
-        subscription::events_with(|event, status| {
-            if let event::Status::Captured = status {
+        keyboard::on_key_press(|key_code, modifiers| {
+            if !modifiers.command() {
                 return None;
             }
 
-            match event {
-                Event::Keyboard(keyboard::Event::KeyPressed {
-                    modifiers,
-                    key_code,
-                }) if modifiers.command() => handle_hotkey(key_code),
-                _ => None,
-            }
+            handle_hotkey(key_code)
         })
     }
 
diff --git a/examples/pick_list/Cargo.toml b/examples/pick_list/Cargo.toml
index 4aa4603a..030558e7 100644
--- a/examples/pick_list/Cargo.toml
+++ b/examples/pick_list/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug"] }
+iced.workspace = true
+iced.features = ["debug"]
diff --git a/examples/pokedex/Cargo.toml b/examples/pokedex/Cargo.toml
index e99fc0c3..bf7e1e35 100644
--- a/examples/pokedex/Cargo.toml
+++ b/examples/pokedex/Cargo.toml
@@ -6,7 +6,9 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["image", "debug", "tokio"] }
+iced.workspace = true
+iced.features = ["image", "debug", "tokio"]
+
 serde_json = "1.0"
 
 [dependencies.serde]
@@ -19,5 +21,8 @@ default-features = false
 features = ["json", "rustls-tls"]
 
 [dependencies.rand]
-version = "0.7"
-features = ["wasm-bindgen"]
+version = "0.8"
+
+[dependencies.getrandom]
+version = "0.2"
+features = ["js"]
diff --git a/examples/pokedex/README.md b/examples/pokedex/README.md
index 50720f57..8e8562ac 100644
--- a/examples/pokedex/README.md
+++ b/examples/pokedex/README.md
@@ -4,9 +4,7 @@ An application that loads a random Pokédex entry using the [PokéAPI].
 All the example code can be found in the __[`main`](src/main.rs)__ file.
 
 <div align="center">
-  <a href="https://gfycat.com/aggressivedarkelephantseal-rust-gui">
-    <img src="https://thumbs.gfycat.com/AggressiveDarkElephantseal-small.gif" height="400px">
-  </a>
+  <img src="https://iced.rs/examples/pokedex.gif">
 </div>
 
 You can run it on native platforms with `cargo run`:
diff --git a/examples/pokedex/src/main.rs b/examples/pokedex/src/main.rs
index 4482814c..8b71a269 100644
--- a/examples/pokedex/src/main.rs
+++ b/examples/pokedex/src/main.rs
@@ -153,7 +153,7 @@ impl Pokemon {
         let id = {
             let mut rng = rand::rngs::OsRng;
 
-            rng.gen_range(0, Pokemon::TOTAL)
+            rng.gen_range(0..Pokemon::TOTAL)
         };
 
         let fetch_entry = async {
diff --git a/examples/progress_bar/Cargo.toml b/examples/progress_bar/Cargo.toml
index 383a9bdd..6624ae15 100644
--- a/examples/progress_bar/Cargo.toml
+++ b/examples/progress_bar/Cargo.toml
@@ -6,4 +6,4 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
diff --git a/examples/progress_bar/README.md b/examples/progress_bar/README.md
index 1e927b3c..1268ac6b 100644
--- a/examples/progress_bar/README.md
+++ b/examples/progress_bar/README.md
@@ -5,9 +5,7 @@ A simple progress bar that can be filled by using a slider.
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/importantdevotedhammerheadbird">
-    <img src="https://thumbs.gfycat.com/ImportantDevotedHammerheadbird-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/pokedex.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/qr_code/Cargo.toml b/examples/qr_code/Cargo.toml
index 2f164df6..8f33ea8c 100644
--- a/examples/qr_code/Cargo.toml
+++ b/examples/qr_code/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["qr_code"] }
+iced.workspace = true
+iced.features = ["qr_code"]
diff --git a/examples/qr_code/README.md b/examples/qr_code/README.md
index 2dd89c26..0d1abaa7 100644
--- a/examples/qr_code/README.md
+++ b/examples/qr_code/README.md
@@ -5,9 +5,7 @@ A basic QR code generator that showcases the `QRCode` widget.
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/heavyexhaustedaracari">
-    <img src="https://thumbs.gfycat.com/HeavyExhaustedAracari-size_restricted.gif">
-  </a>
+  <img src="https://iced.rs/examples/qr_code.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/screenshot/Cargo.toml b/examples/screenshot/Cargo.toml
index b79300b7..dcd77439 100644
--- a/examples/screenshot/Cargo.toml
+++ b/examples/screenshot/Cargo.toml
@@ -6,6 +6,8 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug", "image", "advanced"] }
-image = { version = "0.24.6", features = ["png"]}
-env_logger = "0.10.0"
+iced.workspace = true
+iced.features = ["debug", "image", "advanced"]
+
+image = { workspace = true, features = ["png"]}
+tracing-subscriber = "0.3"
\ No newline at end of file
diff --git a/examples/screenshot/src/main.rs b/examples/screenshot/src/main.rs
index 83824535..68c9d031 100644
--- a/examples/screenshot/src/main.rs
+++ b/examples/screenshot/src/main.rs
@@ -4,16 +4,15 @@ use iced::theme::{Button, Container};
 use iced::widget::{button, column, container, image, row, text, text_input};
 use iced::window::screenshot::{self, Screenshot};
 use iced::{
-    event, executor, keyboard, subscription, Alignment, Application, Command,
-    ContentFit, Element, Event, Length, Rectangle, Renderer, Subscription,
-    Theme,
+    event, executor, keyboard, Alignment, Application, Command, ContentFit,
+    Element, Event, Length, Rectangle, Renderer, Subscription, Theme,
 };
 
 use ::image as img;
 use ::image::ColorType;
 
 fn main() -> iced::Result {
-    env_logger::builder().format_timestamp(None).init();
+    tracing_subscriber::fmt::init();
 
     Example::run(iced::Settings::default())
 }
@@ -254,7 +253,7 @@ impl Application for Example {
     }
 
     fn subscription(&self) -> Subscription<Self::Message> {
-        subscription::events_with(|event, status| {
+        event::listen_with(|event, status| {
             if let event::Status::Captured = status {
                 return None;
             }
diff --git a/examples/scrollable/Cargo.toml b/examples/scrollable/Cargo.toml
index e6411e26..f8c735c0 100644
--- a/examples/scrollable/Cargo.toml
+++ b/examples/scrollable/Cargo.toml
@@ -6,5 +6,7 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug"] }
-once_cell = "1.16.0"
+iced.workspace = true
+iced.features = ["debug"]
+
+once_cell.workspace = true
diff --git a/examples/sierpinski_triangle/Cargo.toml b/examples/sierpinski_triangle/Cargo.toml
index 39d45f64..600a9e06 100644
--- a/examples/sierpinski_triangle/Cargo.toml
+++ b/examples/sierpinski_triangle/Cargo.toml
@@ -6,5 +6,7 @@ edition = "2018"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas", "debug"] }
-rand = "0.8.4"
+iced.workspace = true
+iced.features = ["debug", "canvas"]
+
+rand = "0.8"
diff --git a/examples/sierpinski_triangle/README.md b/examples/sierpinski_triangle/README.md
index 9fd18257..8b7676d1 100644
--- a/examples/sierpinski_triangle/README.md
+++ b/examples/sierpinski_triangle/README.md
@@ -5,9 +5,7 @@ A simple [Sierpiński triangle](https://en.wikipedia.org/wiki/Sierpi%C5%84ski_tr
 Left-click add fixed point, right-click remove fixed point.
 
 <div align="center">
-  <a href="https://gfycat.com/flippantrectangularechidna">
-    <img src="https://thumbs.gfycat.com/FlippantRectangularEchidna-size_restricted.gif">
-  </a>
+  <img src="https://iced.rs/examples/sierpinski_triangle.gif">
 </div>
 
 You can run with cargo:
diff --git a/examples/slider/Cargo.toml b/examples/slider/Cargo.toml
index 112d7cff..fad8916e 100644
--- a/examples/slider/Cargo.toml
+++ b/examples/slider/Cargo.toml
@@ -6,4 +6,4 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
diff --git a/examples/solar_system/Cargo.toml b/examples/solar_system/Cargo.toml
index 1a98a87e..ca64da14 100644
--- a/examples/solar_system/Cargo.toml
+++ b/examples/solar_system/Cargo.toml
@@ -6,6 +6,8 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["canvas", "tokio", "debug"] }
-env_logger = "0.10.0"
+iced.workspace = true
+iced.features = ["debug", "canvas", "tokio"]
+
 rand = "0.8.3"
+tracing-subscriber = "0.3"
diff --git a/examples/solar_system/README.md b/examples/solar_system/README.md
index acfbc466..81ffd3a5 100644
--- a/examples/solar_system/README.md
+++ b/examples/solar_system/README.md
@@ -5,9 +5,7 @@ An animated solar system drawn using the `Canvas` widget and showcasing how to c
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/selfassuredaromaticdunnart">
-    <img src="https://thumbs.gfycat.com/SelfassuredAromaticDunnart-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/solar_system.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/solar_system/src/main.rs b/examples/solar_system/src/main.rs
index 58d06206..8fa8946e 100644
--- a/examples/solar_system/src/main.rs
+++ b/examples/solar_system/src/main.rs
@@ -23,7 +23,7 @@ use iced::{
 use std::time::Instant;
 
 pub fn main() -> iced::Result {
-    env_logger::builder().format_timestamp(None).init();
+    tracing_subscriber::fmt::init();
 
     SolarSystem::run(Settings {
         antialiasing: true,
diff --git a/examples/stopwatch/Cargo.toml b/examples/stopwatch/Cargo.toml
index f623feb9..6b1419f6 100644
--- a/examples/stopwatch/Cargo.toml
+++ b/examples/stopwatch/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["smol"] }
+iced.workspace = true
+iced.features = ["smol"]
diff --git a/examples/stopwatch/README.md b/examples/stopwatch/README.md
index 4cf4582e..1cf370bd 100644
--- a/examples/stopwatch/README.md
+++ b/examples/stopwatch/README.md
@@ -5,9 +5,7 @@ A watch with start/stop and reset buttons showcasing how to listen to time.
 The __[`main`]__ file contains all the code of the example.
 
 <div align="center">
-  <a href="https://gfycat.com/granularenviousgoitered-rust-gui">
-    <img src="https://thumbs.gfycat.com/GranularEnviousGoitered-small.gif">
-  </a>
+  <img src="https://iced.rs/examples/stopwatch.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/stopwatch/src/main.rs b/examples/stopwatch/src/main.rs
index 842ba3d4..0b0f0607 100644
--- a/examples/stopwatch/src/main.rs
+++ b/examples/stopwatch/src/main.rs
@@ -1,5 +1,6 @@
 use iced::alignment;
 use iced::executor;
+use iced::keyboard;
 use iced::theme::{self, Theme};
 use iced::time;
 use iced::widget::{button, column, container, row, text};
@@ -77,12 +78,25 @@ impl Application for Stopwatch {
     }
 
     fn subscription(&self) -> Subscription<Message> {
-        match self.state {
+        let tick = match self.state {
             State::Idle => Subscription::none(),
             State::Ticking { .. } => {
                 time::every(Duration::from_millis(10)).map(Message::Tick)
             }
+        };
+
+        fn handle_hotkey(
+            key_code: keyboard::KeyCode,
+            _modifiers: keyboard::Modifiers,
+        ) -> Option<Message> {
+            match key_code {
+                keyboard::KeyCode::Space => Some(Message::Toggle),
+                keyboard::KeyCode::R => Some(Message::Reset),
+                _ => None,
+            }
         }
+
+        Subscription::batch(vec![tick, keyboard::on_key_press(handle_hotkey)])
     }
 
     fn view(&self) -> Element<Message> {
diff --git a/examples/styling/Cargo.toml b/examples/styling/Cargo.toml
index f771708c..c8a90258 100644
--- a/examples/styling/Cargo.toml
+++ b/examples/styling/Cargo.toml
@@ -6,4 +6,4 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
diff --git a/examples/styling/README.md b/examples/styling/README.md
index 6c198a54..fd12300d 100644
--- a/examples/styling/README.md
+++ b/examples/styling/README.md
@@ -4,9 +4,7 @@ An example showcasing custom styling with a light and dark theme.
 All the example code is located in the __[`main`](src/main.rs)__ file.
 
 <div align="center">
-  <a href="https://user-images.githubusercontent.com/518289/71867993-acff4300-310c-11ea-85a3-d01d8f884346.gif">
-    <img src="https://user-images.githubusercontent.com/518289/71867993-acff4300-310c-11ea-85a3-d01d8f884346.gif" height="400px">
-  </a>
+  <img src="https://iced.rs/examples/styling.gif">
 </div>
 
 You can run it with `cargo run`:
diff --git a/examples/styling/src/main.rs b/examples/styling/src/main.rs
index f8a4c80a..51538ec2 100644
--- a/examples/styling/src/main.rs
+++ b/examples/styling/src/main.rs
@@ -108,6 +108,7 @@ impl Sandbox for Styling {
             column!["Scroll me!", vertical_space(800), "You did it!"]
                 .width(Length::Fill),
         )
+        .width(Length::Fill)
         .height(100);
 
         let checkbox = checkbox(
diff --git a/examples/svg/Cargo.toml b/examples/svg/Cargo.toml
index f5a6eaa2..78208fb0 100644
--- a/examples/svg/Cargo.toml
+++ b/examples/svg/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["svg"] }
+iced.workspace = true
+iced.features = ["svg"]
diff --git a/examples/system_information/Cargo.toml b/examples/system_information/Cargo.toml
index 7d1e4b94..41903122 100644
--- a/examples/system_information/Cargo.toml
+++ b/examples/system_information/Cargo.toml
@@ -6,5 +6,7 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["system"] }
-bytesize = { version = "1.1.0" }
+iced.workspace = true
+iced.features = ["system"]
+
+bytesize = "1.1"
diff --git a/examples/toast/Cargo.toml b/examples/toast/Cargo.toml
index f703572c..113313e2 100644
--- a/examples/toast/Cargo.toml
+++ b/examples/toast/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["advanced"] }
+iced.workspace = true
+iced.features = ["advanced"]
diff --git a/examples/toast/src/main.rs b/examples/toast/src/main.rs
index 50fa885a..8570a38e 100644
--- a/examples/toast/src/main.rs
+++ b/examples/toast/src/main.rs
@@ -1,10 +1,12 @@
+use iced::event::{self, Event};
 use iced::executor;
 use iced::keyboard;
-use iced::subscription::{self, Subscription};
 use iced::widget::{
     self, button, column, container, pick_list, row, slider, text, text_input,
 };
-use iced::{Alignment, Application, Command, Element, Event, Length, Settings};
+use iced::{
+    Alignment, Application, Command, Element, Length, Settings, Subscription,
+};
 
 use toast::{Status, Toast};
 
@@ -57,7 +59,7 @@ impl Application for App {
     }
 
     fn subscription(&self) -> Subscription<Self::Message> {
-        subscription::events().map(Message::Event)
+        event::listen().map(Message::Event)
     }
 
     fn update(&mut self, message: Message) -> Command<Message> {
diff --git a/examples/todos/Cargo.toml b/examples/todos/Cargo.toml
index 7292f665..3c62bfbc 100644
--- a/examples/todos/Cargo.toml
+++ b/examples/todos/Cargo.toml
@@ -6,21 +6,26 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["async-std", "debug"] }
-uuid = { version = "1.0", features = ["v4", "fast-rng", "serde"] }
+iced.workspace = true
+iced.features = ["async-std", "debug"]
+
+once_cell.workspace = true
 serde = { version = "1.0", features = ["derive"] }
 serde_json = "1.0"
-once_cell = "1.0"
-tracing-subscriber = "0.3"
+uuid = { version = "1.0", features = ["v4", "fast-rng", "serde"] }
 
 [target.'cfg(not(target_arch = "wasm32"))'.dependencies]
-async-std = "1.0"
+async-std.workspace = true
 directories-next = "2.0"
+tracing-subscriber = "0.3"
 
 [target.'cfg(target_arch = "wasm32")'.dependencies]
+iced.workspace = true
+iced.features = ["debug", "webgl"]
+
 uuid = { version = "1.0", features = ["js"] }
-web-sys = { version = "0.3", features = ["Window", "Storage"] }
-wasm-timer = "0.2"
+web-sys = { workspace = true, features = ["Window", "Storage"] }
+wasm-timer.workspace = true
 
 [package.metadata.deb]
 assets = [
diff --git a/examples/todos/README.md b/examples/todos/README.md
index 9c2598b9..5e42f166 100644
--- a/examples/todos/README.md
+++ b/examples/todos/README.md
@@ -5,8 +5,8 @@ A todos tracker inspired by [TodoMVC]. It showcases dynamic layout, text input,
 All the example code is located in the __[`main`]__ file.
 
 <div align="center">
-  <a href="https://gfycat.com/littlesanehalicore">
-    <img src="https://thumbs.gfycat.com/LittleSaneHalicore-small.gif" height="400px">
+  <a href="https://iced.rs/examples/todos.mp4">
+    <img src="https://iced.rs/examples/todos.gif">
   </a>
 </div>
 
@@ -14,7 +14,14 @@ You can run the native version with `cargo run`:
 ```
 cargo run --package todos
 ```
-We have not yet implemented a `LocalStorage` version of the auto-save feature. Therefore, it does not work on web _yet_!
+
+The web version can be run with [`trunk`]:
+
+```
+cd examples/todos
+trunk serve
+```
 
 [`main`]: src/main.rs
 [TodoMVC]: http://todomvc.com/
+[`trunk`]: https://trunkrs.dev/
diff --git a/examples/todos/src/main.rs b/examples/todos/src/main.rs
index 1dd8a307..5d8936df 100644
--- a/examples/todos/src/main.rs
+++ b/examples/todos/src/main.rs
@@ -1,8 +1,6 @@
 use iced::alignment::{self, Alignment};
-use iced::event::{self, Event};
 use iced::font::{self, Font};
-use iced::keyboard::{self, KeyCode, Modifiers};
-use iced::subscription;
+use iced::keyboard;
 use iced::theme::{self, Theme};
 use iced::widget::{
     self, button, checkbox, column, container, keyed_column, row, scrollable,
@@ -55,7 +53,7 @@ enum Message {
     FilterChanged(Filter),
     TaskMessage(usize, TaskMessage),
     TabPressed { shift: bool },
-    ToggleFullscreen(window::Mode),
+    ChangeWindowMode(window::Mode),
 }
 
 impl Application for Todos {
@@ -166,7 +164,7 @@ impl Application for Todos {
                             widget::focus_next()
                         }
                     }
-                    Message::ToggleFullscreen(mode) => {
+                    Message::ChangeWindowMode(mode) => {
                         window::change_mode(mode)
                     }
                     _ => Command::none(),
@@ -267,33 +265,19 @@ impl Application for Todos {
     }
 
     fn subscription(&self) -> Subscription<Message> {
-        subscription::events_with(|event, status| match (event, status) {
-            (
-                Event::Keyboard(keyboard::Event::KeyPressed {
-                    key_code: keyboard::KeyCode::Tab,
-                    modifiers,
-                    ..
+        keyboard::on_key_press(|key_code, modifiers| {
+            match (key_code, modifiers) {
+                (keyboard::KeyCode::Tab, _) => Some(Message::TabPressed {
+                    shift: modifiers.shift(),
                 }),
-                event::Status::Ignored,
-            ) => Some(Message::TabPressed {
-                shift: modifiers.shift(),
-            }),
-            (
-                Event::Keyboard(keyboard::Event::KeyPressed {
-                    key_code,
-                    modifiers: Modifiers::SHIFT,
-                }),
-                event::Status::Ignored,
-            ) => match key_code {
-                KeyCode::Up => {
-                    Some(Message::ToggleFullscreen(window::Mode::Fullscreen))
+                (keyboard::KeyCode::Up, keyboard::Modifiers::SHIFT) => {
+                    Some(Message::ChangeWindowMode(window::Mode::Fullscreen))
                 }
-                KeyCode::Down => {
-                    Some(Message::ToggleFullscreen(window::Mode::Windowed))
+                (keyboard::KeyCode::Down, keyboard::Modifiers::SHIFT) => {
+                    Some(Message::ChangeWindowMode(window::Mode::Windowed))
                 }
                 _ => None,
-            },
-            _ => None,
+            }
         })
     }
 }
diff --git a/examples/tooltip/Cargo.toml b/examples/tooltip/Cargo.toml
index 25840fb4..57bb0dcb 100644
--- a/examples/tooltip/Cargo.toml
+++ b/examples/tooltip/Cargo.toml
@@ -6,4 +6,5 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug"] }
+iced.workspace = true
+iced.features = ["debug"]
diff --git a/examples/tour/Cargo.toml b/examples/tour/Cargo.toml
index 48471f2d..9e984ad1 100644
--- a/examples/tour/Cargo.toml
+++ b/examples/tour/Cargo.toml
@@ -6,5 +6,15 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["image", "debug"] }
-env_logger = "0.10.0"
+iced.workspace = true
+iced.features = ["image", "debug"]
+
+[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
+tracing-subscriber = "0.3"
+
+[target.'cfg(target_arch = "wasm32")'.dependencies]
+iced.workspace = true
+iced.features = ["image", "debug", "webgl"]
+
+console_error_panic_hook = "0.1"
+console_log = "1.0"
diff --git a/examples/tour/README.md b/examples/tour/README.md
index 731e7e66..1c01236b 100644
--- a/examples/tour/README.md
+++ b/examples/tour/README.md
@@ -5,8 +5,8 @@ A simple UI tour that can run both on native platforms and the web! It showcases
 The __[`main`]__ file contains all the code of the example! All the cross-platform GUI is defined in terms of __state__, __messages__, __update logic__ and __view logic__.
 
 <div align="center">
-  <a href="https://gfycat.com/politeadorableiberianmole">
-    <img src="https://thumbs.gfycat.com/PoliteAdorableIberianmole-small.gif">
+  <a href="https://iced.rs/examples/tour.mp4">
+    <img src="https://iced.rs/examples/tour.gif">
   </a>
 </div>
 
diff --git a/examples/tour/src/main.rs b/examples/tour/src/main.rs
index 10de2ae1..3e3a8ad7 100644
--- a/examples/tour/src/main.rs
+++ b/examples/tour/src/main.rs
@@ -8,7 +8,14 @@ use iced::widget::{Button, Column, Container, Slider};
 use iced::{Color, Element, Font, Length, Pixels, Renderer, Sandbox, Settings};
 
 pub fn main() -> iced::Result {
-    env_logger::init();
+    #[cfg(target_arch = "wasm32")]
+    {
+        console_log::init().expect("Initialize logger");
+        std::panic::set_hook(Box::new(console_error_panic_hook::hook));
+    }
+
+    #[cfg(not(target_arch = "wasm32"))]
+    tracing_subscriber::fmt::init();
 
     Tour::run(Settings::default())
 }
diff --git a/examples/url_handler/Cargo.toml b/examples/url_handler/Cargo.toml
index 4dcff92d..7bb9914b 100644
--- a/examples/url_handler/Cargo.toml
+++ b/examples/url_handler/Cargo.toml
@@ -6,4 +6,4 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../.." }
+iced.workspace = true
diff --git a/examples/url_handler/src/main.rs b/examples/url_handler/src/main.rs
index f63fa06a..bf570123 100644
--- a/examples/url_handler/src/main.rs
+++ b/examples/url_handler/src/main.rs
@@ -1,6 +1,5 @@
-use iced::event::{Event, MacOS, PlatformSpecific};
+use iced::event::{self, Event};
 use iced::executor;
-use iced::subscription;
 use iced::widget::{container, text};
 use iced::{
     Application, Command, Element, Length, Settings, Subscription, Theme,
@@ -37,9 +36,11 @@ impl Application for App {
     fn update(&mut self, message: Message) -> Command<Message> {
         match message {
             Message::EventOccurred(event) => {
-                if let Event::PlatformSpecific(PlatformSpecific::MacOS(
-                    MacOS::ReceivedUrl(url),
-                )) = event
+                if let Event::PlatformSpecific(
+                    event::PlatformSpecific::MacOS(event::MacOS::ReceivedUrl(
+                        url,
+                    )),
+                ) = event
                 {
                     self.url = Some(url);
                 }
@@ -50,7 +51,7 @@ impl Application for App {
     }
 
     fn subscription(&self) -> Subscription<Message> {
-        subscription::events().map(Message::EventOccurred)
+        event::listen().map(Message::EventOccurred)
     }
 
     fn view(&self) -> Element<Message> {
diff --git a/examples/visible_bounds/Cargo.toml b/examples/visible_bounds/Cargo.toml
index cfa56dd2..37594b84 100644
--- a/examples/visible_bounds/Cargo.toml
+++ b/examples/visible_bounds/Cargo.toml
@@ -6,5 +6,7 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["debug"] }
-once_cell = "1"
+iced.workspace = true
+iced.features = ["debug"]
+
+once_cell.workspace = true
diff --git a/examples/visible_bounds/src/main.rs b/examples/visible_bounds/src/main.rs
index 8b684514..42dfc24c 100644
--- a/examples/visible_bounds/src/main.rs
+++ b/examples/visible_bounds/src/main.rs
@@ -1,14 +1,14 @@
+use iced::event::{self, Event};
 use iced::executor;
 use iced::mouse;
-use iced::subscription::{self, Subscription};
 use iced::theme::{self, Theme};
 use iced::widget::{
     column, container, horizontal_space, row, scrollable, text, vertical_space,
 };
 use iced::window;
 use iced::{
-    Alignment, Application, Color, Command, Element, Event, Font, Length,
-    Point, Rectangle, Settings,
+    Alignment, Application, Color, Command, Element, Font, Length, Point,
+    Rectangle, Settings, Subscription,
 };
 
 pub fn main() -> iced::Result {
@@ -163,7 +163,7 @@ impl Application for Example {
     }
 
     fn subscription(&self) -> Subscription<Message> {
-        subscription::events_with(|event, _| match event {
+        event::listen_with(|event, _| match event {
             Event::Mouse(mouse::Event::CursorMoved { position }) => {
                 Some(Message::MouseMoved(position))
             }
diff --git a/examples/websocket/Cargo.toml b/examples/websocket/Cargo.toml
index 12af9658..2756e8e0 100644
--- a/examples/websocket/Cargo.toml
+++ b/examples/websocket/Cargo.toml
@@ -6,16 +6,16 @@ edition = "2021"
 publish = false
 
 [dependencies]
-iced = { path = "../..", features = ["tokio", "debug"] }
-once_cell = "1.15"
+iced.workspace = true
+iced.features = ["debug", "tokio"]
+
+once_cell.workspace = true
+warp = "0.3"
 
 [dependencies.async-tungstenite]
 version = "0.23"
 features = ["tokio-rustls-webpki-roots"]
 
 [dependencies.tokio]
-version = "1"
+workspace = true
 features = ["time"]
-
-[dependencies.warp]
-version = "0.3"