sycamore-rs / sycamore

A library for creating reactive web apps in Rust and WebAssembly
https://sycamore-rs.netlify.app
MIT License
2.79k stars 148 forks source link
fine-grained-reactivity hacktoberfest rust signals sycamore ui wasm web-assembly

Sycamore

[![Crates.io](https://img.shields.io/crates/v/sycamore)](https://crates.io/crates/sycamore) [![docs.rs](https://img.shields.io/docsrs/sycamore?color=blue&label=docs.rs)](https://docs.rs/sycamore) [![GitHub contributors](https://img.shields.io/github/contributors/sycamore-rs/sycamore)](https://github.com/sycamore-rs/sycamore/graphs/contributors) [![Discord](https://img.shields.io/discord/820400041332179004?label=discord)](https://discord.gg/vDwFUmm6mU)

Sycamore is a reactive library for creating web apps in Rust and WebAssembly.

#[component]
fn Hello() -> View {
    view! {
        p { "Hello World!" }
    }
}

Documentation

Sycamore is extensively documented:

Still have questions? Don't hesitate to stop by our friendly Discord server.

Examples

Sycamore has many examples for your reference in the examples/ directory. Be sure to check them out!

Viewing on sycamore-rs.netlify.app

All the examples are hosted under sycamore-rs.netlify.app/examples/<example_name> with <example_name> being the name of the example you want to view. For instance, the todomvc example is hosted on sycamore-rs.netlify.app/examples/todomvc.

Building Locally

All the examples can also be built locally using Trunk. For instance, the following command builds and serves the todomvc example:

cd examples/todomvc
trunk serve

Now open up localhost:8080 in your browser to see "Hello World!".

Perseus

Perseus is a fullstack framework built with Sycamore. Think NextJS or SvelteKit but with no JavaScript. Everything from backend to frontend is built with pure Rust!

Alternatives?

Don't think Sycamore is for you? Thankfully, there are plenty of alternatives!

Contributing

Sycamore would not have been possible without the wonderful contributions from the community. Thank you!

Special thanks to @nate-sys for designing the Sycamore logo!