Full stack, fully typed.

A cutting-edge Rust framework for the modern web.

Build interactive web applications in Rust.

Leptos makes it easy to build applications in the most-loved programming language, combining the best paradigms of modern web development with the power of Rust.

Create full-stack apps that start working immediately and are progressively enhanced with client-side interactivity.

Start projects fast using simple tooling with minimal configuration.

Easily manage state without fighting the borrow checker with reactive signals.

Write “server functions” that work across both the server and client.

Sleep well knowing Rust's type safety is protecting your whole app.

High-performance

VanillaJS
100%
Leptos
92%
Vue
80%
Svelte
73%
React
33%

Source: js-framework-benchmark official results for Chrome 113.

Your favorite UI patterns

Build websites and apps from self-contained components with reactive state management that's easy to use.

#[component]
pub fn Button() -> impl IntoView {
  let (count, set_count) = signal(0);
  view! { 
    <button on:click=move |_| { 
        set_count.update(|n| *n  = 1);
      }
    >
      "Click me: "
      {count}
    </button>
  }
}
example.com

Leptos's fine-grained reactive signals make targeted updates to the DOM when your component's state changes, keeping your app responsive to user input.

Your favorite language

Leptos makes it easy to integrate Rust backend code with your user interface in a few lines of code. #[server] functions let you cross the client-server boundary without the boilerplate of setting up a new API endpoint, making it easy to create “full-stack components” that let you write everything from a SQL query to a button click in one place.

Rust code
#[server(SaveFavorites, "/api")]
pub async fn save_favorites(
    favorite_cookie_type: String,
    favorite_color: String,
) -> Result<(), ServerFnError> {
    let pool = get_pool()?;

    let query = "
        INSERT INTO COOKIES 
        (favorite_cookie_type, favorite_color)
        VALUES ($1, $2)
    ";

    sqlx::query(query)
        .bind(favorite_cookie_type)
        .bind(favorite_color)
        .execute(&pool)
        .await
        .map_err(|e| 
            ServerFnError::ServerError(e.to_string())?;

    Ok(format!("Here, have some {favorite_color} {favorite_cookie_type} cookies!"))
}

#[component]
pub fn FavoritesForm() -> impl IntoView {
    let favorites = create_server_action::<SaveFavorites>();
    let value = favorites.value();
    view! { 
        <ActionForm action=favorites>
            <label>
                "Favorite type of cookie"
                <input
                    type="text"
                    name="favorite_cookie_type"
                />
            </label>
            <label>
                "Favorite color"
                <input
                    type="text"
                    name="favorite_color"
                />
            </label>
            <input type="submit"/>
        </ActionForm>
        <Show when=favorites.pending()>
            <div>"Loading..."</div>
        </Show>
        <Show when=move || value.with(Option::is_some)>
            <div>{value}</div>
        </Show>
    }
}
example.com

Save to database

Leptos harnesses Rust's strong type safety, speed, and concurrency to deliver highly performant and reliable applications.

Your favorite tools

Tools like Tailwind integrate with Leptos perfectly, letting you build on design patterns shared across the Web.

TypeScript React code
#[component]
pub fn Collections() -> impl IntoView {
    view! { 
        <h2 class="text-2xl font-bold text-black">
            "Collections"
        </h2>
        <div class="my-4">
            <div class="cursor-pointer">
                <div class="max-w-sm h-40 overflow-hidden rounded-lg">
                    <img loading="lazy" src="desk.jpg"
                         class="h-full w-full object-cover object-center"/>
                </div>
                <h3 class="mt-6 text-sm text-[#3f3f3f] dark:text-[#e0e0e0]">
                    "Desk and Office"
                </h3>
                <p class="font-semibold text-black">
                    "Work from home accessories"
                </p>
            </div>
        </div>
    }
}
example.com

Collections

Desk and Office

Work from home accessories

Boost your productivity with great tooling like hot-reloading template updates and a dedicated Leptos language server and VSCode extension, designed to streamline your Leptos coding experience and maintain a consistent code style throughout your project.