Build, bundle & ship your Rust WASM application to the web

”Pack your things, we’re going on an adventure!”
~ Ferris

Star
Discord Chat Number of downloads
Explore More ⇩
Motivation
Installing
Contributing
License
Overview

Trunk is a WASM web application bundler for Rust. Trunk uses a simple, optional-config pattern for building & bundling WASM, JS snippets & other assets (images, css, scss) via a source HTML file.

Motivation

Any wasm-bindgen-based framework will work with Trunk. If you're new to frontend development in Rust, Yew and Leptos are two popular options.

The easiest way to ensure that your application launches properly is to setup your app as an executable with a standard main function:

fn main() {
    // ... your app setup code here ...
}

Trunk uses a source HTML file to drive all asset building and bundling. Trunk also uses the official dart-sass, so let's get started with the following example. Copy this HTML to the root of your project's repo as index.html:

<html>
  <head>
    <link data-trunk rel="scss" href="path/to/index.scss"/>
    <link data-trunk rel="rust"/>
  </head>
</html>

The index.scss file may be empty but must exist.

trunk build will produce the following HTML at dist/index.html, along with the compiled scss, WASM & the JS loader for the WASM:

<html>
  <head>
    <link rel="stylesheet" href="/index-fe65950190f03c21.css" integrity="sha384-pgQCpTXf5Gd2g3bMQt/1fNJvznbtkReq/e3ooBAB1MPzHOTtbFDd5/tqXjQXrP4i"/>
    
<script type="module">
import init, * as bindings from '/my_program_name-905e0077a27c1ab6.js';
const wasm = await init('/my_program_name-905e0077a27c1ab6_bg.wasm');

window.wasmBindings = bindings;
dispatchEvent(new CustomEvent("TrunkApplicationStarted", {detail: {wasm}}));

</script>
  <link rel="modulepreload" href="/my_program_name-905e0077a27c1ab6.js" crossorigin="anonymous" integrity="sha384-XtIBch5nbGDblQX/VKgj2jEZMDa5+UbPgVtEQp18GY63sZAFYf81ithX9iMSLbBn"><link rel="preload" href="/my_program_name-905e0077a27c1ab6_bg.wasm" crossorigin="anonymous" integrity="sha384-Mf9hhCJLbxzecZm30W8m15djd1Z1yamaa52XBF0TsvX0/qITABYRpsB5cVmy3lt/" as="fetch" type="application/wasm"></head>
</html>

The contents of your dist dir are now ready to be served on the web.

Installing

Please refer to the guide.

Contributing

Anyone and everyone is welcome to contribute! Please review the CONTRIBUTING.md document for more details. The best way to get started is to find an open issue, and then start hacking on implementing it. Letting other folks know that you are working on it, and sharing progress is a great approach. Open pull requests early and often, and please use GitHub's draft pull request feature.

License

license badge
trunk is licensed under the terms of the MIT License or the Apache License 2.0, at your choosing.