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