DEV Community

Alex Spinov
Alex Spinov

Posted on

Sycamore Has a Free Framework: Build Reactive Web Apps in Rust With No Virtual DOM and Compile-Time Optimized Rendering

#webdev #programming #opensource #rust

React re-renders your entire component tree when state changes. Svelte compiles away the framework. Sycamore takes the Svelte approach but in Rust — compile-time reactive updates with zero runtime overhead. No virtual DOM, no diffing algorithm, no framework code shipped to the browser.

What Sycamore Actually Does

Sycamore is a reactive web framework for Rust that compiles to WebAssembly. Like Svelte, it uses fine-grained reactivity where signals directly update the DOM nodes that depend on them. But unlike Svelte (which is JavaScript), Sycamore gives you Rust's type system, memory safety, and WebAssembly performance.

Sycamore uses a view macro similar to JSX but generates direct DOM manipulation code at compile time. No virtual DOM allocation, no tree diffing, no garbage collection. The compiled WASM binary is typically 50-200KB.

Open-source under MIT license. Supports SSR, hydration, and client-side rendering.

Quick Start 

cargo init my-app
cd my-app
cargo add sycamore
Enter fullscreen mode Exit fullscreen mode

Add to Cargo.toml:

[dependencies]
sycamore = "0.9"
Enter fullscreen mode Exit fullscreen mode

A reactive counter:

use sycamore::prelude::*;

#[component]
fn Counter() -> View {
    let count = create_signal(0);

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

fn main() {
    sycamore::render(Counter);
}
Enter fullscreen mode Exit fullscreen mode

Build for web:

trunk serve  # Development server with hot reload
trunk build --release  # Production WASM build
Enter fullscreen mode Exit fullscreen mode

3 Practical Use Cases

1. Dynamic Lists with Keyed Rendering 

#[component]
fn TodoApp() -> View {
    let todos = create_signal(vec![
        "Buy groceries".to_string(),
        "Write Rust code".to_string(),
    ]);
    let input = create_signal(String::new());

    let add_todo = move |_| {
        let mut t = (*todos.get()).clone();
        t.push((*input.get()).clone());
        todos.set(t);
        input.set(String::new());
    };

    view! {
        input(bind:value=input, placeholder="New todo...")
        button(on:click=add_todo) { "Add" }
        ul {
            Keyed(
                iterable=todos,
                key=|item| item.clone(),
                view=|item| view! { li { (item) } }
            )
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

2. Derived Signals (Computed Values) 

#[component]
fn PriceCalculator() -> View {
    let price = create_signal(100.0_f64);
    let quantity = create_signal(1_i32);
    let tax_rate = create_signal(0.08_f64);

    // Automatically recomputes when dependencies change
    let subtotal = create_memo(move || {
        price.get() * quantity.get() as f64
    });
    let total = create_memo(move || {
        subtotal.get() * (1.0 + tax_rate.get())
    });

    view! {
        div {
            p { "Subtotal: $" (format!("{:.2}", subtotal.get())) }
            p { "Total (with tax): $" (format!("{:.2}", total.get())) }
        }
    }
}
Enter fullscreen mode Exit fullscreen mode

3. Server-Side Rendering 

use sycamore::web::SsrNode;

fn render_to_string() -> String {
    sycamore::render_to_string(|_| view! {
        html {
            head { title { "My Rust App" } }
            body {
                Counter {}
            }
        }
    })
}
Enter fullscreen mode Exit fullscreen mode

Generate HTML on the server, hydrate on the client.

Why This Matters

Sycamore proves that Rust + WASM is a viable path for frontend development. The compile-time reactive system means zero runtime overhead — your app is as fast as hand-written DOM manipulation, but with the ergonomics of a reactive framework. For Rust developers who want to build web UIs without touching JavaScript, Sycamore is the most lightweight option.

Need custom data extraction or web scraping solutions? I build production-grade scrapers and data pipelines. Check out my Apify actors or email me at spinov001@gmail.com for custom projects.

Follow me for more free API discoveries every week!

Top comments (0)