Learn SYCAMORE-RUST with Real Code Examples

# sycamore/demo/main.rs
use sycamore::prelude::*;

fn app<G: Html>() -> View<G> {
    view! {
        h1 {"Hello, Sycamore!"}
    }
}

fn main() {
    sycamore::render(app);
}

A basic Sycamore app displaying 'Hello, Sycamore!' in the browser.

# sycamore/demo/button.rs
use sycamore::prelude::*;

fn app<G: Html>() -> View<G> {
    let message = create_signal("Click the button!".to_string());
    view! {
        div {
        p { (message.get()) }
        button(on:click=move |_| message.set("Button clicked!".to_string())) {"Click Me"}
        }
    }
}

fn main() {
    sycamore::render(app);
}

A Sycamore component updating a message when a button is clicked.

# sycamore/demo/input.rs
use sycamore::prelude::*;

fn app<G: Html>() -> View<G> {
    let name = create_signal(String::new());
    view! {
        div {
        input(bind:value=name)
        p {"Hello, " (name.get()) "!"}
        }
    }
}

fn main() {
    sycamore::render(app);
}

Binds input text to state and displays it.

# sycamore/demo/conditional.rs
use sycamore::prelude::*;

fn app<G: Html>() -> View<G> {
    let is_logged_in = create_signal(false);
    view! {
        div {
        (button(on:click=move |_| is_logged_in.set(!*is_logged_in.get())) {"Toggle"})
        (if *is_logged_in.get() {
        view! { p {"Welcome back!"} }
        } else {
        view! { p {"Please log in."} }
        })
        }
    }
}

fn main() {
    sycamore::render(app);
}

Shows different content based on a boolean signal.

# sycamore/demo/loop.rs
use sycamore::prelude::*;

fn app<G: Html>() -> View<G> {
    let items = vec!["Item 1", "Item 2", "Item 3"];
    view! {
        ul {
        (Keyed(items, |item| item.clone(), |item| view! { li { (item) } }))
        }
    }
}

fn main() {
    sycamore::render(app);
}

Displays a list of items using a loop.

# sycamore/demo/nested.rs
use sycamore::prelude::*;

#[component]
fn Child<G: Html>(cx: Scope) -> View<G> {
    view! { p {"Hello from Child"} }
}

#[component]
fn Parent<G: Html>(cx: Scope) -> View<G> {
    view! { div { Child() } }
}

fn main() {
    sycamore::render(|| Parent());
}

Parent component rendering a child component.

# sycamore/demo/timer.rs
use sycamore::prelude::*;
use gloo_timers::callback::Interval;

fn app<G: Html>() -> View<G> {
    let time = create_signal(js_sys::Date::new_0().to_locale_time_string("en-US"));
    Interval::new(1000, move || {
        time.set(js_sys::Date::new_0().to_locale_time_string("en-US"));
    }).forget();
    view! {
        p { (time.get()) }
    }
}

fn main() {
    sycamore::render(app);
}

Updates a signal every second using a timer.

# sycamore/demo/form.rs
use sycamore::prelude::*;

fn app<G: Html>() -> View<G> {
    let name = create_signal(String::new());
    let message = create_signal(String::new());
    view! {
        div {
        input(bind:value=name)
        button(on:click=move |_| message.set(format!("Hello, {}!", name.get()))) {"Submit"}
        p { (message.get()) }
        }
    }
}

fn main() {
    sycamore::render(app);
}

Handles a simple form submission.

# sycamore/demo/conditional_loop.rs
use sycamore::prelude::*;

fn app<G: Html>() -> View<G> {
    let show_first = create_signal(true);
    let list1 = vec!["A", "B", "C"];
    let list2 = vec!["X", "Y", "Z"];
    view! {
        div {
        button(on:click=move |_| show_first.set(!*show_first.get())) {"Toggle"}
        (if *show_first.get() {
        view! { Keyed(list1, |i| i.clone(), |i| view! { p { (i) } }) }
        } else {
        view! { Keyed(list2, |i| i.clone(), |i| view! { p { (i) } }) }
        })
        }
    }
}

fn main() {
    sycamore::render(app);
}

Displays different lists based on a toggle signal.

# sycamore/demo/child_props.rs
use sycamore::prelude::*;

#[component]
fn Child<G: Html>(cx: Scope, text: &'static str) -> View<G> {
    view! { p { (text) } }
}

#[component]
fn Parent<G: Html>(cx: Scope) -> View<G> {
    view! { div { Child("Hello from Props") } }
}

fn main() {
    sycamore::render(|| Parent());
}

Child component receiving props from parent.