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 text is handled as an expression. This is the largest deviation from normal HTML syntax that Yew makes.

  1. let text = "lorem ipsum";
  2. html!{
  3.     <>
  4.         <div>{text}</div>
  5.         <div>{"dolor sit"}</div>
  6.         <span>{42}</span>
  7.     </>
  8. }

Expressions

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

  1. html! {
  2.   <div>
  3.     {
  4.       if show_link {
  5.         html! {
  6.           <a href="https://example.com">{"Link"}</a>
  7.         }
  8.       } else {
  9.         html! {}
  10.       }
  11.     }
  12.   </div>
  13. }

It often makes sense to extract these expressions into functions or closures to optimize for readability:

  1. let show_link = true;
  2. let maybe_display_link = move || -> Html {
  3.   if show_link {
  4.     html! {
  5.       <a href="https://example.com">{"Link"}</a>
  6.     }
  7.   } else {
  8.     html! {}
  9.   }
  10. };
  12. html! {
  13.      <div>{maybe_display_link()}</div>
  14. }