79 releases

0.7.0-rc1	Nov 4, 2024
0.7.0-preview2	~~Apr 29, 2024~~
0.7.0-gamma	Sep 30, 2024
0.6.9	Mar 4, 2024
0.0.3	Nov 27, 2022

#1802 in Web programming

38,439 downloads per month
Used in 36 crates (31 directly)

MIT license

205KB
4K SLoC

Leptos Meta

Leptos Meta allows you to modify content in a document’s <head> from within components using the Leptos web framework.

Document metadata is updated automatically when running in the browser. For server-side rendering, after the component tree is rendered to HTML, MetaContext::dehydrate can generate HTML that should be injected into the <head> of the HTML document being rendered.

use leptos::prelude::*;
use leptos_meta::*;

#[component]
fn MyApp() -> impl IntoView {
    // Provides a [`MetaContext`], if there is not already one provided.
    provide_meta_context();

    let (name, set_name) = create_signal("Alice".to_string());

    view! {
      <Title
        // reactively sets document.title when `name` changes
        text=move || name.get()
        // applies the `formatter` function to the `text` value
        formatter=|text| format!("“{text}” is your name")
      />
      <main>
        <input
          prop:value=move || name.get()
          on:input=move |ev| set_name.set(event_target_value(&ev))
        />
      </main>
    }
}

Feature Flags

csr Client-side rendering: Generate DOM nodes in the browser
ssr Server-side rendering: Generate an HTML string (typically on the server)
hydrate Hydration: use this to add interactivity to an SSRed Leptos app
stable By default, Leptos requires nightly Rust, which is what allows the ergonomics of calling signals as functions. Enable this feature to support stable Rust.

Important Note: You must enable one of csr, hydrate, or ssr to tell Leptos which mode your app is operating in.

Dependencies

~21–33MB
~519K SLoC