Crate yew

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

Note

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.
• tokio: Enables future-based APIs on non-wasm32 targets with tokio runtime. (You may want to enable this if your application uses future-based APIs and it does not compile / lint on non-wasm32 targets.)
• hydration: Enables Hydration support.

Example

use yew::prelude::*;

enum Msg {
    AddOne,
}

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;
                true
            }
        }
    }

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

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

Re-exports

pub use self::prelude::*;

Modules

callback

This module contains data types for interacting with Scopes.

context

This module defines the ContextProvider component.

events

The module that contains all events available in the framework.

functional

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.

html

The main html module which defines components, listeners, and class helpers.

macros

This module contains macros which implements html! macro and JSX-like templates

prelude

The Yew Prelude

scheduler

This module contains a scheduler.

suspense

This module provides suspense support.

utils

This module contains useful utilities to get information about the current document.

virtual_dom

This module contains Yew’s implementation of a reactive virtual DOM.

Macros

classes

This macro provides a convenient way to create Classes.

html

This macro implements JSX-like templates.

html_nested

This macro is similar to html!, but preserves the component type instead of wrapping it in Html.

props

Build Properties outside of the html! macro.

Structs

AppHandlecsr

An instance of an application.

Renderercsr

The Yew Renderer.

ServerRendererssr

A Yew Server-side Renderer.

Functions

set_custom_panic_hookcsr

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.