This is unreleased documentation for Yew Next version.
For up-to-date documentation, see the latest version on

Crate yew

source ·
Expand description

§Yew Framework - API Documentation

Yew is a modern Rust framework for creating multi-threaded front-end web apps using WebAssembly

  • Features a macro for declaring interactive HTML with Rust expressions. Developers who have experience using JSX in React should feel quite at home when using Yew.
  • Achieves high performance by minimizing DOM API calls for each page render and by making it easy to offload processing to background web workers.
  • Supports JavaScript interoperability, allowing developers to leverage NPM packages and integrate with existing JavaScript applications.

§Supported Targets (Client-Side Rendering)

  • wasm32-unknown-unknown


Server-Side Rendering should work on all targets when feature ssr is enabled.

§Supported Features:

  • csr: Enables Client-side Rendering support and Renderer. Only enable this feature if you are making a Yew application (not a library).
  • ssr: Enables Server-side Rendering support and ServerRenderer.
  • hydration: Enables Hydration support.


use yew::prelude::*;

enum Msg {

struct App {
    value: i64,

impl Component for App {
    type Message = Msg;
    type Properties = ();

    fn create(ctx: &Context<Self>) -> Self {
        Self { value: 0 }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::AddOne => {
                self.value += 1;

    fn view(&self, ctx: &Context<Self>) -> Html {
        html! {
                <button onclick={|_| Msg::AddOne)}>{ "+1" }</button>
                <p>{ self.value }</p>

fn main() {



  • This module contains data types for interacting with Scopes.
  • This module defines the ContextProvider component.
  • The module that contains all events available in the framework.
  • Function components are a simplified version of normal components. They consist of a single function annotated with the attribute #[function_component] that receives props and determines what should be rendered by returning Html.
  • The main html module which defines components, listeners, and class helpers.
  • This module contains macros which implements html! macro and JSX-like templates
  • Yew’s compatibility between JavaScript Runtime and Native Runtimes.
  • The Yew Prelude
  • This module contains a scheduler.
  • This module provides suspense support.
  • This module contains useful utilities to get information about the current document.
  • This module contains Yew’s implementation of a reactive virtual DOM.




  • Set a custom panic hook. Unless a panic hook is set through this function, Yew will overwrite any existing panic hook when an application is rendered with Renderer.