Sycamore Documentation

Sycamore provides various examples demonstrating different features and patterns. Key examples include:

• Core UI & Logic: counter (simple state), iteration (looping over data), components (UI abstraction), and higher-order-components (functions that create components).
• Data & Async: http-request and http-request-builder (Suspense + async components for HTTP), timer (using futures), and transitions (Suspense + async transitions).
• Routing & Navigation: router (demonstrating sycamore-router).
• Rendering Strategies: ssr (Server-Side Rendering), ssr-suspense (SSR with suspense), ssr-streaming (SSR with streaming), and hydrate (making existing HTML reactive).
• Advanced UI: motion (animation frames and tweened signals), svg (creating SVGs with the view! macro), and attributes-passthrough (dynamic attributes).

You can interpolate any value that implements Into<View>, such as strings, numbers, signals, or other views. When using complex expressions or signals, the view! macro automatically wraps them in a closure to create a dynamic view.

let value = 123;
let signal = create_signal(456);

view! {
    p {
        "Value: " (value)
    }
    p {
        // Automatically becomes a dynamic view
        (signal.get() + 1)
    }
}

Use the r#ref attribute to assign a NodeRef to an element, allowing you to access the underlying DOM node.

let node = create_node_ref();
view! {
    button(r#ref=node)
}

You can run tests for the entire workspace or for specific packages.

All tests:

cargo test --all-features

Package-specific tests (e.g., sycamore-reactive):

cd packages/sycamore-reactive
cargo test --all-features

To run WASM-specific tests, ensure wasm-pack is installed. You can run tests in a visible browser (like Chrome) or in headless mode.

Chrome tests:

cd packages/sycamore
wasm-pack test --chrome --all-features

Headless tests: Add the --headless flag to the command above.

Use the on:* directive in the view! macro to attach event handlers (e.g., on:click).

Example of an inline handler:

view! {
    button(on:click=move |_| counter.set(counter.get() + 1)) { "Increment" }
}

let mut counter = create_signal(1);
let increment = move |_| counter += 1;

view! {
    button(on:click=increment) { "Increment" }
    p { "Count: " (counter) }
}

Sycamore v0.8 introduced a major breaking change to the reactivity system. The reactive scope (cx) is now explicitly passed to hooks and functions instead of being tracked globally. Additionally, closures no longer require 'static lifetimes, meaning you can access local variables directly without cloning signals into event handlers or effects.

// New v0.8 syntax.
let signal = create_signal(cx, 123);
create_effect(cx, || {
    let _ = signal.get();
});
view! { cx,
    div {}
}

To contribute a new example:

1. Add your example to the examples/ folder. (Tip: Clone an existing example and update the folder name and Cargo.toml).
2. Register the example in examples/README.md with a brief description of its purpose.