Learn SEED-RUST with Real Code Examples

# seed/demo/lib.rs
use seed::{prelude::*, *};

struct Model;

enum Msg {}

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

fn update(_msg: Msg, _model: &mut Model, _: &mut Orders<Msg>) {}

fn view(_model: &Model) -> Node<Msg> {
    h1! ["Hello, Seed!"]
}

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

A basic Seed app displaying 'Hello, Seed!' in the browser.

# seed/demo/button.rs
use seed::{prelude::*, *};

struct Model;

enum Msg { Click }

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

fn update(msg: Msg, _model: &mut Model, _: &mut Orders<Msg>) {
    match msg {
        Msg::Click => log!("Button clicked!")
    }
}

fn view(_model: &Model) -> Node<Msg> {
    button![
        "Click me",
        ev(Ev::Click, |_| Msg::Click)
    ]
}

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

A Seed app with a button that logs a message when clicked.

# seed/demo/counter.rs
use seed::{prelude::*, *};

struct Model { count: i32 }

enum Msg { Increment, Decrement }

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

fn update(msg: Msg, model: &mut Model, _: &mut Orders<Msg>) {
    match msg {
        Msg::Increment => model.count += 1,
        Msg::Decrement => model.count -= 1,
    }
}

fn view(model: &Model) -> Node<Msg> {
    div![
        button![ev(Ev::Click, |_| Msg::Decrement), "-"],
        span![model.count],
        button![ev(Ev::Click, |_| Msg::Increment), "+"]
    ]
}

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

A simple counter app using Seed framework.

# seed/demo/todo.rs
use seed::{prelude::*, *};

struct Model { todos: Vec<String>, input: String }

enum Msg { Add, UpdateInput(String) }

fn init(_: Url, _: &mut Orders<Msg>) -> Model {
    Model { todos: vec![], input: String::new() }
}

fn update(msg: Msg, model: &mut Model, _: &mut Orders<Msg>) {
    match msg {
        Msg::Add => {
        model.todos.push(model.input.clone());
        model.input.clear();
        },
        Msg::UpdateInput(value) => model.input = value,
    }
}

fn view(model: &Model) -> Node<Msg> {
    div![
        input![
        type_("text"),
        attrs! { At::Value => model.input },
        ev(Ev::Input, |e| Msg::UpdateInput(e.value))
        ],
        button![ev(Ev::Click, |_| Msg::Add), "Add"],
        ul![model.todos.iter().map(|todo| li![todo]).collect::<Vec<Node<Msg>>>()]
    ]
}

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

A basic Todo list component using Seed.

# seed/demo/conditional.rs
use seed::{prelude::*, *};

struct Model { logged_in: bool }

enum Msg { ToggleLogin }

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

fn update(msg: Msg, model: &mut Model, _: &mut Orders<Msg>) {
    if let Msg::ToggleLogin = msg {
        model.logged_in = !model.logged_in
    }
}

fn view(model: &Model) -> Node<Msg> {
    div![
        if model.logged_in { h1!["Welcome back!"] } else { h1!["Please log in"] },
        button![ev(Ev::Click, |_| Msg::ToggleLogin), "Toggle"]
    ]
}

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

Renders different messages based on the model state.

# seed/demo/list.rs
use seed::{prelude::*, *};

struct Model { items: Vec<&'static str> }

enum Msg {}

fn init(_: Url, _: &mut Orders<Msg>) -> Model {
    Model { items: vec!["One", "Two", "Three"] }
}

fn update(_msg: Msg, _model: &mut Model, _: &mut Orders<Msg>) {}

fn view(model: &Model) -> Node<Msg> {
    ul![model.items.iter().map(|item| li![item]).collect::<Vec<Node<Msg>>>()]
}

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

Displays a list of items using Seed framework.

# seed/demo/input.rs
use seed::{prelude::*, *};

struct Model { text: String }

enum Msg { Update(String) }

fn init(_: Url, _: &mut Orders<Msg>) -> Model {
    Model { text: String::new() }
}

fn update(msg: Msg, model: &mut Model, _: &mut Orders<Msg>) {
    if let Msg::Update(value) = msg {
        model.text = value
    }
}

fn view(model: &Model) -> Node<Msg> {
    div![
        input![
        type_("text"),
        attrs! { At::Value => model.text },
        ev(Ev::Input, |e| Msg::Update(e.value))
        ],
        p![&model.text]
    ]
}

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

Binds input value to model state.

# seed/demo/click_counter.rs
use seed::{prelude::*, *};

struct Model { count: i32 }

enum Msg { Click }

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

fn update(msg: Msg, model: &mut Model, _: &mut Orders<Msg>) {
    if let Msg::Click = msg {
        model.count += 1
    }
}

fn view(model: &Model) -> Node<Msg> {
    div![
        button![ev(Ev::Click, |_| Msg::Click), "Click me"],
        span![model.count]
    ]
}

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

Counts clicks on a button and displays the count.

# seed/demo/multiple.rs
use seed::{prelude::*, *};

struct Model;

enum Msg {}

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

fn update(_msg: Msg, _model: &mut Model, _: &mut Orders<Msg>) {}

fn view(_model: &Model) -> Node<Msg> {
    div![
        h1!["Header"],
        p!["This is a paragraph."],
        ul![li!["Item 1"], li!["Item 2"]]
    ]
}

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

Displays multiple HTML elements in a Seed view.