docs.rodeo

MDN Web Docs mirror

WebAssembly.instantiate()

The WebAssembly.instantiate() function allows you to compile and instantiate WebAssembly code. This function has two overloads:

[!WARNING] This method is not the most efficient way of fetching and instantiating Wasm modules. If at all possible, you should use the newer WebAssembly.instantiateStreaming() method instead, which fetches, compiles, and instantiates a module all in one step, directly from the raw bytecode, so doesn’t require conversion to an {{jsxref("ArrayBuffer")}} .

Syntax

Primary overload — taking Wasm binary code

WebAssembly.instantiate(bufferSource);
WebAssembly.instantiate(bufferSource, importObject);
WebAssembly.instantiate(bufferSource, importObject, compileOptions);

Parameters

Return value

A Promise that resolves to a ResultObject which contains two fields:

Exceptions

Secondary overload — taking a module object instance

WebAssembly.instantiate(module);
WebAssembly.instantiate(module, importObject);
WebAssembly.instantiate(module, importObject, compileOptions);

Parameters

Return value

A Promise that resolves to an WebAssembly.Instance object.

Exceptions

Examples

[!NOTE] You’ll probably want to use WebAssembly.instantiateStreaming() in most cases, as it is more efficient than instantiate().

First overload example

After fetching some WebAssembly bytecode using fetch, we compile and instantiate the module using the WebAssembly.instantiate() function, importing a JavaScript function into the WebAssembly Module in the process. We then call an Exported WebAssembly function that is exported by the Instance.

const importObject = {
  my_namespace: {
    imported_func(arg) {
      console.log(arg);
    },
  },
};

fetch("simple.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject))
  .then((result) => result.instance.exports.exported_func());

[!NOTE] You can also find this example at index.html on GitHub (view it live also).

Second overload example

The following example (see our index-compile.html demo on GitHub, and view it live also) compiles the loaded simple.wasm byte code using the WebAssembly.compileStreaming() method and then sends it to a worker using {{domxref("Worker.postMessage", "postMessage()")}} .

const worker = new Worker("wasm_worker.js");

WebAssembly.compileStreaming(fetch("simple.wasm")).then((mod) =>
  worker.postMessage(mod),
);

In the worker (see wasm_worker.js) we define an import object for the module to use, then set up an event handler to receive the module from the main thread. When the module is received, we create an instance from it using the WebAssembly.instantiate() method and invoke an exported function from inside it.

const importObject = {
  my_namespace: {
    imported_func(arg) {
      console.log(arg);
    },
  },
};

onmessage = (e) => {
  console.log("module received from main thread");
  const mod = e.data;

  WebAssembly.instantiate(mod, importObject).then((instance) => {
    instance.exports.exported_func();
  });
};

Enabling JavaScript builtins and global string imports

This example enables JavaScript string builtins and imported global string constants when compiling and instantiating the Wasm module with instantiate(), before running the exported main() function (which logs "hello world!" to the console). See it running live.

const importObject = {
  // Regular import
  m: {
    log: console.log,
  },
};

const compileOptions = {
  builtins: ["js-string"], // Enable JavaScript string builtins
  importedStringConstants: "string_constants", // Enable imported global string constants
};

fetch("log-concat.wasm")
  .then((response) => response.arrayBuffer())
  .then((bytes) => WebAssembly.instantiate(bytes, importObject, compileOptions))
  .then((result) => result.instance.exports.main());

Specifications

{{Specifications}} 

Browser compatibility

{{Compat}} 

See also

In this article

View on MDN