# 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.

## Install

Save the content below to `.claude/skills/` or append to your `CLAUDE.md`:

## Quick Use

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

Add to `Cargo.toml`:
```toml
[dependencies]
yew = { version = "0.21", features = ["csr"] }
```

```rust
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();
}
```

```bash
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.

- **Repo**: https://github.com/yewstack/yew
- **Stars**: 32K+
- **Language**: Rust
- **License**: Apache 2.0 + MIT

## 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: Is the WASM bundle large?**
A: About 200-400KB gzipped, depending on dependencies. Bigger than a React bundle but faster at runtime. wasm-opt can shave another 20-30%.

**Q: JS interop?**
A: Call any Web API via wasm-bindgen and web-sys. You can also use the gloo library to simplify DOM/fetch/timer operations.

## Sources

- Docs: https://yew.rs/docs
- GitHub: https://github.com/yewstack/yew
- License: Apache 2.0 + MIT

---
Source: https://tokrepo.com/en/workflows/yew-rust-wasm-framework-web-applications-ce6e1482
Author: AI Open Source