Skip to main content
Version: Next

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.

use yew::prelude::*;

let my_header: Html = html! {
<img src="img_girl.jpg" alt="Girl in a jacket" width="500" height="600" />
};

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

use yew::prelude::*;

let header_text = "Hello world".to_string();
let header_html: Html = html! {
<h1>{header_text}</h1>
};

let count: usize = 5;
let counter_html: Html = html! {
<p>{"My age is: "}{count}</p>
};

let combined_html: Html = html! {
<div>{header_html}{counter_html}</div>
};

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.

use yew::html;

// error: only one root HTML element allowed
html! {

<div></div>
<p></p>

};

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