Wurbo

Trustless, sharable, composable HTML/Tailwind UI made with Wasm Components

Wurbo

Because your user interface should be trustless, too.

Experimental Proof of concept web framework using wasm components. All input and UI generation is done in Wasm, so there cannot be "call home" vulnerabilities over your data inputs. This means you can use guest Apps (wasm components) in a trustless fashion in your host app.

Wurbo? Like Turbo, but using Wasm Components. Kind of like Elm too? Render HTML from wasm ui components.

Short Video Hype

Examples

Example Guest component is examples/vowels
Example Forms component is examples/forms
Example Host app is src/routes/+page.svelte

To run the examples locally in the browser, you can use the following commands:

# build-component:
  cargo component build --workspace

# prev: build-component
  npm run build && npm run preview -- --open

or using just: just prev

Demo

The example is demonstrated at https://douganderson444.github.io/wurbo

Use Steps

In your WIT file:

declare interface named reactivity with functions render and activate
a separate interface (named anything you like, such as imports) with function addeventlistener

In the Rust:

create your new Wasm Component using cargo component new --reactor <name>
ensure you add render crate to your Cargo.toml dependencies
use the wurbo crate's macro to implement the reactivity interface for reactivity::Guest.
build your own Page parent component and Input / Output components as you like for your user interface.

In JavaScript:

load the wasm bytes + importables into an ES module (called it mod) using rollup-plugin-wit-component
mod.reactivity.render(args) uses that module to load the initial data.
wurbo.listen(mod) listens for events from the component
call mod.reactivity.activate() once the DOM has loaded, to start listening for change events.

Table Summary:

Step	WIT	Rust	JavaScript
1	declare interface `imports`	pass `imports` to `wurbo` macro	implement `imports` as JS code then pass stringified code to `rollup-plugin-wit-component` fn `load` via `importables`
2	declare interface `reactivity`	implement interface `reactvity` using the macro and your `render` crate Components	load `reactivity` ES module using `rollup-plugin-wit-component`
3	Ready.	call `cargo component build --release`	call `mod.reactivity.render(args)` to get rendered HTML
4	Ready.	Ready.	call `wurbo.listen(mod)` to set up listeners
5	Ready.	Ready.	When DOM has loaded the rendered HTML, then call `mod.reactivity.activate()` to actually listen

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

Compile the wasm component, see README.md for more details.

npm run build

# or start the server and open the app in a new browser tab
npm run preview -- --open

Building

To build the code (dev mode does not work due to how Vite handles wasm):

cargo component build --workspace --release
npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Publishing

To publish to npm:

just publish

or, manually:

npm run package
npm publish

To publish to crates.io:

cargo publish -p wurbo

Top categories