Learn LEPTOS-RUST with Real Code Examples

# leptos/demo/main.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    view! {
        h1 {"Hello, Leptos!"}
    }
}

fn main() {
    mount_to_body(App);
}

A basic Leptos app displaying 'Hello, Leptos!' in the browser.

# leptos/demo/button.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    view! {
        button(on:click=move |_| log!("Button clicked!")) {"Click me"}
    }
}

fn main() {
    mount_to_body(App);
}

A button that logs a message on click.

# leptos/demo/counter.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    let count = create_signal(0);
    view! {
        div {
        button(on:click=move |_| count.update(|c| *c -= 1)) {"-"}
        span {(count.get())}
        button(on:click=move |_| count.update(|c| *c += 1)) {"+"}
        }
    }
}

fn main() {
    mount_to_body(App);
}

A simple counter using Leptos signals.

# leptos/demo/conditional.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    let logged_in = create_signal(false);
    view! {
        div {
        (if logged_in.get() { view! { h1 {"Welcome back!"} } } else { view! { h1 {"Please log in"} } }),
        button(on:click=move |_| logged_in.update(|v| *v = !*v)) {"Toggle"}
        }
    }
}

fn main() {
    mount_to_body(App);
}

Displays different messages based on a signal.

# leptos/demo/todo.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    let todos = create_signal(Vec::<String>::new());
    let input = create_signal(String::new());
    view! {
        div {
        input(bind:value=input)
        button(on:click=move |_| { todos.update(|t| t.push(input.get())); input.set(String::new()); }) {"Add"}
        ul { for todos.get().iter().map(|todo| view!{ li { (todo) } }) }
        }
    }
}

fn main() {
    mount_to_body(App);
}

A simple Todo list using signals.

# leptos/demo/list.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    let items = create_signal(vec!["One", "Two", "Three"]);
    view! {
        ul { for items.get().iter().map(|item| view!{ li { (item) } }) }
    }
}

fn main() {
    mount_to_body(App);
}

Renders a list of items dynamically.

# leptos/demo/input.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    let text = create_signal(String::new());
    view! {
        div {
        input(bind:value=text)
        p { (text.get()) }
        }
    }
}

fn main() {
    mount_to_body(App);
}

Binds an input value to a signal and displays it.

# leptos/demo/click_counter.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    let count = create_signal(0);
    view! {
        div {
        button(on:click=move |_| count.update(|c| *c += 1)) {"Click me"}
        span { (count.get()) }
        }
    }
}

fn main() {
    mount_to_body(App);
}

Counts clicks on a button using a signal.

# leptos/demo/multiple.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    view! {
        div {
        h1 {"Header"}
        p {"This is a paragraph."}
        ul { li {"Item 1"} li {"Item 2"} }
        }
    }
}

fn main() {
    mount_to_body(App);
}

Displays multiple elements in a single view.

# leptos/demo/conditional_class.rs
use leptos::*;

#[component]
fn App() -> impl IntoView {
    let active = create_signal(false);
    view! {
        button(class:if active.get() {"active"} else {""}, on:click=move |_| active.update(|v| *v = !*v)) {"Toggle Class"}
    }
}

fn main() {
    mount_to_body(App);
}

Applies CSS class conditionally using a signal.