Zuvo Docs

Guide

Using Wasm modules

Use WebAssembly in Edge Functions.

Edge Functions supports running WebAssembly (Wasm) modules. WebAssembly is useful if you want to optimize code that's slower to run in JavaScript or require low-level manipulation.

This allows you to:

  • Optimize performance-critical code beyond JavaScript capabilities
  • Port existing libraries from other languages (C, C++, Rust) to JavaScript
  • Access low-level system operations not available in JavaScript

For example, libraries like magick-wasm port existing C libraries to WebAssembly for complex image processing.

Writing a Wasm module

You can use different languages and SDKs to write Wasm modules. For this tutorial, we will write a basic Wasm module in Rust that adds two numbers.

Create a new Edge Function

Create a new Edge Function called wasm-add

      supabase functions new wasm-add

Create a new Cargo project

Create a new Cargo project for the Wasm module inside the function's directory:

      cd supabase/functions/wasm-add
      cargo new --lib add-wasm

Add the Wasm module code

Add the following code to add-wasm/src/lib.rs.

Code sample: see project quickstart in Zuvo Studio.

Update the Cargo.toml file

Update the add-wasm/Cargo.toml to include the wasm-bindgen dependency.

Code sample: see project quickstart in Zuvo Studio.

Build the Wasm module

Build the package by running:

        wasm-pack build --target deno

This will produce a Wasm binary file inside add-wasm/pkg directory.

Calling the Wasm module from the Edge Function

Update your Edge Function to call the add function from the Wasm module:

Code sample: see project quickstart in Zuvo Studio.

Bundle and deploy

Before deploying, ensure the Wasm module is bundled with your function by defining it in supabase/config.toml:

[functions.wasm-add]
static_files = [ "./functions/wasm-add/add-wasm/pkg/*"]

Deploy the function by running:

supabase functions deploy wasm-add