Leptos

Build fast web applications with Rust.

Web AssemblyRustUI Framework
leptos-rs/leptosleptos.dev

README

Leptos


  1. ```rust
  2. use leptos::*;

  4. #[component]
  5. pub fn SimpleCounter(initial_value: i32) -> impl IntoView {
  6.     // create a reactive signal with the initial value
  7.     let (value, set_value) = create_signal(initial_value);

  9.     // create event handlers for our buttons
  10.     // note that `value` and `set_value` are `Copy`, so it's super easy to move them into closures
  11.     let clear = move |_| set_value(0);
  12.     let decrement = move |_| set_value.update(|value| *value -= 1);
  13.     let increment = move |_| set_value.update(|value| *value += 1);

  15.     // create user interfaces with the declarative `view!` macro
  16.     view! {
  17.         <div>
  18.             <button on:click=clear>Clear</button>
  19.             <button on:click=decrement>-1</button>
  20.             // text nodes can be quoted or unquoted
  21.             <span>"Value: " {value} "!"</span>
  22.             <button on:click=increment>+1</button>
  23.         </div>
  24.     }
  25. }

  27. // we also support a builder syntax rather than the JSX-like `view` macro
  28. #[component]
  29. pub fn SimpleCounterWithBuilder(initial_value: i32) -> impl IntoView {
  30.     use leptos::html::*;

  32.     let (value, set_value) = create_signal(initial_value);
  33.     let clear = move |_| set_value(0);
  34.     let decrement = move |_| set_value.update(|value| *value -= 1);
  35.     let increment = move |_| set_value.update(|value| *value += 1);

  37.     // the `view` macro above expands to this builder syntax
  38.     div().child((
  39.         button().on(ev::click, clear).child("Clear"),
  40.         button().on(ev::click, decrement).child("-1"),
  41.         span().child(("Value: ", value, "!")),
  42.         button().on(ev::click, increment).child("+1")
  43.     ))
  44. }

  46. // Easy to use with Trunk (trunkrs.dev) or with a simple wasm-bindgen setup
  47. pub fn main() {
  48.     mount_to_body(|| view! {
  49.         <SimpleCounter initial_value=3 />
  50.     })
  51. }
  52. ```

About the Framework


Leptos is a full-stack, isomorphic Rust web framework leveraging fine-grained reactivity to build declarative user interfaces.

What does that mean?


- **Full-stack**: Leptos can be used to build apps that run in the browser (client-side rendering), on the server (server-side rendering), or by rendering HTML on the server and then adding interactivity in the browser (server-side rendering with hydration). This includes support for HTTP streaming of both data ([`Resource`s](https://docs.rs/leptos/latest/leptos/struct.Resource.html)) and HTML (out-of-order or in-order streaming of [``](https://docs.rs/leptos/latest/leptos/fn.Suspense.html) components.)
- Isomorphic: Leptos provides primitives to write isomorphic server functions, i.e., functions that can be called with the “same shape” on the client or server, but only run on the server. This means you can write your server-only logic (database requests, authentication etc.) alongside the client-side components that will consume it, and call server functions as if they were running in the browser, without needing to create and maintain a separate REST or other API.
- Web: Leptos is built on the Web platform and Web standards. The router is designed to use Web fundamentals (like links and forms) and build on top of them rather than trying to replace them.
- Framework: Leptos provides most of what you need to build a modern web app: a reactive system, templating library, and a router that works on both the server and client side.
- Fine-grained reactivity: The entire framework is built from reactive primitives. This allows for extremely performant code with minimal overhead: when a reactive signal’s value changes, it can update a single text node, toggle a single class, or remove an element from the DOM without any other code running. (So, no virtual DOM overhead!)
- Declarative: Tell Leptos how you want the page to look, and let the framework tell the browser how to do it.

nightly Note


Most of the examples assume you’re using nightly version of Rust and the nightly feature of Leptos. To use nightly Rust, you can either set your toolchain globally or on per-project basis.

To set nightly as a default toolchain for all projects (and add the ability to compile Rust to WebAssembly, if you haven’t already):

  1. ```
  2. rustup toolchain install nightly
  3. rustup default nightly
  4. rustup target add wasm32-unknown-unknown
  5. ```

If you'd like to use nightly only in your Leptos project however, add [rust-toolchain.toml](https://rust-lang.github.io/rustup/overrides.html#the-toolchain-file) file with the following content:

  1. ```toml
  2. [toolchain]
  3. channel = "nightly"
  4. targets = ["wasm32-unknown-unknown"]
  5. ```

The nightly feature enables the function call syntax for accessing and setting signals, as opposed to .get() and .set(). This leads to a consistent mental model in which accessing a reactive value of any kind (a signal, memo, or derived signal) is always represented as a function call. This is only possible with nightly Rust and the nightly feature.