html-node
A HTML to node macro powered by rstml.
Features
- Text escaping
- Pretty-printing
- NEW: type-safe elements and attributes! (example)
Example
let shopping_list = vec!["milk", "eggs", "bread"];
let shopping_list_html = html! {
<div>
<h1>Shopping List</h1>
<ul>
{ shopping_list.into_iter().zip(1..).map(|(item, i)| html! {
<li class="item">
<input type="checkbox" id={format!("item-{i}")}>
<label for={format!("item-{i}")}>{text!("{item}")}</label>
</li>
}) }
</ul>
</div>
};
HTML Output
// the `#` flag enables pretty-printing
println!("{shopping_list_html:#}");
<div>
<h1>
Shopping List
</h1>
<ul>
<li class="item">
<input type="checkbox" id="item-1">
<label for="item-1">
milk
</label>
</li>
<li class="item">
<input type="checkbox" id="item-2">
<label for="item-2">
eggs
</label>
</li>
<li class="item">
<input type="checkbox" id="item-3">
<label for="item-3">
bread
</label>
</li>
</ul>
</div>
Rust Output
println!("{shopping_list_html:#?}");
Element(
Element {
name: "div",
attributes: [],
children: Some(
[
Element(
Element {
name: "h1",
attributes: [],
children: Some(
[
Text(
Text {
text: "Shopping List",
},
),
],
),
},
),
Element(
Element {
name: "ul",
attributes: [],
children: Some(
[
Fragment(
Fragment {
children: [
Element(
Element {
name: "li",
attributes: [
(
"class",
Some(
"item",
),
),
],
children: Some(
[
Element(
Element {
name: "input",
attributes: [
(
"type",
Some(
"checkbox",
),
),
(
"id",
Some(
"item-1",
),
),
],
children: None,
},
),
Element(
Element {
name: "label",
attributes: [
(
"for",
Some(
"item-1",
),
),
],
children: Some(
[
Text(
Text {
text: "milk",
},
),
],
),
},
),
],
),
},
),
Element(
Element {
name: "li",
attributes: [
(
"class",
Some(
"item",
),
),
],
children: Some(
[
Element(
Element {
name: "input",
attributes: [
(
"type",
Some(
"checkbox",
),
),
(
"id",
Some(
"item-2",
),
),
],
children: None,
},
),
Element(
Element {
name: "label",
attributes: [
(
"for",
Some(
"item-2",
),
),
],
children: Some(
[
Text(
Text {
text: "eggs",
},
),
],
),
},
),
],
),
},
),
Element(
Element {
name: "li",
attributes: [
(
"class",
Some(
"item",
),
),
],
children: Some(
[
Element(
Element {
name: "input",
attributes: [
(
"type",
Some(
"checkbox",
),
),
(
"id",
Some(
"item-3",
),
),
],
children: None,
},
),
Element(
Element {
name: "label",
attributes: [
(
"for",
Some(
"item-3",
),
),
],
children: Some(
[
Text(
Text {
text: "bread",
},
),
],
),
},
),
],
),
},
),
],
},
),
],
),
},
),
],
),
},
)
12 Feb 19, 2023
15 Apr 9, 2023
5 May 24, 2023
13 Jun 26, 2023
17 Nov 15, 2023
3 Feb 26, 2024
4 Feb 16, 2024
5k Jan 9, 2023
3 Dec 2, 2022
429 Apr 15, 2023
211 Dec 20, 2022
63.8k Jan 7, 2023
301 Jan 4, 2023
22k Jan 3, 2023
1 Apr 6, 2022
4 Nov 4, 2022
7 Dec 16, 2022
2 Nov 7, 2022
3 Jan 15, 2023