22 unstable releases (5 breaking)

0.6.0	Aug 2, 2024
0.5.0	Apr 5, 2024
0.4.3	Feb 28, 2024
0.4.1	Dec 2, 2023
0.1.0-alpha.0	Dec 23, 2020

#398 in Web programming

Used in 5 crates

MIT/Apache

445KB
12K SLoC

Vertigo

A reactive Real-DOM library with SSR for Rust

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
Server-side rendering - Out of the box when using vertigo-cli

See Changelog for recent features.

Go to TUTORIAL if you want to try.

Examples

Dependencies:

vertigo = "0.6"

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, Value, dom, main};

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

#[main]
fn app() -> DomNode {
    let message = Value::new("Hello world!".to_string());

    let main_div = css!("
        color: darkblue;
    ");

    dom! {
        <html>
            <head/>
            <body>
                <div css={main_div}>
                    <MyMessage message={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

Make sure you're using nightly version of rust:

rustup default nightly

Install cargo-make and vertigo-cli:

cargo install cargo-make vertigo-cli

Run

Build and run project using:

cargo make demo-start

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

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

cargo make demo-watch

The browser will automatically refresh after the project has been recompiled.

If you want to use "chat" in demo you need to first run websocket server in separate terminal with command:

cargo make demo-serve-api

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

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

Dependencies

~5.5MB
~104K SLoC