Sycamore tries to have as simple of an API as possible.
Here it is:
// main.rs
use sycamore::prelude::*;
fn main() {
sycamore::render(|| template! {
p { "Hello, World!" }
});
}Let's dissect what the code above was doing.
fn main() {Nothing really special here. Trunk automatically uses fn main as your project's entrypoint. No
need for any #[wasm_bindgen(start)] here.
sycamore::render(...)This function is provided by Sycamore and is used to render your app to the DOM (browser window).
render accepts a closure (aka. lambda function) which should return a template to be rendered.
template! {
p { "Hello, World!" }
}The template! macro allows creating complex user interfaces ergonomically in HTML. In this case,
we want to render the following HTML:
<p>Hello World!</p>The p { ... } creates a new <p> tag. The "Hello, World!" creates a new text node that is
nested within the <p> tag.
There it is! Trunk just needs one thing to turn this into a website; a html source file to inject
the template into. Copy the following code to a file called index.html in the root of your crate
(alongside Cargo.toml):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>My first Sycamore app</title>
</head>
<body></body>
</html>To try it out, copy the Hello World code snippet to your main.rs file and run trunk serve from
your command prompt. Open up your browser at localhost:8080 and you should see "Hello, World!"
printed to the screen in all its glory.
If you modify your code, Trunk should automatically rebuild your app. Just refresh your browser tab to see the latest changes.
sycamore-trunk-gitpod-template: A quick start template for building a Sycamore single-page app. Comes with support for using gitpod.io.