Dark mode

App 1: Counter

When you click the button, the number is incremented.

Live Demo | Repository | Playground

Counter example is the default example in the basic quickstart so you don't have to modify code at all.

The entire code (/src/lib.rs content) without comments and extra items to satisfy linters:

use seed::{prelude::*, *};

fn init(_: Url, _: &mut impl Orders<Msg>) -> Model {
    Model::default()
}

type Model = i32;

enum Msg {
    Increment,
}

fn update(msg: Msg, model: &mut Model, _: &mut impl Orders<Msg>) {
    match msg {
        Msg::Increment => *model += 1,
    }
}

fn view(model: &Model) -> Node<Msg> {
    div![
        C!["counter"],
        "This is a counter: ",
        button![model, ev(Ev::Click, |_| Msg::Increment),],
    ]
}

#[wasm_bindgen(start)]
pub fn start() {
    App::start("app", init, update, view);
}

You'll learn about individual parts (Model, update, etc.) in the next chapters. If you want to zoom out a bit before we'll jump into the rabbit hole, I recommend to read something about The Elm Architecture (TEA).