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.



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.

pub fn Button(cx: Scope) -> impl IntoView {
  let (count, set_count) = create_signal(cx, 0);
  view! { cx, 
    <button on:click=move |_| { 
        set_count.update(|n| *n += 1);
      "Click me: "

Interactive examples may not function as expected before JS/WASM have loaded.

  1. The component function runs once, creating the DOM elements and setting up the reactive system.
  2. Clicking the button fires the on:click handler.
  3. The click handler calls set_count.update to increment the count.
  4. The change to the count signal makes a targeted update to the DOM, changing the value of a single text node without re-rendering anything else.

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(
    cx: Scope,
    favorite_cookie_type: String,
    favorite_color: String,
) -> Result<(), ServerFnError> {
    let pool = get_pool(cx)?;

    let query = "
        (favorite_cookie_type, favorite_color)
        VALUES ($1, $2)


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

pub fn FavoritesForm(cx: Scope) -> impl IntoView {
    let favorites = create_server_action::<SaveFavorites>(cx);
    let value = favorites.value();
    view! { cx, 
        <ActionForm action=favorites>
                "Favorite type of cookie"
                "Favorite color"
            <input type="submit"/>
        <Show when=favorites.pending() fallback=|_| ()>
        <Show when=move || value.with(Option::is_some) fallback=|_| ()>

Interactive examples may not function as expected before JS/WASM have loaded.

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
pub fn Collections(cx: Scope) -> impl IntoView {
    view! { cx,
        <h2 class="text-2xl font-bold text-black">
        <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"/>
                <h3 class="mt-6 text-sm text-[#3f3f3f] dark:text-[#e0e0e0]">
                    "Desk and Office"
                <p class="font-semibold text-black">
                    "Work from home accessories"

Interactive examples may not function as expected before JS/WASM have loaded.


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.