You build a Leptos frontend by defining your UI components in Rust using the leptos macro system, then compiling the project to WebAssembly (WASM) via cargo leptos or trunk to run in the browser. The framework supports both Server-Side Rendering (SSR) and Client-Side Rendering (CSR), allowing you to choose the best hydration strategy for your application's performance needs.
For a quick start, you can scaffold a new project using the official template, which sets up the necessary build tools and directory structure automatically.
cargo leptos new --template counter my-leptos-app
cd my-leptos-app
cargo leptos watch
This command creates a project with a counter example, installs dependencies, and starts a development server that compiles Rust to WASM on the fly. Inside src/app.rs, you define your root component using the view! macro, which maps Rust code directly to HTML-like syntax.
use leptos::*;
#[component]
pub fn App() -> impl IntoView {
let (count, set_count) = create_signal(0);
view! {
<div>
<p>"Current count: " {count}</p>
<button on:click=move |_| set_count.update(|n| *n += 1)>
"Increment"
</button>
</div>
}
}
In this example, create_signal establishes reactive state. When set_count is called, Leptos automatically updates the DOM to reflect the new value without manual manipulation. The view! macro handles the rendering logic, optimizing updates based on the dependency graph. For production builds, you would typically run cargo leptos build to generate optimized WASM and HTML files ready for deployment on static hosting services like Vercel or Netlify. If you need SSR, the template includes a server entry point that renders the initial HTML on the server before hydrating the client-side WASM.