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
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>
}
}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.
#[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>
}
}
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.
#[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>
}
}
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.