A library for building reactive web apps

Quick Start

First off, we'll need trunk to build our app. Install it with:

cargo install trunk

Once that's completed, lets jump right in and have a play around with the example counter app. The full code is available here. To run it:

cd examples/counter
trunk serve --open

It's not the most complex app, but it'll serve as a good example to show how we can build an interactive web app. Lets go through the code, step by step.

Firstly, we create a new Mutable and an associated Signal.

# use futures_signals::signal::{Mutable, SignalExt};
# use silkenweb::{elements::html::*, prelude::*};

let count = Mutable::new(0);
let count_text = count.signal().map(|i| format!("{}", i));

Mutable represents a variable, and Signal represents values of that variable across time. Here we map a function over values of count, to convert it to text. See the futures-signals tutorial for more detail on Mutables and Signals.

Next, we create a closure, inc, to increment count. Then we build the DOM for our counter. on_click installs inc as an event handler to increment the counter.

# use futures_signals::signal::{Mutable, SignalExt};
# use silkenweb::{elements::html::*, prelude::*};
#
# let count = Mutable::new(0);
# let count_text = count.signal().map(|i| format!("{}", i));

let inc = move |_, _| {
count.replace_with(|i| *i + 1);
};

let app = div()
.child(button().on_click(inc).text("+"))
.child(p().text_signal(count_text));

Finally, we mount our app on the DOM. This will find the element with id = "app" and mount app there.

# use futures_signals::signal::{Mutable, SignalExt};
# use silkenweb::{elements::html::*, prelude::*};
#
# let count = Mutable::new(0);
# let count_text = count.signal().map(|i| format!("{}", i));
#
# let inc = move |_, _| {
#     count.replace_with(|i| *i + 1);
# };
#
# let app = div()
#     .child(button().on_click(inc).text("+"))
#     .child(p().text_signal(count_text));
mount("app", app);

Cargo Features

• client-side-render enables client side rendering on wasm32 targets
• server-side-render enables server side rendering on all targets
• hydration enables hydration on wasm32 clients

If no features are specified, client-side-rendering will be enabled.