Dark mode

App 1: Counter

When you click the button, the number is incremented.

Live Demo | Repository

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 {

type Model = i32;

enum Msg {

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

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

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).