README

!Crates.io MSRV



Website | Book | Docs.rs | Playground | Discord

You can find a list of useful libraries and example projects at awesome-leptos.

 Leptos

rust
use leptos::;

[component]
pub fn SimpleCounter(initial_value: i32) - impl IntoView {
    // create a reactive signal with the initial value
    let (value, set_value) = signal(initial_value);

    // create event handlers for our buttons
    // note that value and set_value are Copy, so it's super easy to move them into closures
    let clear = move |_| set_value(0);
    let decrement = move |_| set_value.update(|value| value -= 1);
    let increment = move |_| set_value.update(|value| value += 1);

    // create user interfaces with the declarative view! macro
    view! {
        
            Clear
            -1
            // text nodes can be quoted or unquoted
            "Value: " {value} "!"
            +1
        
    }
}

// we also support a builder syntax rather than the JSX-like view macro
[component]
pub fn SimpleCounterWithBuilder(initial_value: i32) - impl IntoView {
    use leptos::html::;

    let (value, set_value) = signal(initial_value);
    let clear = move |_| set_value(0);
    let decrement = move |_| set_value.update(|value| value -= 1);
    let increment = move |_| set_value.update(|value| value += 1);

    // the view macro above expands to this builder syntax
    div().child((
        button().on(ev::click, clear).child("Clear"),
        button().on(ev::click, decrement).child("-1"),
        span().child(("Value: ", value, "!")),
        button().on(ev::click, increment).child("+1")
    ))
}

// Easy to use with Trunk (trunk-rs.github.io/trunk) or with a simple wasm-bindgen setup
pub fn main() {
    mount_to_body(|| view! {
        
    })
}


 About the Framework

Leptos is a full-stack, isomorphic Rust web framework leveraging fine-grained reactivity to build declarative user interfaces.

 What does that mean?

- Full-stack: Leptos can be used to build apps that run in the browser (client-side rendering), on the server (server-side rendering), or by rendering HTML on the server and then adding interactivity in the browser (server-side rendering with hydration). This includes support for HTTP streaming of both data (Resources) and HTML (out-of-order or in-order streaming of  components.)
- Isomorphic: Leptos provides primitives to write isomorphic server functions, i.e., functions that can be called with the “same shape” on the client or server, but only run on the server. This means you can write your server-only logic (database requests, authentication etc.) alongside the client-side components that will consume it, and call server functions as if they were running in the browser, without needing to create and maintain a separate REST or other API.
- Web: Leptos is built on the Web platform and Web standards. The router is designed to use Web fundamentals (like links and forms) and build on top of them rather than trying to replace them.
- Framework: Lepto