Rethink workspace structure

44 files changed, 684 insertions, 51 deletions

diff --git a/.gitignore b/.gitignore
index 2f88dbac..99cebb8a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,3 +1,4 @@
 /target
+pkg/
 **/*.rs.bk
-Cargo.lock
\ No newline at end of file
+Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
index 43556cbe..07a4e9ac 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,5 +1,36 @@
+[package]
+name = "iced"
+version = "0.1.0-alpha"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+description = "A GUI runtime, heavily inspired by Elm."
+license = "MIT"
+repository = "https://github.com/hecrj/iced"
+documentation = "https://docs.rs/iced"
+readme = "README.md"
+keywords = ["gui", "ui", "graphics", "interface", "widgets"]
+categories = ["gui"]
+
+[badges]
+maintenance = { status = "actively-developed" }
+
+[package.metadata.docs.rs]
+features = ["winit"]
+
+[dependencies]
+stretch = "0.2"
+twox-hash = "1.5"
+
+# Enable to obtain conversion traits
+winit = { version = "0.20.0-alpha3", optional = true }
+
+[dev-dependencies]
+# A personal `ggez` fork that introduces a `FontCache` type to measure text
+# efficiently and fixes HiDPI issues.
+ggez = { version = "0.5", git = "https://github.com/hecrj/ggez.git" }
+
 [workspace]
 members = [
-    "core",
-    "examples",
+    "web",
+    "web/examples/tour",
 ]
diff --git a/core/Cargo.toml b/core/Cargo.toml
deleted file mode 100644
index cd84d03e..00000000
--- a/core/Cargo.toml
+++ /dev/null
@@ -1,25 +0,0 @@
-[package]
-name = "iced"
-version = "0.1.0-alpha"
-authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
-edition = "2018"
-description = "A GUI runtime, heavily inspired by Elm."
-license = "MIT"
-repository = "https://github.com/hecrj/iced"
-documentation = "https://docs.rs/iced"
-readme = "README.md"
-keywords = ["gui", "ui", "graphics", "interface", "widgets"]
-categories = ["gui"]
-
-[badges]
-maintenance = { status = "actively-developed" }
-
-[package.metadata.docs.rs]
-features = ["winit"]
-
-[dependencies]
-stretch = "0.2"
-twox-hash = "1.5"
-
-# Enable to obtain conversion traits
-winit = { version = "0.20.0-alpha3", optional = true }
diff --git a/examples/Cargo.toml b/examples/Cargo.toml
deleted file mode 100644
index fdf854cd..00000000
--- a/examples/Cargo.toml
+++ /dev/null
@@ -1,17 +0,0 @@
-[package]
-name = "iced_examples"
-version = "0.0.0"
-authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
-publish = false
-edition = "2018"
-
-[[bin]]
-name = "tour"
-path = "tour/main.rs"
-
-[dependencies]
-iced = { version = "0.1.0-alpha", path = "../core" }
-
-# A personal `ggez` fork that introduces a `FontCache` type to measure text
-# efficiently and fixes HiDPI issues.
-ggez = { version = "0.5", git = "https://github.com/hecrj/ggez.git" }
diff --git a/examples/README.md b/examples/README.md
index 0a8a126e..2032df49 100644
--- a/examples/README.md
+++ b/examples/README.md
@@ -26,16 +26,16 @@ The implementation consists of different modules:
     the [`renderer`].
 
 ```
-cargo run --example tour
+cargo run --package iced_ggez_tour
 ```
 
 [![Tour - Iced][gui_gif]][gui_gfycat]
 
 [`ggez`]: https://github.com/ggez/ggez
-[`tour`]: tour/tour.rs
-[`renderer`]: tour/renderer
-[`widget`]: tour/widget.rs
-[`main`]: tour/main.rs
+[`tour`]: tour/src/tour.rs
+[`renderer`]: tour/src/renderer
+[`widget`]: tour/src/widget.rs
+[`main`]: tour/src/main.rs
 [personal fork]: https://github.com/hecrj/ggez
 [add a `FontCache` type]: https://github.com/ggez/ggez/pull/679
 [fix some issues with HiDPI]: https://github.com/hecrj/ggez/commit/dfe2fd2423c51a6daf42c75f66dfaeaacd439fb1
diff --git a/examples/tour/main.rs b/examples/tour/main.rs
index ce477fd9..571bc2e2 100644
--- a/examples/tour/main.rs
+++ b/examples/tour/main.rs
@@ -27,7 +27,7 @@ pub fn main() -> ggez::GameResult {
     filesystem::mount(
         context,
         std::path::Path::new(&format!(
-            "{}/resources",
+            "{}/examples/resources",
             env!("CARGO_MANIFEST_DIR")
         )),
         true,
diff --git a/core/src/element.rs b/src/element.rs
index 70d06f42..70d06f42 100644
--- a/core/src/element.rs
+++ b/src/element.rs
diff --git a/core/src/event.rs b/src/event.rs
index 71f06006..71f06006 100644
--- a/core/src/event.rs
+++ b/src/event.rs
diff --git a/core/src/hasher.rs b/src/hasher.rs
index 9f6aacce..9f6aacce 100644
--- a/core/src/hasher.rs
+++ b/src/hasher.rs
diff --git a/core/src/input.rs b/src/input.rs
index 097fa730..097fa730 100644
--- a/core/src/input.rs
+++ b/src/input.rs
diff --git a/core/src/input/button_state.rs b/src/input/button_state.rs
index e9dc05d7..e9dc05d7 100644
--- a/core/src/input/button_state.rs
+++ b/src/input/button_state.rs
diff --git a/core/src/input/keyboard.rs b/src/input/keyboard.rs
index 57c24484..57c24484 100644
--- a/core/src/input/keyboard.rs
+++ b/src/input/keyboard.rs
diff --git a/core/src/input/keyboard/event.rs b/src/input/keyboard/event.rs
index 8118f112..8118f112 100644
--- a/core/src/input/keyboard/event.rs
+++ b/src/input/keyboard/event.rs
diff --git a/core/src/input/keyboard/key_code.rs b/src/input/keyboard/key_code.rs
index 207ddeac..207ddeac 100644
--- a/core/src/input/keyboard/key_code.rs
+++ b/src/input/keyboard/key_code.rs
diff --git a/core/src/input/mouse.rs b/src/input/mouse.rs
index d37f5b96..d37f5b96 100644
--- a/core/src/input/mouse.rs
+++ b/src/input/mouse.rs
diff --git a/core/src/input/mouse/button.rs b/src/input/mouse/button.rs
index 6320d701..6320d701 100644
--- a/core/src/input/mouse/button.rs
+++ b/src/input/mouse/button.rs
diff --git a/core/src/input/mouse/event.rs b/src/input/mouse/event.rs
index 7b68208f..7b68208f 100644
--- a/core/src/input/mouse/event.rs
+++ b/src/input/mouse/event.rs
diff --git a/core/src/layout.rs b/src/layout.rs
index de284a43..de284a43 100644
--- a/core/src/layout.rs
+++ b/src/layout.rs
diff --git a/core/src/lib.rs b/src/lib.rs
index c1c18b41..c1c18b41 100644
--- a/core/src/lib.rs
+++ b/src/lib.rs
diff --git a/core/src/mouse_cursor.rs b/src/mouse_cursor.rs
index 4ef6361a..4ef6361a 100644
--- a/core/src/mouse_cursor.rs
+++ b/src/mouse_cursor.rs
diff --git a/core/src/node.rs b/src/node.rs
index 1db10d7f..1db10d7f 100644
--- a/core/src/node.rs
+++ b/src/node.rs
diff --git a/core/src/point.rs b/src/point.rs
index 183998dd..183998dd 100644
--- a/core/src/point.rs
+++ b/src/point.rs
diff --git a/core/src/rectangle.rs b/src/rectangle.rs
index 95c2570c..95c2570c 100644
--- a/core/src/rectangle.rs
+++ b/src/rectangle.rs
diff --git a/core/src/renderer.rs b/src/renderer.rs
index b445190b..b445190b 100644
--- a/core/src/renderer.rs
+++ b/src/renderer.rs
diff --git a/core/src/style.rs b/src/style.rs
index 575ea366..575ea366 100644
--- a/core/src/style.rs
+++ b/src/style.rs
diff --git a/core/src/user_interface.rs b/src/user_interface.rs
index 2c7cbf82..2c7cbf82 100644
--- a/core/src/user_interface.rs
+++ b/src/user_interface.rs
diff --git a/core/src/vector.rs b/src/vector.rs
index f45daab9..f45daab9 100644
--- a/core/src/vector.rs
+++ b/src/vector.rs
diff --git a/core/src/widget.rs b/src/widget.rs
index 30606934..30606934 100644
--- a/core/src/widget.rs
+++ b/src/widget.rs
diff --git a/core/src/widget/button.rs b/src/widget/button.rs
index abcdbfeb..abcdbfeb 100644
--- a/core/src/widget/button.rs
+++ b/src/widget/button.rs
diff --git a/core/src/widget/checkbox.rs b/src/widget/checkbox.rs
index c60807fd..c60807fd 100644
--- a/core/src/widget/checkbox.rs
+++ b/src/widget/checkbox.rs
diff --git a/core/src/widget/column.rs b/src/widget/column.rs
index ff754e98..ff754e98 100644
--- a/core/src/widget/column.rs
+++ b/src/widget/column.rs
diff --git a/core/src/widget/image.rs b/src/widget/image.rs
index d94bfea5..d94bfea5 100644
--- a/core/src/widget/image.rs
+++ b/src/widget/image.rs
diff --git a/core/src/widget/panel.rs b/src/widget/panel.rs
index d43d6fb6..d43d6fb6 100644
--- a/core/src/widget/panel.rs
+++ b/src/widget/panel.rs
diff --git a/core/src/widget/progress_bar.rs b/src/widget/progress_bar.rs
index d4499160..d4499160 100644
--- a/core/src/widget/progress_bar.rs
+++ b/src/widget/progress_bar.rs
diff --git a/core/src/widget/radio.rs b/src/widget/radio.rs
index 28353ef4..28353ef4 100644
--- a/core/src/widget/radio.rs
+++ b/src/widget/radio.rs
diff --git a/core/src/widget/row.rs b/src/widget/row.rs
index 959528dc..959528dc 100644
--- a/core/src/widget/row.rs
+++ b/src/widget/row.rs
diff --git a/core/src/widget/slider.rs b/src/widget/slider.rs
index cdec9ec4..cdec9ec4 100644
--- a/core/src/widget/slider.rs
+++ b/src/widget/slider.rs
diff --git a/core/src/widget/text.rs b/src/widget/text.rs
index 59b599bb..59b599bb 100644
--- a/core/src/widget/text.rs
+++ b/src/widget/text.rs
diff --git a/web/Cargo.toml b/web/Cargo.toml
new file mode 100644
index 00000000..acc5f18b
--- /dev/null
+++ b/web/Cargo.toml
@@ -0,0 +1,27 @@
+[package]
+name = "iced_web"
+version = "0.1.0-alpha"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+description = "A web backend for Iced"
+license = "MIT"
+repository = "https://github.com/hecrj/iced"
+documentation = "https://docs.rs/iced_web"
+readme = "README.md"
+keywords = ["gui", "ui", "web", "interface", "widgets"]
+categories = ["web-programming"]
+
+[badges]
+maintenance = { status = "actively-developed" }
+
+[dependencies]
+iced = { version = "0.1.0-alpha", path = ".." }
+dodrio = "0.1.0"
+
+[dependencies.web-sys]
+version = "0.3.27"
+features = [
+    "console",
+    "Document",
+    "HtmlElement",
+]
diff --git a/web/examples/tour/Cargo.toml b/web/examples/tour/Cargo.toml
new file mode 100644
index 00000000..15f38fa7
--- /dev/null
+++ b/web/examples/tour/Cargo.toml
@@ -0,0 +1,16 @@
+[package]
+name = "iced_web_tour"
+version = "0.0.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2018"
+publish = false
+
+[lib]
+crate-type = ["cdylib"]
+
+[dependencies]
+iced_web = { path = "../.." }
+wasm-bindgen = "0.2.50"
+log = "0.4"
+console_error_panic_hook = "0.1.6"
+console_log = "0.1.2"
diff --git a/web/examples/tour/index.html b/web/examples/tour/index.html
new file mode 100644
index 00000000..a639a6cb
--- /dev/null
+++ b/web/examples/tour/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+    <title>Tour - Iced Web</title>
+  </head>
+  <body>
+    <script type="module">
+      import init from "./pkg/iced_web_tour.js";
+      init("./pkg/iced_web_tour_bg.wasm");
+    </script>
+  </body>
+</html>
diff --git a/web/examples/tour/src/lib.rs b/web/examples/tour/src/lib.rs
new file mode 100644
index 00000000..e747a193
--- /dev/null
+++ b/web/examples/tour/src/lib.rs
@@ -0,0 +1,8 @@
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen(start)]
+pub fn run() {
+    console_error_panic_hook::set_once();
+    console_log::init_with_level(log::Level::Trace)
+        .expect("Initialize logging");
+}
diff --git a/web/examples/tour/src/tour.rs b/web/examples/tour/src/tour.rs
new file mode 100644
index 00000000..d0be99b0
--- /dev/null
+++ b/web/examples/tour/src/tour.rs
@@ -0,0 +1,578 @@
+use super::widget::{
+    button, slider, Button, Checkbox, Column, Element, Image, Radio, Row,
+    Slider, Text,
+};
+
+use ggez::graphics::{self, Color, FilterMode, BLACK};
+use ggez::Context;
+use iced::{text::HorizontalAlignment, Align};
+
+pub struct Tour {
+    steps: Steps,
+    back_button: button::State,
+    next_button: button::State,
+    debug: bool,
+}
+
+impl Tour {
+    pub fn new(context: &mut Context) -> Tour {
+        Tour {
+            steps: Steps::new(context),
+            back_button: button::State::new(),
+            next_button: button::State::new(),
+            debug: false,
+        }
+    }
+
+    pub fn update(&mut self, event: Message) {
+        match event {
+            Message::BackPressed => {
+                self.steps.go_back();
+            }
+            Message::NextPressed => {
+                self.steps.advance();
+            }
+            Message::StepMessage(step_msg) => {
+                self.steps.update(step_msg, &mut self.debug);
+            }
+        }
+    }
+
+    pub fn view(&mut self) -> Element<Message> {
+        let Tour {
+            steps,
+            back_button,
+            next_button,
+            ..
+        } = self;
+
+        let mut controls = Row::new();
+
+        if steps.has_previous() {
+            controls = controls.push(
+                Button::new(back_button, "Back")
+                    .on_press(Message::BackPressed)
+                    .class(button::Class::Secondary),
+            );
+        }
+
+        controls = controls.push(Column::new());
+
+        if steps.can_continue() {
+            controls = controls.push(
+                Button::new(next_button, "Next").on_press(Message::NextPressed),
+            );
+        }
+
+        let element: Element<_> = Column::new()
+            .max_width(500)
+            .spacing(20)
+            .push(steps.view(self.debug).map(Message::StepMessage))
+            .push(controls)
+            .into();
+
+        if self.debug {
+            element.explain(BLACK)
+        } else {
+            element
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy)]
+pub enum Message {
+    BackPressed,
+    NextPressed,
+    StepMessage(StepMessage),
+}
+
+struct Steps {
+    steps: Vec<Step>,
+    current: usize,
+}
+
+impl Steps {
+    fn new(context: &mut Context) -> Steps {
+        Steps {
+            steps: vec![
+                Step::Welcome,
+                Step::Slider {
+                    state: slider::State::new(),
+                    value: 50,
+                },
+                Step::RowsAndColumns {
+                    layout: Layout::Row,
+                    spacing_slider: slider::State::new(),
+                    spacing: 20,
+                },
+                Step::Text {
+                    size_slider: slider::State::new(),
+                    size: 30,
+                    color_sliders: [slider::State::new(); 3],
+                    color: BLACK,
+                },
+                Step::Radio { selection: None },
+                Step::Image {
+                    ferris: {
+                        let mut image =
+                            graphics::Image::new(context, "/ferris.png")
+                                .expect("Load ferris image");
+
+                        image.set_filter(FilterMode::Linear);
+
+                        image
+                    },
+                    width: 300,
+                    slider: slider::State::new(),
+                },
+                Step::Debugger,
+                Step::End,
+            ],
+            current: 0,
+        }
+    }
+
+    fn update(&mut self, msg: StepMessage, debug: &mut bool) {
+        self.steps[self.current].update(msg, debug);
+    }
+
+    fn view(&mut self, debug: bool) -> Element<StepMessage> {
+        self.steps[self.current].view(debug)
+    }
+
+    fn advance(&mut self) {
+        if self.can_continue() {
+            self.current += 1;
+        }
+    }
+
+    fn go_back(&mut self) {
+        if self.has_previous() {
+            self.current -= 1;
+        }
+    }
+
+    fn has_previous(&self) -> bool {
+        self.current > 0
+    }
+
+    fn can_continue(&self) -> bool {
+        self.current + 1 < self.steps.len()
+            && self.steps[self.current].can_continue()
+    }
+}
+
+enum Step {
+    Welcome,
+    Slider {
+        state: slider::State,
+        value: u16,
+    },
+    RowsAndColumns {
+        layout: Layout,
+        spacing_slider: slider::State,
+        spacing: u16,
+    },
+    Text {
+        size_slider: slider::State,
+        size: u16,
+        color_sliders: [slider::State; 3],
+        color: Color,
+    },
+    Radio {
+        selection: Option<Language>,
+    },
+    Image {
+        ferris: graphics::Image,
+        width: u16,
+        slider: slider::State,
+    },
+    Debugger,
+    End,
+}
+
+#[derive(Debug, Clone, Copy)]
+pub enum StepMessage {
+    SliderChanged(f32),
+    LayoutChanged(Layout),
+    SpacingChanged(f32),
+    TextSizeChanged(f32),
+    TextColorChanged(Color),
+    LanguageSelected(Language),
+    ImageWidthChanged(f32),
+    DebugToggled(bool),
+}
+
+impl<'a> Step {
+    fn update(&mut self, msg: StepMessage, debug: &mut bool) {
+        match msg {
+            StepMessage::DebugToggled(value) => {
+                if let Step::Debugger = self {
+                    *debug = value;
+                }
+            }
+            StepMessage::LanguageSelected(language) => {
+                if let Step::Radio { selection } = self {
+                    *selection = Some(language);
+                }
+            }
+            StepMessage::SliderChanged(new_value) => {
+                if let Step::Slider { value, .. } = self {
+                    *value = new_value.round() as u16;
+                }
+            }
+            StepMessage::TextSizeChanged(new_size) => {
+                if let Step::Text { size, .. } = self {
+                    *size = new_size.round() as u16;
+                }
+            }
+            StepMessage::TextColorChanged(new_color) => {
+                if let Step::Text { color, .. } = self {
+                    *color = new_color;
+                }
+            }
+            StepMessage::LayoutChanged(new_layout) => {
+                if let Step::RowsAndColumns { layout, .. } = self {
+                    *layout = new_layout;
+                }
+            }
+            StepMessage::SpacingChanged(new_spacing) => {
+                if let Step::RowsAndColumns { spacing, .. } = self {
+                    *spacing = new_spacing.round() as u16;
+                }
+            }
+            StepMessage::ImageWidthChanged(new_width) => {
+                if let Step::Image { width, .. } = self {
+                    *width = new_width.round() as u16;
+                }
+            }
+        };
+    }
+
+    fn can_continue(&self) -> bool {
+        match self {
+            Step::Welcome => true,
+            Step::Radio { selection } => *selection == Some(Language::Rust),
+            Step::Slider { .. } => true,
+            Step::Text { .. } => true,
+            Step::Image { .. } => true,
+            Step::RowsAndColumns { .. } => true,
+            Step::Debugger => true,
+            Step::End => false,
+        }
+    }
+
+    fn view(&mut self, debug: bool) -> Element<StepMessage> {
+        match self {
+            Step::Welcome => Self::welcome().into(),
+            Step::Radio { selection } => Self::radio(*selection).into(),
+            Step::Slider { state, value } => Self::slider(state, *value).into(),
+            Step::Text {
+                size_slider,
+                size,
+                color_sliders,
+                color,
+            } => Self::text(size_slider, *size, color_sliders, *color).into(),
+            Step::Image {
+                ferris,
+                width,
+                slider,
+            } => Self::image(ferris.clone(), *width, slider).into(),
+            Step::RowsAndColumns {
+                layout,
+                spacing_slider,
+                spacing,
+            } => {
+                Self::rows_and_columns(*layout, spacing_slider, *spacing).into()
+            }
+            Step::Debugger => Self::debugger(debug).into(),
+            Step::End => Self::end().into(),
+        }
+    }
+
+    fn container(title: &str) -> Column<'a, StepMessage> {
+        Column::new()
+            .spacing(20)
+            .align_items(Align::Stretch)
+            .push(Text::new(title).size(50))
+    }
+
+    fn welcome() -> Column<'a, StepMessage> {
+        Self::container("Welcome!")
+            .push(Text::new(
+                "This a simple tour meant to showcase a bunch of widgets that \
+                 can be easily implemented on top of Iced.",
+            ))
+            .push(Text::new(
+                "Iced is a renderer-agnostic GUI library for Rust focused on \
+                 simplicity and type-safety. It is heavily inspired by Elm.",
+            ))
+            .push(Text::new(
+                "It was originally born as part of Coffee, an opinionated \
+                 2D game engine for Rust.",
+            ))
+            .push(Text::new(
+                "Iced does not provide a built-in renderer. This example runs \
+                 on a fairly simple renderer built on top of ggez, another \
+                 game library.",
+            ))
+            .push(Text::new(
+                "You will need to interact with the UI in order to reach the \
+                 end!",
+            ))
+    }
+
+    fn slider(
+        state: &'a mut slider::State,
+        value: u16,
+    ) -> Column<'a, StepMessage> {
+        Self::container("Slider")
+            .push(Text::new(
+                "A slider allows you to smoothly select a value from a range \
+                 of values.",
+            ))
+            .push(Text::new(
+                "The following slider lets you choose an integer from \
+                 0 to 100:",
+            ))
+            .push(Slider::new(
+                state,
+                0.0..=100.0,
+                value as f32,
+                StepMessage::SliderChanged,
+            ))
+            .push(
+                Text::new(&value.to_string())
+                    .horizontal_alignment(HorizontalAlignment::Center),
+            )
+    }
+
+    fn rows_and_columns(
+        layout: Layout,
+        spacing_slider: &'a mut slider::State,
+        spacing: u16,
+    ) -> Column<'a, StepMessage> {
+        let row_radio = Radio::new(
+            Layout::Row,
+            "Row",
+            Some(layout),
+            StepMessage::LayoutChanged,
+        );
+
+        let column_radio = Radio::new(
+            Layout::Column,
+            "Column",
+            Some(layout),
+            StepMessage::LayoutChanged,
+        );
+
+        let layout_section: Element<_> = match layout {
+            Layout::Row => Row::new()
+                .spacing(spacing)
+                .push(row_radio)
+                .push(column_radio)
+                .into(),
+            Layout::Column => Column::new()
+                .spacing(spacing)
+                .push(row_radio)
+                .push(column_radio)
+                .into(),
+        };
+
+        let spacing_section = Column::new()
+            .spacing(10)
+            .push(Slider::new(
+                spacing_slider,
+                0.0..=80.0,
+                spacing as f32,
+                StepMessage::SpacingChanged,
+            ))
+            .push(
+                Text::new(&format!("{} px", spacing))
+                    .horizontal_alignment(HorizontalAlignment::Center),
+            );
+
+        Self::container("Rows and columns")
+            .spacing(spacing)
+            .push(Text::new(
+                "Iced uses a layout model based on flexbox to position UI \
+                 elements.",
+            ))
+            .push(Text::new(
+                "Rows and columns can be used to distribute content \
+                 horizontally or vertically, respectively.",
+            ))
+            .push(layout_section)
+            .push(Text::new(
+                "You can also easily change the spacing between elements:",
+            ))
+            .push(spacing_section)
+    }
+
+    fn text(
+        size_slider: &'a mut slider::State,
+        size: u16,
+        color_sliders: &'a mut [slider::State; 3],
+        color: Color,
+    ) -> Column<'a, StepMessage> {
+        let size_section = Column::new()
+            .padding(20)
+            .spacing(20)
+            .push(Text::new("You can change its size:"))
+            .push(
+                Text::new(&format!("This text is {} pixels", size)).size(size),
+            )
+            .push(Slider::new(
+                size_slider,
+                10.0..=70.0,
+                size as f32,
+                StepMessage::TextSizeChanged,
+            ));
+
+        let [red, green, blue] = color_sliders;
+        let color_section = Column::new()
+            .padding(20)
+            .spacing(20)
+            .push(Text::new("And its color:"))
+            .push(Text::new(&format!("{:?}", color)).color(color))
+            .push(
+                Row::new()
+                    .spacing(10)
+                    .push(Slider::new(red, 0.0..=1.0, color.r, move |r| {
+                        StepMessage::TextColorChanged(Color { r, ..color })
+                    }))
+                    .push(Slider::new(green, 0.0..=1.0, color.g, move |g| {
+                        StepMessage::TextColorChanged(Color { g, ..color })
+                    }))
+                    .push(Slider::new(blue, 0.0..=1.0, color.b, move |b| {
+                        StepMessage::TextColorChanged(Color { b, ..color })
+                    })),
+            );
+
+        Self::container("Text")
+            .push(Text::new(
+                "Text is probably the most essential widget for your UI. \
+                 It will try to adapt to the dimensions of its container.",
+            ))
+            .push(size_section)
+            .push(color_section)
+    }
+
+    fn radio(selection: Option<Language>) -> Column<'a, StepMessage> {
+        let question = Column::new()
+            .padding(20)
+            .spacing(10)
+            .push(Text::new("Iced is written in...").size(24))
+            .push(Language::all().iter().cloned().fold(
+                Column::new().padding(10).spacing(20),
+                |choices, language| {
+                    choices.push(Radio::new(
+                        language,
+                        language.into(),
+                        selection,
+                        StepMessage::LanguageSelected,
+                    ))
+                },
+            ));
+
+        Self::container("Radio button")
+            .push(Text::new(
+                "A radio button is normally used to represent a choice... \
+                 Surprise test!",
+            ))
+            .push(question)
+            .push(Text::new(
+                "Iced works very well with iterators! The list above is \
+                 basically created by folding a column over the different \
+                 choices, creating a radio button for each one of them!",
+            ))
+    }
+
+    fn image(
+        ferris: graphics::Image,
+        width: u16,
+        slider: &'a mut slider::State,
+    ) -> Column<'a, StepMessage> {
+        Self::container("Image")
+            .push(Text::new("An image that tries to keep its aspect ratio."))
+            .push(Image::new(ferris).width(width).align_self(Align::Center))
+            .push(Slider::new(
+                slider,
+                100.0..=500.0,
+                width as f32,
+                StepMessage::ImageWidthChanged,
+            ))
+            .push(
+                Text::new(&format!("Width: {} px", width.to_string()))
+                    .horizontal_alignment(HorizontalAlignment::Center),
+            )
+    }
+
+    fn debugger(debug: bool) -> Column<'a, StepMessage> {
+        Self::container("Debugger")
+            .push(Text::new(
+                "You can ask Iced to visually explain the layouting of the \
+                 different elements comprising your UI!",
+            ))
+            .push(Text::new(
+                "Give it a shot! Check the following checkbox to be able to \
+                 see element boundaries.",
+            ))
+            .push(Checkbox::new(
+                debug,
+                "Explain layout",
+                StepMessage::DebugToggled,
+            ))
+            .push(Text::new("Feel free to go back and take a look."))
+    }
+
+    fn end() -> Column<'a, StepMessage> {
+        Self::container("You reached the end!")
+            .push(Text::new(
+                "This tour will be updated as more features are added.",
+            ))
+            .push(Text::new("Make sure to keep an eye on it!"))
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Language {
+    Rust,
+    Elm,
+    Ruby,
+    Haskell,
+    C,
+    Other,
+}
+
+impl Language {
+    fn all() -> [Language; 6] {
+        [
+            Language::C,
+            Language::Elm,
+            Language::Ruby,
+            Language::Haskell,
+            Language::Rust,
+            Language::Other,
+        ]
+    }
+}
+
+impl From<Language> for &str {
+    fn from(language: Language) -> &'static str {
+        match language {
+            Language::Rust => "Rust",
+            Language::Elm => "Elm",
+            Language::Ruby => "Ruby",
+            Language::Haskell => "Haskell",
+            Language::C => "C",
+            Language::Other => "Other",
+        }
+    }
+}
+
+#[derive(Debug, Clone, Copy, PartialEq, Eq)]
+pub enum Layout {
+    Row,
+    Column,
+}
diff --git a/web/src/lib.rs b/web/src/lib.rs
new file mode 100644
index 00000000..8b137891
--- /dev/null
+++ b/web/src/lib.rs
@@ -0,0 +1 @@
+