$devvkit learn --librarie leptos-guide

Leptos Guide

[rust][frontend][ssr][wasm]

Rust

Install

cargo add leptos
# Also:
# cargo leptos new-project my-app
# Requires trunk or cargo-leptos

Leptos is a Rust framework inspired by SolidJS. It compiles to both server (SSR) and client (WASM) using fine-grained signals for reactivity. No virtual DOM: components compile to DOM operations.

Leptos uses signals (create_signal, RwSignal), effects (create_effect), and memos (create_memo) just like Solid. The `view!` macro provides JSX-like syntax with compile-time validation.

Leptos provides server functions (call Rust functions from the browser as if they were local), routing via leptos_router, and integration with Axum or Actix as the server backend.

Setup

Create project· Scaffold Leptos app.

cargo leptos new-project my-app
cd my-app
cargo leptos watch

Components & View

Component· Basic Leptos component.

use leptos::*;

#[component]
pub fn Counter() -> impl IntoView {
    let (count, set_count) = create_signal(0);

    view! {
        <button on:click=move |_| set_count.update(|c| *c += 1)>
            {count}
        </button>
    }
}

Signals & Reactivity

Signals & effects· Reactive primitives.

let (name, set_name) = create_signal("Alice".to_string());
// Derived signal
let greeting = Signal::derive(move || format!("Hello, {}!", name.get()));
// Memo (cache)
let uppercase = create_memo(move |_| name.get().to_uppercase());
// Effect
create_effect(move |_| {
    console_log!("Name: {}", name.get());
});

Conditional render· Show/hide.

let (show, set_show) = create_signal(true);

view! {
    {move || show.get().then(|| view! { <p>"Content"</p> })}
    <Show when=show fallback=|| view! { <p>"Hidden"</p> }>
        <p>"Content"</p>
    </Show>
}

Routing

Routing· leptos_router setup.

use leptos_router::*;

#[component]
pub fn App() -> impl IntoView {
    view! {
        <Router>
            <Routes>
                <Route path="/" view=Home/>
                <Route path="/users/:id" view=User/>
            </Routes>
        </Router>
    }
}

Server Functions

Server function· Call server from client.

#[server(GetUsers, "/api/users")]
pub async fn get_users() -> Result<Vec<User>, ServerFnError> {
    // This runs on the server only
    let users = db::find_all().await?;
    Ok(users)
}

// In client component:
let users = create_resource(|| (), |_| get_users());

Deployment

Build for production· Compile to WASM + server.

cargo leptos build --release
# Output:
# target/release/server  (binary)
# target/site/pkg/       (WASM)
#
# Or deploy server binary to any host