This is unreleased documentation for Yew Next version.

For up-to-date documentation, see the latest version on docs.rs.

logo

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

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

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

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.

Macros

This macro provides a convenient way to create Classes.

This macro implements JSX-like templates.

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

Build Properties outside of the html! macro.

Structs

An instance of an application.

The Yew Renderer.

A Yew Server-side Renderer.

Functions

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.