Using Wasm modules - Supabase

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 simple Wasm module in Rust that adds two numbers.

Follow this guide on writing Wasm modules in Rust to setup your dev environment.

</Admonition> <StepHikeCompact> <StepHikeCompact.Step step={1} fullWidth> <StepHikeCompact.Details title="Create a new Edge Function" fullWidth> Create a new Edge Function called `wasm-add`

  ```bash
  supabase functions new wasm-add
  ```

  </StepHikeCompact.Details>
</StepHikeCompact.Step>

<StepHikeCompact.Step step={2} fullWidth>
<StepHikeCompact.Details title="Create a new Cargo project" fullWidth>
  Create a new Cargo project for the Wasm module inside the function's directory:

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

  </StepHikeCompact.Details>
</StepHikeCompact.Step>
<StepHikeCompact.Step step={3} fullWidth>
  <StepHikeCompact.Details title="Add the Wasm module code" fullWidth>

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

  <$CodeSample
    path="edge-functions/supabase/functions/wasm-modules/add-wasm/src/lib.rs"
    lines={[[1, -1]]}
    meta="lib.rs"
    language="rust"
  />

  </StepHikeCompact.Details>
</StepHikeCompact.Step>

<StepHikeCompact.Step step={4} fullWidth>
  <StepHikeCompact.Details title="Update the Cargo.toml file" fullWidth>

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

  <$CodeSample
    path="edge-functions/supabase/functions/wasm-modules/add-wasm/Cargo.toml"
    lines={[[1, -1]]}
    meta="Cargo.toml"
  />

  </StepHikeCompact.Details>
</StepHikeCompact.Step>

<StepHikeCompact.Step step={5} fullWidth>
  <StepHikeCompact.Details title="Build the Wasm module" fullWidth>

    Build the package by running:

    ```bash
    wasm-pack build --target deno
    ```

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


  </StepHikeCompact.Details>
</StepHikeCompact.Step>

</StepHikeCompact>

Calling the Wasm module from the Edge Function

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

<$CodeSample path="edge-functions/supabase/functions/wasm-modules/index.ts" lines={[[1, -1]]} meta="index.ts" />

Supabase Edge Functions currently use Deno 1.46. From Deno 2.1, importing Wasm modules will require even less boilerplate code.

</Admonition>

Bundle and deploy

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

You will need update Supabase CLI to 2.7.0 or higher for the static_files support.
Static files cannot be deployed using the --use-api API flag. You need to build them with Docker on the CLI.

</Admonition>

toml

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

Deploy the function by running:

bash

supabase functions deploy wasm-add