Adding `html_node` library as a dependency

Run this command in a terminal, in your project's directory:

cargo add html-node

To add it manually, edit your project's Cargo.toml file and add to the [dependencies] section:

html-node = "0.5.0"

The html_node library will be automatically available globally. Read the html_node library documentation.

Back to the crate overview.

Readme

`html-node`

HTML nodes in Rust. [powered by rstml].

Features

Text escaping
Pretty-printing
Customizable compile-time type-checked elements and attributes (docs)
- completely optional, and can be mixed with untyped elements when needed!

Projects Using `html-node`

vidhan.io
- html-node used alongside axum and tree-sitter for a personal site.

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",
                                                                                },
                                                                            ),
                                                                        ],
                                                                    ),
                                                                },
                                                            ),
                                                        ],
                                                    ),
                                                },
                                            ),
                                        ],
                                    },
                                ),
                            ],
                        ),
                    },
                ),
            ],
        ),
    },
)

Adding html_node library as a dependency

Adding `html_node` library as a dependency