livid is a lightweight frontend Rust crate for creating web apps via webassembly. It's also light on macros!
rustup target add wasm32-unknown-unknownInstall the trunk crate (to simplify building and bundling your web app):
cargo install trunk
Create an index.html file in your root directory:
html
<html>
<head>
</head>
</html>
You can add links to CSS files/urls, and use Widget::setclassname() to benefit from CSS styling.
Create a project:
toml
[dependencies]
livid = "0.1"
```rust use livid::{Event, Style, Widget, WidgetType, document};
fn btn() -> Widget { Widget::new(WidgetType::Button) }
fn div() -> Widget { Widget::new(WidgetType::Div) }
fn incrementby(i: i32) { let result = document().getelementbyid("result").unwrap(); let mut old: i32 = result.textcontent().unwrap().parse().unwrap(); old += i; result.settextcontent(Some(&old.tostring())); }
fn main() { let btninc = btn(); btninc.settextcontent(Some("Increment")); btninc.setstyle(Style::Color, "green"); btninc.addcallback(Event::Click, move || incrementby(1));
let btn_dec = btn();
btn_dec.set_text_content(Some("Decrement"));
btn_dec.set_style(Style::Color, "red");
btn_dec.add_callback(Event::Click, move |_| increment_by(-1));
let main_div = div();
main_div.append_child(&btn_inc).unwrap();
main_div.append_child(&btn_dec).unwrap();
let result = div();
result.set_id("result");
result.set_text_content(Some("0"));
result.set_style(Style::FontSize, "22px");
let btns = document().get_elements_by_tag_name("BUTTON");
for i in 0..btns.length() {
// set their fontSize to 22 pixesl
Widget::from(btns.item(i).unwrap()).set_style(Style::FontSize, "22px");
}
} ```
trunk build or trunk serve