Use the language of your choice with Pages Functions via WebAssembly

Pages Functions opens up to WebAssembly modules

When Pages Functions reached general availability last November, it became the foundation for full-stack applications on Cloudflare’s developer platform. The next step is broadening the languages you can use for server-side logic. Cloudflare is now adding WebAssembly support to Pages Functions, letting developers import and run .wasm modules directly from their Function code.

WebAssembly (Wasm) is a low-level, assembly-like language designed to run at near-native performance. It acts as a compilation target for languages like C, C++, C#, and Rust, allowing them to execute alongside JavaScript. Since Pages Functions are Workers under the hood, and Workers have supported Wasm modules for some time, extending that capability to Pages was a natural fit. Not every use case benefits from Wasm, but the ones that do—handling compute-heavy tasks, leveraging existing native libraries, or reusing code written in other languages—now have a supported path.

How Wasm imports work in Functions

The integration closely mirrors the Workers experience: Pages reads .wasm files as WebAssembly modules, which you import directly inside your Functions.

// functions/api/distance-between.js

import wasmModule from "../../pkg/distance.wasm";

export async function onRequest({ request }) {
  const moduleInstance = await WebAssembly.instantiate(wasmModule);
  const distance = await moduleInstance.exports.distance_between();

  return new Response(distance);
}

Pages makes no assumptions about how the binary was produced. The distance.wasm file in the example could be something you compiled from your own source, or a prebuilt artifact shipped by a third-party library. The only requirement is that it is a compiled WebAssembly binary module per the spec.

Importing a .wasm file yields a WebAssembly.Module object. From there, you can instantiate it to create a usable instance:

const moduleInstance = await WebAssembly.instantiate(wasmModule);

Once you have a WebAssembly.Instance, you can call whatever functions the module exports directly from your Function code:

const distance = await moduleInstance.exports.distance_between();

Additional module types: text and binary

Alongside Wasm, this update introduces support for two more importable module types in Functions: text and binary. These aren’t standardized modules, but they simplify handling raw content. Text modules let you import files like HTML as a string:

// functions/my-function.js
import html from "404.html";

export async function onRequest() {
  return new Response(html,{
    headers: { "Content-Type": "text/html" }
  });
}

Binary modules give you raw data, such as images, as an ArrayBuffer.

// functions/my-function.js
import image from "../hearts.png.bin";

export async function onRequest() {
  return new Response(image,{
    headers: { "Content-Type": "image/png" }
  });
}

Live example: computing Earth distances in Rust

To demonstrate the workflow end-to-end, Cloudflare built a demo app that computes the distance in kilometers between your current location and any point on the globe you click. The geo coordinates come from the incoming request's properties. The app’s source is available on GitHub.

The distance calculation itself is written in Rust, closely following an example from the Rust Cookbook:

fn distance_between(from_latitude_degrees: f64, from_longitude_degrees: f64, to_latitude_degrees: f64, to_longitude_degrees: f64) -> f64 {
    let earth_radius_kilometer = 6371.0_f64;

    let from_latitude = from_latitude_degrees.to_radians();
    let to_latitude = to_latitude_degrees.to_radians();

    let delta_latitude = (from_latitude_degrees - to_latitude_degrees).to_radians();
    let delta_longitude = (from_longitude_degrees - to_longitude_degrees).to_radians();

    let central_angle_inner = (delta_latitude / 2.0).sin().powi(2)
        + from_latitude.cos() * to_latitude.cos() * (delta_longitude / 2.0).sin().powi(2);
    let central_angle = 2.0 * central_angle_inner.sqrt().asin();

    let distance = earth_radius_kilometer * central_angle;
    
    return distance;
}

To bridge that Rust function into Pages Functions, the code is first compiled to WebAssembly using wasm-pack:

##
# generate the `pkg` folder which will contain the wasm binary
##
wasm-pack build

The generated .wasm artifact is then imported inside the distance-between.js Pages Function. Each click on the globe fires a request to /api/distance-between, which executes distance_between(). The computed value is returned to the client for display.

This particular app could have been written in plain JavaScript. The Rust choice highlights the maturity of the tooling around Rust-generated Wasm: build tooling is well documented, and the official Rust Wasm book is a solid starting point for anyone new to the pairing. More broadly, the goal here is to give developers flexibility in choosing the right language for each part of their stack, without forcing a JavaScript-only server model.