| description | The procedural macro for generating HTML and SVG |
|---|
Using html!
The [html!][1] macro allows you to write HTML and SVG code declaratively. It is similar to JSX (a Javascript extension which allows you to write HTML code inside of Javascript).
Important notes
- The
html!macro only accepts one root HTML node (you can overcome this by using fragments or iterators) - An empty
html! {}invocation is valid and will not render anything. - Literals inside of tags must always be quoted and wrapped with braces (this is different to attribute values - see below)
html! { "Hello, World" }html! { <div>{ "Hell, World" }</div> }html! { <div>{ String::from("foo") + "bar" }</div>
- Quoted attribute values are taken literally. The value is set at compile-time and does not change at run-time.
html! { <div> id="bar"</div> }
- Unquoted attribute values are interpreted as expressions and therefore have to be valid Rust expressions.
let foo = "bar"; html! { <div id=foo></div> }html! { <div id=String::from("foo") + "bar"></div> }
- HTML tags names need to start with a lowercase letter. Besides that every valid HTML tag name is allowed. If the tag name starts with an uppercase letter it is interpreted as component name and attributes are passed as component properties.
{% hint style="info" %}
The html! macro can reach easily the default recursion limit of the compiler. It is advised to bump its value if you encouter compilation errors. Use an attribute like #![recursion_limit="1024"] to bypass the problem. See the official documentation and this Stack Overflow question for details.
{% endhint %}
{% page-ref page="lists.md" %}
{% page-ref page="elements.md" %}
{% page-ref page="literals-and-expressions.md" %}
{% page-ref page="components.md" %}