HTML with html!

You can write expressions resembling HTML with the html! macro. Behind the scenes Yew turns it into rust code representing the DOM to generate.

  1. use yew::prelude::*;
  3. let my_header: Html = html! {
  4.     <img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
  5. };

Similar to format expressions, there is an easy way to embed values from the surrounding context into the html by applying curly brackets:

  1. use yew::prelude::*;
  3. let header_text = "Hello world".to_string();
  4. let header_html: Html = html! {
  5.     <h1>{header_text}</h1>
  6. };
  8. let count: usize = 5;
  9. let counter_html: Html = html! {
  10.     <p>{"My age is: "}{count}</p>
  11. };
  13. let combined_html: Html = html! {
  14.     <div>{header_html}{counter_html}</div>
  15. };

One major rule comes with the use of html! - you can only return 1 wrapping node. To render a list of multiple elements, html! allows fragments. Fragments are tags without a name, that produce no html element by themselves.

  • Invalid
  • Valid
  1. use yew::html;
  3. // error: only one root html element allowed
  4. html! {
  6.     <div></div>
  7.     <p></p>
  9. };
  1. use yew::html;
  3. // fixed: using html fragments
  4. html! {
  5.     <>
  6.         <div></div>
  7.         <p></p>
  8.     </>
  9. };

We will introduce Yew and HTML further in depth in more HTML.