Learn YEW with Real Code Examples

# yew/demo/main.rs
use yew::prelude::*;

struct Model;

impl Component for Model {
    type Message = ();
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Model
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
        <h1>{"Hello, Yew!"}</h1>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

A basic Yew component displaying 'Hello, Yew!' in the browser.

# yew/demo/button.rs
use yew::prelude::*;

struct Model {
    message: String,
}

enum Msg {
    Click,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Model { message: "Click the button!".into() }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
        Msg::Click => {
        self.message = "Button clicked!".into();
        true
        }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
        <div>
        <p>{ &self.message }</p>
        <button onclick={ctx.link().callback(|_| Msg::Click)}>{"Click Me"}</button>
        </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

A component that updates a message when a button is clicked.

# yew/demo/input.rs
use yew::prelude::*;

struct Model {
    name: String,
}

enum Msg {
    Update(String),
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Model { name: "".into() }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
        Msg::Update(val) => {
        self.name = val;
        true
        }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
        <div>
        <input value={self.name.clone()} oninput={ctx.link().callback(|e: InputEvent| Msg::Update(e.data().unwrap_or_default()))} />
        <p>{ format!("Hello, {}!", self.name) }</p>
        </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

A component that binds input text to state.

# yew/demo/conditional.rs
use yew::prelude::*;

struct Model {
    is_logged_in: bool,
}

enum Msg {
    Toggle,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Model { is_logged_in: false }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
        Msg::Toggle => {
        self.is_logged_in = !self.is_logged_in;
        true
        }
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
        <div>
        { if self.is_logged_in { html!{<p>{"Welcome back!"}</p>} } else { html!{<p>{"Please log in."}</p>} } }
        <button onclick={ctx.link().callback(|_| Msg::Toggle)}>{"Toggle"}</button>
        </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

Shows different content based on a boolean state.

# yew/demo/loop.rs
use yew::prelude::*;

struct Model {
    items: Vec<String>,
}

impl Component for Model {
    type Message = ();
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Model { items: vec!["Item 1".into(), "Item 2".into(), "Item 3".into()] }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
        <ul>
        { for self.items.iter().map(|item| html!{<li>{ item }</li>}) }
        </ul>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

Displays a list of items using a loop.

# yew/demo/child.rs
use yew::prelude::*;

#[derive(Properties, PartialEq)]
struct ChildProps {
    text: String,
}

#[function_component(ChildComponent)]
fn child(props: &ChildProps) -> Html {
    html! { <p>{ &props.text }</p> }
}

#[function_component(ParentComponent)]
fn parent() -> Html {
    html! { <ChildComponent text="Hello from Child" /> }
}

fn main() {
    yew::start_app::<ParentComponent>();
}

Demonstrates parent and child components.

# yew/demo/timer.rs
use yew::prelude::*;
use gloo_timers::callback::Interval;

struct Model {
    current_time: String,
}

impl Component for Model {
    type Message = (); 
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        let model = Model { current_time: "".into() };
        let link = ctx.link().clone();
        Interval::new(1000, move || link.send_message(())).forget();
        model
    }

    fn update(&mut self, ctx: &Context<Self>, _msg: Self::Message) -> bool {
        self.current_time = js_sys::Date::new_0().to_locale_time_string("en-US");
        true
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! { <p>{ &self.current_time }</p> }
    }
}

fn main() {
    yew::start_app::<Model>();
}

Updates state every second using IntervalService.

# yew/demo/form.rs
use yew::prelude::*;

struct Model {
    name: String,
    message: String,
}

enum Msg {
    Update(String),
    Submit,
}

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Model { name: "".into(), message: "".into() }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
        Msg::Update(val) => { self.name = val; true },
        Msg::Submit => { self.message = format!("Hello, {}!", self.name); true },
        }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
        <div>
        <input value={self.name.clone()} oninput={ctx.link().callback(|e: InputEvent| Msg::Update(e.data().unwrap_or_default()))} />
        <button onclick={ctx.link().callback(|_| Msg::Submit)}>{"Submit"}</button>
        <p>{ &self.message }</p>
        </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

Simple form input handling in Yew.

# yew/demo/conditional_loop.rs
use yew::prelude::*;

struct Model {
    show_first: bool,
}

enum Msg { Toggle, }

impl Component for Model {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Model { show_first: true }
    }

    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg { Msg::Toggle => { self.show_first = !self.show_first; true } }
    }

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
        <div>
        { if self.show_first {
        html!{ for vec!["A", "B", "C"].iter().map(|i| html!{<p>{ i }</p>}) }
        } else {
        html!{ for vec!["X", "Y", "Z"].iter().map(|i| html!{<p>{ i }</p>}) }
        } }
        <button onclick={ctx.link().callback(|_| Msg::Toggle)}>{"Toggle"}</button>
        </div>
        }
    }
}

fn main() {
    yew::start_app::<Model>();
}

Displays different lists based on a toggle.