Learn Yew - 9 Code Examples & CST Typing Practice Test

Yew is a modern Rust framework for building client-side web applications using WebAssembly (Wasm), providing a reactive component-based architecture similar to React.

View all 9 Yew code examples →

Simple Yew Component Yew Component with Button Click Yew Component with Input Binding Yew Component with Conditional Rendering Yew Component with Loop Yew Component with Child Component Yew Component with Timer Yew Component with Form Yew Component with Conditional and Loop Combined

Learn YEW with Real Code Examples

Updated Nov 25, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple Yew Component

# 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.

Let’s Try →

Yew Component with Button Click

# 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.

Let’s Try →

Yew Component with Input Binding

# 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.

Let’s Try →

Yew Component with Conditional Rendering

# 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.

Let’s Try →

Yew Component with Loop

# 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.

Let’s Try →

Yew Component with Child Component

# 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.

Let’s Try →

Yew Component with Timer

# 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.

Let’s Try →

Yew Component with Form

# 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.

Let’s Try →

Yew Component with Conditional and Loop Combined

# 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.

Let’s Try →

Frequently Asked Questions about Yew

What is Yew?

Yew is a modern Rust framework for building client-side web applications using WebAssembly (Wasm), providing a reactive component-based architecture similar to React.

What are the primary use cases for Yew?

Single-page applications (SPA) in Rust. Interactive dashboards and data visualization. WebAssembly-based web games. Frontend for Rust backend services. High-performance, low-latency web UIs

What are the strengths of Yew?

Memory safety guaranteed by Rust compiler. High-performance UI rendering via WebAssembly. Strong type checking and compile-time guarantees. Reactive programming model similar to React. Can interoperate with existing JS libraries via wasm-bindgen

What are the limitations of Yew?

Compile times can be long for large projects. WebAssembly startup overhead may impact first-load time. Smaller ecosystem compared to JavaScript frameworks. Browser debugging is more complex than JS frameworks. Limited third-party component libraries compared to JS

How can I practice Yew typing speed?

CodeSpeedTest offers 9+ real Yew code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Simple Yew Component

# 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.

Let’s Try →

Yew Component with Button Click

# 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.

Let’s Try →

Yew Component with Input Binding

# 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.

Let’s Try →

Yew Component with Conditional Rendering

# 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.

Let’s Try →

Yew Component with Loop

# 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.

Let’s Try →

Yew Component with Child Component

# 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.

Let’s Try →

Yew Component with Timer

# 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.

Let’s Try →

Yew Component with Form

# 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.

Let’s Try →

Yew Component with Conditional and Loop Combined

# 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.

Let’s Try →

Frequently Asked Questions about Yew

What is Yew?

Yew is a modern Rust framework for building client-side web applications using WebAssembly (Wasm), providing a reactive component-based architecture similar to React.

What are the primary use cases for Yew?

Single-page applications (SPA) in Rust. Interactive dashboards and data visualization. WebAssembly-based web games. Frontend for Rust backend services. High-performance, low-latency web UIs

What are the strengths of Yew?

What are the limitations of Yew?

How can I practice Yew typing speed?

CodeSpeedTest offers 9+ real Yew code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.