All the HTML

Let's look at some more ways to build HTML structures with Async UI.

Empty <div>

The previous subchapter ended with a note that <div>s can have children, but <input>s cannot.

Still, it is perfectly fine to have <div> without children.

<div></div>

The code to do that would be

#![allow(unused)]
fn main() {
use async_ui_web::NoChild; // 👈 new import!

async fn just_div() {
    let div = Div::new();

    div.render(NoChild).await;
}
}

Here, NoChild is a unit struct that implements Future. It puts nothing on the screen, and it never finishes (just like input.render()).

Text

We can also render HTML Text Nodes.

There is a trait that implements .render() on &str.

#![allow(unused)]
fn main() {
use async_ui_web::shortcut_traits::ShortcutRenderStr; // 👈 new import!

async fn hello_world() {
    "Hello World".render().await;
}
}

The trait implementation is based on the Text component. You can use that manually too (the next chapter will touch more on this).

Other Elements

Div, Input, and Text Node are only three components in Async UI's suite of HTML components. You can see the full list here.

All of them have the same form: a struct that can be constructed by Type::new() and can be rendered with the async render() method.

Quiz

How would you make a component that renders the following HTML?

<div>
	<button>Hello World</button>
</div>

If you haven't been running examples along the guide so far, now is the time 😤😤😤. Write out your answer to the quiz. Run it in your browser to check.

#![allow(unused)]
fn main() {
use async_ui_web::html::Button;

async fn quiz() {
    Div::new()
        .render(Button::new().render("Hello World".render()))
        .await;
}
}