Skip to main content
Version: 0.18.0

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.

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 functions or closures to optimize for readability:

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>}