Literals and Expressions

Literals

If expressions resolve to types that implement Display, they will be converted to strings and inserted into the DOM as a Text node.

All display text must be enclosed by {} blocks because the html! macro parses text as a Rust expression. This is the greatest deviation from the HTML specification that the html! macro makes.

use yew::html;

let text = "lorem ipsum";
html!{
    <>
        <div>{text}</div>
        <div>{"dolor sit"}</div>
        <span>{42}</span>
    </>
}

Expressions

You can insert expressions in your HTML using {} blocks, as long as they resolve to Html

use yew::html;

html! {
  <div>
    {
      if show_link {
        html! {
          <a href="https://example.com">{"Link"}</a>
        }
      } else {
        html! {}
      }
    }
  </div>
}

It often makes sense to extract these expressions into separate functions or closures to make your code more readable. This can also help to reduce code duplication by moving common elements of your UI into composable functions.

use yew::{html, Html};

let show_link = true;
let maybe_display_link = move || -> Html {
  if show_link {
    html! {
      <a href="https://example.com">{"Link"}</a>
    }
  } else {
    html! {}
  }
};

html! {
     <div>{maybe_display_link()}</div>
}