MoonZoon is a Rust Fullstack Framework to build Web and Desktop apps with Multithreading and Durable Computing. No HTML, CSS or JS needed.

use zoon::*;

fn main() {
    start_app("app", root);
}

static COUNTER: Lazy<Mutable<i32>> = lazy::default();

fn root() -> impl Element {
    Row::new()
        .s(Align::center())
        .s(Gap::new().x(15))
        .item(counter_button("-", -1))
        .item_signal(COUNTER.signal())
        .item(counter_button("+", 1))
}

fn counter_button(label: &str, step: i32) -> impl Element {
    let (hovered, hovered_signal) = Mutable::new_and_signal(false);
    Button::new()
        .s(Width::exact(45))
        .s(RoundedCorners::all_max())
        .s(Background::new()
            .color_signal(hovered_signal.map_bool(|| color!("#edc8f5"), || color!("#E1A3EE", 0.8))))
        .s(Borders::all(
            Border::new()
                .width(2)
                .color(color!("oklch(0.6 0.182 350.53 / .7")),
        ))
        .on_hovered_change(move |is_hovered| hovered.set(is_hovered))
        .label(label)
        .on_press(move || *COUNTER.lock_mut() += step)
}

• Used by the command mzoon new (see the section Create & Run project below)

• Repo: examples/chat

• Related blog post: "Chat example, MoonZoon Cloud [dev.to / MD].

  

1. Install the latest stable Rust. (Or upgrade with rustup update stable.)

2. Install the web assembly target rustup target add wasm32-unknown-unknown

3. cargo install mzoon --git https://github.com/MoonZoon/MoonZoon --locked

4. mzoon new my_counter

5. cd my_counter

6. mzoon start --open

   

I use Coolify on Hetzner with this Dockerfile:

FROM rust:1
WORKDIR /app

RUN rustup target add wasm32-unknown-unknown
# NOTE: Set `--rev` to the commit you use in your project
RUN --mount=type=cache,target=/usr/local/cargo,from=rust,source=/usr/local/cargo \
    cargo install mzoon --git https://github.com/MoonZoon/MoonZoon --rev ccc15d043e78a6656d68a60d46de1f540724e093 --locked

COPY . .

RUN --mount=type=cache,target=/usr/local/cargo,from=rust,source=/usr/local/cargo \
    --mount=type=cache,target=target \
    /usr/local/cargo/bin/mzoon build -r

RUN --mount=type=cache,target=target \
    ["cp", "./target/release/backend", "/usr/local/bin/moon_app"]

ENTRYPOINT ["moon_app"]

MoonZoon app was successfully deployed to other services like Heroku (buildpack), Clever Cloud, CapRover or Fly.io.

1. mzoon build --release --frontend-dist netlify

   • Hosting name (netlify) is optional. It creates files like netlify.toml.

2. [optional] Test it with a dev server like miniserve:

   cargo install miniserve
   
   miniserve --port 8079 --index index.html --spa frontend_dist

3. Drag & drop the frontend_dist directory to Netlify.

   

• Examples in the repo [See development.md for instructions how to run them.]

• Raytracer on MoonZoon [Not maintained)

• Voting system on the Solana blockchain. [Not maintained)

  

• Cure for Web Development [Medium / dev.to / MD]

• Rust on the Frontend and Backend [Always Bet on Rust]

• Interview with Martin about MoonZoon [console.substack.com]

1. CLI, Build pipeline, Live-reload, HTTPS [dev.to / MD]

2. Live demo, Zoon, Examples, Architectures [dev.to / MD]

3. Signals, React-like Hooks, Optimizations [dev.to / MD]

4. Actix, Async CLI, Error handling, Wasm-pack installer [dev.to / MD]

5. Chat example, MoonZoon Cloud [dev.to / MD]

• MartinKavik/js-framework-benchmark

Thank you for reading! We are waiting for you on Discord.