TheTopcoatFramework

A $(...) expression is ordinary, type-checked Rust. Topcoat runs it on the server for the first render and translates it to JavaScript, so it re-runs instantly in the browser.

#[component]
async fn faq(cx: &Cx) -> Result<impl View> {
    let open = signal(cx, || false);

    Ok(view! {
        // Runs entirely in the browser; no server round-trip.
        <button @click=$(|_e| open.set(!open.get()))>"What is Topcoat?"</button>
        <p :hidden=$(!open.get())>"A full-stack Rust framework."</p>
    })
}

When an update needs the server, mark the component as a shard. Topcoat re-renders it on the server whenever one of its $(...) arguments changes, and swaps the new HTML in place.

#[component]
async fn search(cx: &Cx) -> Result<impl View> {
    let query = signal(cx, String::new);

    Ok(view! {
        <input @input=$(|e: Event| query.set(e.target.value))>

        // Updates as the user types.
        search_results(query: $(query.get()))
    })
}

#[shard]
async fn search_results(cx: &Cx, query: String) -> Result<impl View> {
    Ok(view! {
        <ul>
            for product in search_products(cx, &query).await? {
                <li>(product.name)</li>
            }
        </ul>
    })
}

The view! macro stays true to HTML and to Rust. Loops, conditions, and matches work right inside the markup, and topcoat fmt keeps it tidy.

view! {
    <nav>
        for item in nav_items {
            <a
                href=(item.url)
                if item.url == current_path {
                    aria-current="page"
                    class="active"
                }
            >
                (item.label)
            </a>
        }
    </nav>
}

Topcoat can work out your routes from your module tree, with no build step. Modules starting with an underscore add a layout without adding to the URL.

src/
|-- app.rs              -> /            (and the root <html> layout)
`-- app/
    |-- about.rs        -> /about
    |-- _marketing.rs                  (layout, no URL segment)
    |-- _marketing/
    |   `-- pricing.rs  -> /pricing
    |-- posts.rs        -> /posts
    |-- posts/
    |   `-- id.rs       -> /posts/{post_id}
    `-- api/
        `-- health.rs   -> GET /api/health

The bundler finds every asset! call in your compiled app, copies (or downloads) the files, and serves them with content-hashed names so browsers can cache them for good.

const FERRIS: Asset = asset!("./ferris.png");

view! { <img src=(FERRIS)> }