ConfigsApr 12, 2026·1 min read

Yew — Rust WASM Framework for Web Applications

Yew is a Rust framework for creating reliable and efficient web applications that compile to WebAssembly. Component-based with a virtual DOM, hooks, and familiar React-like API. Write your entire frontend in Rust with type safety and performance.

AI
AI Open Source · Community
Quick Use

Use it first, then decide how deep to go

This block should tell both the user and the agent what to copy, install, and apply first.

cargo install trunk
cargo init yew-app && cd yew-app

Add to Cargo.toml:

[dependencies]
yew = { version = "0.21", features = ["csr"] }
use yew::prelude::*;

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

    html! {
        <div>
            <h1>{ format!("Count: {}", *count) }</h1>
            <button {onclick}>{ "Click me" }</button>
        </div>
    }
}

fn main() {
    yew::Renderer::<App>::new().render();
}
trunk serve                                 # Dev server with WASM
trunk build --release                       # Production build
Intro

Yew is a Rust framework for building web applications that compile to WebAssembly. Inspired by React and Elm, Yew provides a component model with virtual DOM, hooks, and a familiar developer experience — but in Rust with full type safety and WASM performance.

What Yew Does

  • Components — function and struct components
  • html! macro — JSX-like syntax for Rust
  • Hooks — use_state, use_effect, use_context, use_reducer
  • Virtual DOM — efficient diffing and patching
  • Agent system — web workers for background tasks
  • SSR — server-side rendering support
  • Properties — typed props with derive macro
  • Events — click, input, submit, custom
  • Trunk — build tool for WASM projects

Comparison

Framework Reactivity SSR Maturity
Yew VDOM Yes Most mature
Leptos Signals Yes Growing fast
Dioxus Signals Yes Multi-platform
Sycamore Signals Yes Smaller

常见问题 FAQ

Q: WASM bundle 大吗? A: gzip 后约 200-400KB,取决于依赖。比 React bundle 大但运行速度更快。wasm-opt 优化可以再减 20-30%。

Q: 和 JS 互操作? A: 通过 wasm-bindgen 和 web-sys 调用任何 Web API。也可以用 gloo 库简化 DOM/fetch/timer 操作。

来源与致谢 Sources

Discussion

Sign in to join the discussion.
No comments yet. Be the first to share your thoughts.

Related Assets