Yew Tours

Let me introduce you to my latest project: Yew Tours

Designed to enhance user onboarding experiences, Yew Tours is a library for creating interactive tours in applications built with the Yew framework.

Why Yew Tours?

When developing web applications, particularly those rich in features, it’s essential to ensure users can navigate and understand the interface effortlessly. Yew Tours simplifies this process by offering a guided, step-by-step introduction to your application’s features.


  • Step-by-Step Guidance: Highlight key elements and provide detailed instructions for each step.
  • Easy Integration: Seamlessly integrate with your existing Yew application.
  • Markdown Support: Use markdown to format your tour content.

Getting Started

Add Yew Tours to your Cargo.toml:

yew = { version = "0.21.0", features = ["csr"] }
yew-tou-rs = { git = "" }

Here’s a quick example of how to set up a tour:

use yew::prelude::*;
use yew_tou_rs::prelude::{Tour, TourStep};

pub fn app() -> Html {
    let steps = vec![
        TourStep {
            selector: ".h1-step".to_string(),
            content: "This is a title".to_string(),
        TourStep {
            selector: ".p-step".to_string(),
            content: "This is a paragraph".to_string(),
        TourStep {
            selector: ".button-step".to_string(),
            content: "This is a button".to_string(),
        TourStep {
            selector: "footer".to_string(),
            content: "This is a footer".to_string(),

    html! {
        <div class="app">
            <h1 class="h1-step">{"Hello, Yew Tou-rs"}</h1>
            <p class="p-step">{"This is a simple example of a Yew Tou-rs."}</p>
            <button class="button-step">{"Click me"}</button>
            <footer class="footer-step">
                <a href="">{"yew-tou-rs"}</a>
            <Tour steps={steps} />

fn main() {

Live Demo

Want to see Yew Tours in action? Check out the live demo.


Documentation is available here. You’ll find detailed information on how to customize your tours.


Yew Tours aims to make it easier for you to create engaging onboarding experiences for your users. Your feedback is invaluable, so please try it out and let me know what you think.

Written on June 26, 2024