{"id":384,"date":"2018-01-04T11:52:41","date_gmt":"2018-01-04T15:52:41","guid":{"rendered":"https:\/\/timesheet.dovico.com\/blog\/?p=384"},"modified":"2025-08-13T17:33:37","modified_gmt":"2025-08-13T20:33:37","slug":"webassembly-wasmfiddle-and-inline-webassembly-modules","status":"publish","type":"post","link":"https:\/\/timesheet.dovico.com\/blog\/2018\/01\/04\/webassembly-wasmfiddle-and-inline-webassembly-modules\/","title":{"rendered":"WebAssembly – WasmFiddle and Inline WebAssembly Modules"},"content":{"rendered":"

WasmFiddle<\/h3>\n

JSFiddle<\/a>, and tools like it, allow you to test code in the browser to see how it will work instead of having to write an application just to test something. Another advantage of tools like this is that you can share your example code on sites like Stack Overflow<\/a>.<\/p>\n

It turns out that there is a similar tool for WebAssembly called WasmFiddle: https:\/\/wasdk.github.io\/WasmFiddle<\/a><\/p>\n

<\/figure>\n

If we replace the code that is in the top-left pane with our code below we can compile the code by pressing the Build button:<\/p>\n

\n

int add(int x, int y){ return x + y; }<\/p>\n<\/blockquote>\n

Because we changed the method in the top-left pain from \u2018main\u2019 to \u2018add\u2019, we need to adjust the logic in the top-right pane from this:<\/p>\n

\n

log(wasmInstance.exports.main());<\/p>\n<\/blockquote>\n

to this:<\/p>\n

\n

log(wasmInstance.exports.add(1, 2));<\/p>\n<\/blockquote>\n

Once you make this change, you can click the Run button which will display the result of the call in the bottom-right pane.<\/p>\n

Note: One difference between WasmFiddle\u2019s output as compared to Emscripten\u2019s output is that there is no underscore character before the method\u2019s name when using WasmFiddle.<\/p>\n

To share your WebAssembly code with someone, you first need to click on the Share button (above the top-right pane) which will update the URI both in the browser\u2019s address bar and just above the top-left pane. You can then copy and share the address.<\/p>\n

Inline WebAssembly Modules<\/h3>\n

WasmFiddle also allows you to download the wasm file or simply view the file\u2019s text format or binary representation in the bottom-left pane.<\/p>\n

The binary representation from WasmFiddle offers an interesting option when it comes instantiating WebAssembly modules. With the array that you\u2019re given, you can bypass the fetch of the wasm file and instantiate a WebAssembly module directly with the array.<\/p>\n

The following is some sample code using our Code Buffer from WasmFiddle:<\/p>\n

\n

var wasmCode = new Uint8Array([0, 97, 115, 109, 1, 0, 0, 0, 1, 135, 128, 128, 128, 0, 1, 96, 2, 127, 127, 1, 127, 3, 130, 128, 128, 128, 0, 1, 0, 4, 132, 128, 128, 128, 0, 1, 112, 0, 0, 5, 131, 128, 128, 128, 0, 1, 0, 1, 6, 129, 128, 128, 128, 0, 0, 7, 144, 128, 128, 128, 0, 2, 6, 109, 101, 109, 111, 114, 121, 2, 0, 3, 97, 100, 100, 0, 0, 10, 141, 128, 128, 128, 0, 1, 135, 128, 128, 128, 0, 0, 32, 1, 32, 0, 106, 11]);<\/p>\n

WebAssembly.compile(wasmCode).then(wasmModule =><\/p>\n

WebAssembly.instantiate(wasmModule, g_importObject)<\/p>\n

).then(instance =><\/p>\n

\/\/Warning: No underscore character when using WasmFiddle
alert(instance.exports.add(1, 2))<\/p>\n

);<\/p>\n<\/blockquote>\n

Note: WasmFiddle shows the use of WebAssembly.Module in the top-right pane but that is not recommended because that compiles the module synchronously. The recommended way to compile a module is by using the asynchronous WebAssembly.Compile method as shown in our example above.<\/p>\n

If you\u2019d like to know more about WebAssembly, the following are a few articles that might be of interest:<\/p>\n