vertigo 0.11.1

Reactive Real-DOM library with SSR for Rust
Documentation

Vertigo

A reactive Real-DOM library with SSR for Rust.

crates.io Documentation MIT or Apache 2.0 licensed Dependency Status CI downloads

Features

  • Reactive dependencies - A graph of values and clients (micro-subscriptions) that can automatically compute what to refresh after one value changes
  • Real DOM - No intermediate Virtual DOM mechanism is necessary
  • HTML/CSS macros - Allows to construct Real DOM nodes using HTML and CSS
  • Tailwind v4 support out of the box
  • Isomorphic server-side rendering - The same WASM code is used for both client and server (see: vertigo-cli)
  • Fullstack - Can be mounted into actix-web (see: vertigo-cli)

See Changelog for recent features.

Go to TUTORIAL if you want to try.

For more information go to vertigo home website vertigo.znoj.pl.

Examples

Dependencies:

vertigo = "0.11"

Example 1:

use vertigo::{dom, DomNode, Value, bind, main};

#[main]
pub fn app() -> DomNode {
    let count = Value::new(0);

    let increment = bind!(count, |_| {
        count.change(|value| {
            *value += 1;
        });
    });

    let decrement = bind!(count, |_| {
        count.change(|value| {
            *value -= 1;
        });
    });

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

Example 2:

use vertigo::{css, component, DomNode, store, Value, dom, main};

#[component]
pub fn MyMessage(message: Value<String>) {
    dom! {
        <p>
            "Message to the world: "
            { message }
        </p>
    }
}

#[store]
fn state_message() -> Value<String> {
    Value::new("Hello world!".to_string())
}

#[main]
fn app() -> DomNode {
    let main_div = css! {"
        color: darkblue;
    "};

    dom! {
        <html>
            <head/>
            <body>
                <div css={main_div}>
                    <MyMessage message={state_message()} />
                </div>
            </body>
        </html>
    }
}

Take a look at More examples here.

Installation of vertigo-cli tool

To ease process or development use vertigo-cli tool that allows to build, serve and watch your project.

cargo install --force vertigo-cli

Demo App

Prepare

Install cargo-make and vertigo-cli:

  • cargo install cargo-make vertigo-cli

Run

Build and run project using:

  • cargo make demo

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

If you want to play around with the demo code, run:

  • cargo make demo-watch

It should automatically recompile upon changes and the browser tab should be informed to refresh. Note that this compiles the code in debug mode so the WASM is not optimized.

To run the examples in watch mode (they will run on localhost:4444): cargo make examples-counter or cargo make examples-router or cargo make examples-trafficlights

A community, soon to grow