Vertigo - reactive webassembly

Features

• Reactive dependencies - A graph of values and clients (micro-subscriptions) that can automatically compute what to refresh after one value change
• Real DOM - No intermediate Virtual DOM mechanism is necessary
• HTML/CSS macros - Allows to construct Real DOM nodes using HTML and CSS

See Changelog for recent features.

Go to TUTORIAL if you want to try.

Example

Dependencies:

vertigo = "0.1.0-beta.5"

Example 1:

use vertigo::{dom, DomElement, Value, bind, start_app};

pub fn render(count: Value<i32>) -> DomElement {
    let increment = bind(&count).call(|context, count| {
        count.set(count.get(context) + 1);
    });

    let decrement = bind(&count).call(|context, count| {
        count.set(count.get(context) - 1);
    });

    dom! {
        <div>
            <p>"Counter: " { count }</p>
            <button on_click={decrement}>"-"</button>
            <button on_click={increment}>"+"</button>
        </div>
    }
}

#[no_mangle]
pub fn start_application() {
    start_app(|| -> DomElement {
        let count = Value::new(0);
        render(count)
    });
}

Example 2:

use vertigo::{DomElement, Value, dom, css_fn};

pub struct MyMessage {
    pub message: Value<String>,
}

impl MyMessage {
    pub fn mount(self) -> DomElement {
        dom! {
            <p>
                "Message to the world: "
                { self.message }
            </p>
        }
    }
}

css_fn! { main_div, "
    color: darkblue;
" }

fn render() -> DomElement {
    let message = Value::new("Hello world!".to_string());

    dom! {
        <div css={main_div()}>
            <MyMessage message={message} />
        </div>
    }
}

Take a look at More examples here.

Demo App - installation and usage

Make sure you're using nigthly version of rust:

• rustup default nightly

Install cargo-make that takes care of all other dependencies:

• cargo install cargo-make

Build and run project using:

• cargo make demo-start

Eventually terminal will let you know that app is available under http://localhost:3000/

If you want to play around with the code, you can make cargo to watch for your changes:

• cargo make demo-watch

Keep in mind that you still need to refresh page in the browser after project recompiles.

To compile all examples run:

• cargo make examples-build

This will build examples in examples/build directory. Now point your browser to index.html file of a particular example.

A community, soon to grow

• Discord server: https://discord.gg/HAXtTeFrAf