3 files changed, 187 insertions, 0 deletions
diff --git a/examples/markdown/Cargo.toml b/examples/markdown/Cargo.toml
new file mode 100644
index 00000000..cb74b954
--- /dev/null
+++ b/examples/markdown/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "markdown"
+version = "0.1.0"
+authors = ["Héctor Ramón Jiménez <hector0193@gmail.com>"]
+edition = "2021"
+publish = false
+
+[dependencies]
+iced.workspace = true
+iced.features = ["markdown", "highlighter", "debug"]
+
+open = "5.3"
diff --git a/examples/markdown/overview.md b/examples/markdown/overview.md
new file mode 100644
index 00000000..66336c5b
--- /dev/null
+++ b/examples/markdown/overview.md
@@ -0,0 +1,93 @@
+# Overview
+
+Inspired by [The Elm Architecture], Iced expects you to split user interfaces into four different concepts:
+
+* __State__ — the state of your application
+* __Messages__ — user interactions or meaningful events that you care about
+* __View logic__ — a way to display your __state__ as widgets that may produce __messages__ on user interaction
+* __Update logic__ — a way to react to __messages__ and update your __state__
+
+We can build something to see how this works! Let's say we want a simple counter that can be incremented and decremented using two buttons.
+
+We start by modelling the __state__ of our application:
+
+```rust
+#[derive(Default)]
+struct Counter {
+    value: i32,
+}
+```
+
+Next, we need to define the possible user interactions of our counter: the button presses. These interactions are our __messages__:
+
+```rust
+#[derive(Debug, Clone, Copy)]
+pub enum Message {
+    Increment,
+    Decrement,
+}
+```
+
+Now, let's show the actual counter by putting it all together in our __view logic__:
+
+```rust
+use iced::widget::{button, column, text, Column};
+
+impl Counter {
+    pub fn view(&self) -> Column<Message> {
+        // We use a column: a simple vertical layout
+        column![
+            // The increment button. We tell it to produce an
+            // `Increment` message when pressed
+            button("+").on_press(Message::Increment),
+
+            // We show the value of the counter here
+            text(self.value).size(50),
+
+            // The decrement button. We tell it to produce a
+            // `Decrement` message when pressed
+            button("-").on_press(Message::Decrement),
+        ]
+    }
+}
+```
+
+Finally, we need to be able to react to any produced __messages__ and change our __state__ accordingly in our __update logic__:
+
+```rust
+impl Counter {
+    // ...
+
+    pub fn update(&mut self, message: Message) {
+        match message {
+            Message::Increment => {
+                self.value += 1;
+            }
+            Message::Decrement => {
+                self.value -= 1;
+            }
+        }
+    }
+}
+```
+
+And that's everything! We just wrote a whole user interface. Let's run it:
+
+```rust
+fn main() -> iced::Result {
+    iced::run("A cool counter", Counter::update, Counter::view)
+}
+```
+
+Iced will automatically:
+
+  1. Take the result of our __view logic__ and layout its widgets.
+  1. Process events from our system and produce __messages__ for our __update logic__.
+  1. Draw the resulting user interface.
+
+Read the [book], the [documentation], and the [examples] to learn more!
+
+[book]: https://book.iced.rs/
+[documentation]: https://docs.rs/iced/
+[examples]: https://github.com/iced-rs/iced/tree/master/examples#examples
+[The Elm Architecture]: https://guide.elm-lang.org/architecture/
diff --git a/examples/markdown/src/main.rs b/examples/markdown/src/main.rs
new file mode 100644
index 00000000..5605478f
--- /dev/null
+++ b/examples/markdown/src/main.rs
@@ -0,0 +1,82 @@
+use iced::highlighter;
+use iced::widget::{self, markdown, row, scrollable, text_editor};
+use iced::{Element, Fill, Font, Task, Theme};
+
+pub fn main() -> iced::Result {
+    iced::application("Markdown - Iced", Markdown::update, Markdown::view)
+        .theme(Markdown::theme)
+        .run_with(Markdown::new)
+}
+
+struct Markdown {
+    content: text_editor::Content,
+    items: Vec<markdown::Item>,
+    theme: Theme,
+}
+
+#[derive(Debug, Clone)]
+enum Message {
+    Edit(text_editor::Action),
+    LinkClicked(markdown::Url),
+}
+
+impl Markdown {
+    fn new() -> (Self, Task<Message>) {
+        const INITIAL_CONTENT: &str = include_str!("../overview.md");
+
+        let theme = Theme::TokyoNight;
+
+        (
+            Self {
+                content: text_editor::Content::with_text(INITIAL_CONTENT),
+                items: markdown::parse(INITIAL_CONTENT).collect(),
+                theme,
+            },
+            widget::focus_next(),
+        )
+    }
+
+    fn update(&mut self, message: Message) {
+        match message {
+            Message::Edit(action) => {
+                let is_edit = action.is_edit();
+
+                self.content.perform(action);
+
+                if is_edit {
+                    self.items =
+                        markdown::parse(&self.content.text()).collect();
+                }
+            }
+            Message::LinkClicked(link) => {
+                let _ = open::that_in_background(link.to_string());
+            }
+        }
+    }
+
+    fn view(&self) -> Element<Message> {
+        let editor = text_editor(&self.content)
+            .placeholder("Type your Markdown here...")
+            .on_action(Message::Edit)
+            .height(Fill)
+            .padding(10)
+            .font(Font::MONOSPACE)
+            .highlight("markdown", highlighter::Theme::Base16Ocean);
+
+        let preview = markdown(
+            &self.items,
+            markdown::Settings::default(),
+            markdown::Style::from_palette(self.theme.palette()),
+        )
+        .map(Message::LinkClicked);
+
+        row![editor, scrollable(preview).spacing(10).height(Fill)]
+            .spacing(10)
+            .padding(10)
+            .into()
+    }
+
+    fn theme(&self) -> Theme {
+        self.theme.clone()
+    }
+}