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

• wasm32-unknown-unknown

Important Notes

• Yew is not (yet) production ready but is great for side projects and internal tools

Example

use yew::prelude::*;

enum Msg {
    AddOne,
}

struct Model {
    value: i64,
}

impl Component for Model {
    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::start_app::<Model>();
}

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.

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

AppHandle

An instance of an application.

Functions

set_custom_panic_hook

Set a custom panic hook. Unless a panic hook is set through this function, Yew will overwrite any existing panic hook when one of the start_app* functions are called.

start_app

Starts an yew app mounted to the body of the document. Alias to start_app_in_element(Body)

start_app_as_body

The main entry point of a Yew application. Alternative to start_app which replaces the body element with a component which has a body element at the root of the HTML generated by its view method. Use this method when you need to manipulate the body element. For example, adding/removing app-wide CSS classes of the body element.

start_app_in_element

The main entry point of a Yew application. If you would like to pass props, use the start_app_with_props_in_element method.

start_app_with_props

The main entry point of a Yew application. This function does the same as start_app(...) but allows to start an Yew application with properties.

start_app_with_props_as_body

The main entry point of a Yew application. Alternative to start_app_with_props which replaces the body element with a component which has a body element at the root of the HTML generated by its view method. Use this method when you need to manipulate the body element. For example, adding/removing app-wide CSS classes of the body element.

start_app_with_props_in_element

The main entry point of a Yew application. This function does the same as start_app_in_element(...) but allows to start an Yew application with properties.