Home Contact

Kaja Web

– Rust framework for web development targeting Web Assembly

The Core Concept

The programmer knows when a part of the page needs to be updated. No need for reactive code that re-renders things automatically. HTML is treated as strings. That is very convenient if you want to implement serverside rendering.

About

The framework is split into three crates:

Getting Started

Install the required dependencies: 

cargo add kaja-web
cargo add kaja-html-macro
cargo add kaja-callback-macro
cargo add wasm-bindgen
cargo add inventory
cargo add web-sys
cargo add gloo
cargo add js-sys

Note that you need to specify feature when you add web-sys, most features are disabled by default.

Write the Code

Probalby in src/lib.rs

use kaja_web::prelude::*;

fn create_counter_display(count: u32) {
    let counter = html! {{
        <div class="click-counter-display">$count</div>

        <button class="click-counter-increment-button"
            onclick="incrementCounter()">
            Increment
        </button>
    }};

    try_inner_html("#click-counter", counter.as_str());
}

#[callback(incrementCounter)]
pub fn increment_counter() {
    // ...
}

#[wasm_bindgen(start)]
pub fn init() {
    init_callbacks();
    create_counter_display(0);
}

Create the HTML Page

index.html

<script type="module" src="clickcounter.js" defer></script>
<body>
    <main id="click-counter"><main>
<body>

Build the Project

wasm-pack build \
    --release \
    --target web \
    --out-dir pkg \
    --out-name clickcounter \
    --no-typescript

cp index.html pkg/

Change --release to --debug if you want good symbols in the panic handler.

Debugging

Enable panic handler if the current build is a debug build. 

#[wasm_bindgen(start)]
pub fn init() {
    std::panic::set_hook(Box::new(console_error_panic_hook::hook));
    console_error_panic_hook::set_once();
    init_callbacks();
}

Contact

Email: johan.mattsson.m@gmail.com
Mastodon: typo.social/@birdfont
Github: johanmattssonm
Linkedin: johan-mattsson-2ab324112