🦀 ferrisvelte

Svelte + Rust WASM + Vite + Bun

A minimal starter template for building high-performance web apps with Svelte on the frontend and Rust compiled to WebAssembly for compute-heavy tasks.

Why This Stack?

Perfect for creative coding, data visualization, games, simulations, or any project where JavaScript performance isn't enough.

Prerequisites

• Bun >= 1.0
• Rust >= 1.70
• wasm-pack

# Install wasm-pack
cargo install wasm-pack

# Install rsw CLI
cargo install rsw

Quick Start

# Clone this repo
git clone https://github.com/YOUR_USERNAME/svelte-rust-wasm-starter.git
cd svelte-rust-wasm-starter

# Install dependencies
bun install

# Run dev server (Rust hot-reload enabled)
bun run dev

Open http://localhost:5173

Project Structure

.
├── src/
│   ├── App.svelte          # Main Svelte component
│   ├── main.ts             # Entry point
│   └── app.css             # Global styles
├── wasm-lib/               # Rust crate
│   ├── Cargo.toml
│   └── src/
│       └── lib.rs          # Rust functions exposed to JS
├── vite.config.ts
├── rsw.toml                # Rust-WASM config
└── package.json

Setup From Scratch

If you want to create this from zero:

1. Create Vite + Svelte project

bun create vite my-project --template svelte-ts
cd my-project

2. Install dependencies

bun install
bun add -d vite-plugin-rsw concurrently

3. Initialize rsw

bunx rsw init
bunx rsw new wasm-lib

4. Configure rsw.toml

[new]
using = "wasm-pack"
cli = "bun"

[[crates]]
name = "wasm-lib"
link = true

5. Configure vite.config.ts

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import { ViteRsw } from 'vite-plugin-rsw'

export default defineConfig({
  plugins: [svelte(), ViteRsw()]
})

6. Update package.json scripts

{
  "scripts": {
    "dev": "rsw build && concurrently \"rsw watch\" \"vite\"",
    "build": "rsw build && vite build",
    "preview": "vite preview"
  }
}

Note: The dev script runs an initial rsw build before starting the concurrent processes. This ensures the WASM package is built before Vite tries to resolve imports, preventing "Failed to resolve import" errors on first run.

Usage

Writing Rust functions

Edit wasm-lib/src/lib.rs:

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
pub fn fibonacci(n: u32) -> u32 {
    match n {
        0 => 0,
        1 => 1,
        _ => fibonacci(n - 1) + fibonacci(n - 2)
    }
}

#[wasm_bindgen]
pub fn process_pixels(data: &mut [u8]) {
    // Manipulate image data at native speed
    for pixel in data.chunks_mut(4) {
        pixel[0] = 255 - pixel[0]; // Invert R
        pixel[1] = 255 - pixel[1]; // Invert G
        pixel[2] = 255 - pixel[2]; // Invert B
    }
}

Calling from Svelte

<script lang="ts">
  import init, { fibonacci, process_pixels } from 'wasm-lib'
  import { onMount } from 'svelte'

  let result = 0

  onMount(async () => {
    await init()
    result = fibonacci(40) // Fast even for large numbers
  })
</script>

<p>fibonacci(40) = {result}</p>

Adding Rust Dependencies

Edit wasm-lib/Cargo.toml:

[dependencies]
wasm-bindgen = "0.2"
noise = "0.9"          # Perlin noise
nalgebra = "0.32"      # Linear algebra
rand = "0.8"           # Random numbers

Scripts

Common Issues

"Failed to resolve import 'wasm-lib'"

This happens when Vite starts before the initial WASM build completes. The updated dev script (rsw build && concurrently...) fixes this by ensuring an initial build runs first.

If you still see this error:

1. Wait for the Rust compilation to finish (look for "Build successfully!" in terminal)
2. Refresh your browser
3. Stop the dev server and restart with bun run dev

"wasm-pack not found"

cargo install wasm-pack

"rsw command not found"

cargo install rsw

WASM not updating

Make sure rsw watch is running. Check the terminal for Rust compilation errors.

Resources

• Rust and WebAssembly Book
• wasm-bindgen Guide
• Svelte Tutorial
• Vite Documentation

License

MIT