yew 0.1.0

A framework for making client-side single-page apps


Yew is a modern Rust framework inspired by Elm and ReactJS.

Cutting Edge technologies

Rust to WASM compilation

This framework designed to be compiled into modern browsers' runtimes: wasm, asm.js, emscripten.

Clean MVC approach inspired by Elm

struct Model { }

enum Msg {

fn update(_: &mut Context<Msg>, model: &mut Model, msg: Msg) {
    match msg {
        Msg::DoIt => {
            // Update your model on events

fn view(model: &Model) -> Html<Msg> {
    html! {
        // Render your model here
        <button onclick=|_| Msg::DoIt,>{ "Click me!" }</button>


Yew framework uses own virtual-dom representation.

JSX-like templates with html! macro

Put pure Rust code into HTML tags.

html! {
    <section class="todoapp",>
        <header class="header",>
            <h1>{ "todos" }</h1>
            { view_input(&model) }
        <section class="main",>
            <input class="toggle-all",
                   onclick=|_| Msg::ToggleAll, />
            { view_entries(&model) }

Rust/JS/C-style comments in templates

Use single-line or multi-line Rust comments inside html-templates.

html! {
   /* Write some ideas
    * in multiline comments
    <p>{ "and tags could be placed between comments!" }</p>
    // <li>{ "or single-line comments" }</li>

Pure Rust expressions inside

extern crate chrono;
use chrono::prelude::*;

fn view(model: &Model) -> Html<Msg> {
    html! {
        <p>{ Local::now() }</p>


Pluggable services that allow you to call external APIs like: JavaScript alerts, timeout, storage, fetches and websockets. It's a handy alternative to subscriptions.


  • IntervalService
  • TimeoutService
  • StorageService
  • AlertService
  • FetchService
  • WebSocketService

Important! Services feature is experimental and will be improved soon: allow services composition, better to develop third-party services in crates.

use yew::services::timeout::TimeoutService;

fn update(context: &mut Context<Msg>, model: &mut Model, msg: Msg) {
    match msg {
        Msg::Fire => {
            context.timeout(Duration::from_secs(5), || Msg::Timeout);
        Msg::Timeout => {

Easy-to-use data conversion and destructuring

You could simply choose and use a format of data to store/send and resore/receive it.

Supported: JSON

In development: BSON, TOML, YAML, XML

#[derive(Serialize, Deserialize)]
struct Client {
    first_name: String,
    last_name: String,

struct Model {
    clients: Vec<Client>,

fn update(context: &mut Context<Msg>, model: &mut Model, msg: Msg) {
    match msg {
    Msg::Store => {
        // Stores it, but in JSON format/layout
        context.store_value(Scope::Local, KEY, Json(&model.clients));
    Msg::Restore => {
        // Tries to read and destructure it as JSON formatted data
        if let Json(Ok(clients)) = context.restore_value(Scope::Local, KEY) {
            model.clients = clients;

Running the examples

Clone or download this repository.

There are four examples to check how it works: counter, timer, todomvc, game_of_life, crm and dashboard.

To run them you need to have cargo-web installed as well as a suitable target for the Rust compiler to generate web output. By default cargo-web uses asmjs-unknown-emscripten. Install cargo-web and the asmjs emscripten target as follows:

$ cargo install cargo-web
$ rustup target add asmjs-unknown-emscripten

To start an example enter its directory start it with cargo-web:

$ cargo web start

To run an optimised build instead of a debug build use:

$ cargo web start --release