Yew — Rust WASM Framework for Web Applications

What it is

Yew is a Rust framework for creating reliable and efficient web applications that compile to WebAssembly. It provides a component-based architecture with a virtual DOM, hooks (use_state, use_effect, use_context), properties for data passing, and an event system. Yew's API is inspired by React, making it accessible to developers familiar with modern frontend patterns.

Yew targets Rust developers who want to build frontend web applications with the same language they use for backends, CLI tools, and systems programming. It suits single-page applications, interactive dashboards, and web-based tools where Rust's performance and type safety are advantages.

How it saves time or tokens

Yew's component model and hooks eliminate the need for JavaScript for interactive web UIs. Rust's type system catches errors at compile time that JavaScript would only reveal at runtime. The virtual DOM efficiently updates only changed parts of the UI. Trunk (the recommended build tool) handles WASM compilation, asset bundling, and development server with hot reload.

For AI-assisted development, Yew's React-like patterns (components, props, hooks) are familiar to LLMs, making code generation productive.

How to use

1. Install Trunk: cargo install trunk and add the WASM target: rustup target add wasm32-unknown-unknown.
2. Create a project with Cargo, add yew as a dependency.
3. Build and serve: trunk serve for development.

Example

use yew::prelude::*;

#[function_component(App)]
fn app() -> Html {
    let counter = use_state(|| 0);
    let onclick = {
        let counter = counter.clone();
        Callback::from(move |_| counter.set(*counter + 1))
    };

    html! {
        <div>
            <h1>{ "Counter" }</h1>
            <p>{ format!("Count: {}", *counter) }</p>
            <button {onclick}>{ "Increment" }</button>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}

Related on TokRepo

• AI coding tools -- Rust and web development frameworks
• Featured workflows -- discover top curated assets on TokRepo

Common pitfalls

• Expecting npm package compatibility. Yew runs in WASM, not Node.js. JavaScript interop requires wasm-bindgen and web-sys crates, not npm packages.
• Large WASM binary sizes. Use wasm-opt and enable LTO in release builds to reduce binary size. Initial download is larger than equivalent JavaScript.
• Thinking Yew replaces all JavaScript. DOM APIs not exposed by web-sys may require JavaScript glue code. CSS frameworks and existing JS libraries need wasm-bindgen interop.