Hello World In Web Assembly

3 min readFeb 12, 2023

Before we get to the project, let’s explore what Web Assembly actually is. According to webassembly.org, Web Assembly, (Wasm) is a binary instruction format and virtual machine that allows developers to bring nearly any application to the web with near-native performance. Before Wasm, JavaScript was the only programming language available for web apps but in 2015 Google, Mozilla, Microsoft, Apple, and other tech companies announced a new project.

In 2017, the first stable version of Wasm was released with the goal of enabling high-performance applications on the web. An important note however is that Wasm is not meant to replace JavaScript but rather work side-by-side. An example of this would be an HTML/CSS/JavaScript app with some modules such as video processing, animation, compression, etc. developed with WebAssembly for performance enhancement.

The reason Wasm is so efficient compared to JavaScript is that JavaScript apps require so much abstraction from the CPU whereas Wasm can be compiled into bytecode that is then read by JavaScript and run on the browser at a much lower level. A real-world example of an application using JavaScript and Wasm is Figma, a popular collaborative application for design work.

Moving onto the project, let’s first install Emscripten from their git repository. Emscripten will compile C into Wasm code. I will be using MacOS for this project. If you want to follow along using Windows, use this link. To Begin, open your terminal and clone down Emscripten with:

git clone https://github.com/emscripten-core/emsdk.git

Next, let’s cd into the emsdk directory and git pull to get the latest version.

cd emsdk
git pull

To download and install the latest SDK tools run:

./emsdk install latest

We then need to make the latest SDK active for the current user. To do this run:

./emsdk activate latest

Finally, let’s activate the PATH and other environment variables with:

source ./emsdk_env.sh

Now it’s time to cd into our project directory and activate the environment for the current session. Note: you have to do this every time you open up a new terminal. To do this run:

emsdk activate

To verify that everything worked run:

emcc -v

As of writing this, the current version is 17.0.0.

Now it’s time to actually write some code! Open up the project directory in your text editor and create a helloWasm.c file. If you don’t know how to write C (like me) then just copy the following code and paste it into your file.

#include <stdio.h>

int main() 
{
  printf("Hello Web Assembly!\n");

  return 0;
}

After that let’s go back to the terminal and run:

emcc helloWasm.c

Looking back in your text editor, you should see two new files: a.out.js and a.out.wasm. The .wasm file is your binary file. You can’t view it in your text editor but if you want to view it you can go to wasm2wat and drag and drop your file into the browser. The .js file is used to communicate with the .wasm file. Next, let’s create an html file and name it a.out.html and type out your boilerplate html (or copy it from below). Make sure it has a script tag referencing a.out.js.

<!DOCTYPE html>
<html>
  <head>
    <title>Wasm demo</title>
  </head>
  <body>
    <script src="a.out.js"></script>
  </body>
</html>

Now it’s time to go live! JavaScript can’t access our C file locally so it has to be done through a server. For this, I am using the Live Server extension for VS Code. Right click on your html file and click “Open with Live Server.” You should see a blank page. Right-click anywhere and open up the browser console to see your message printed.

The cool thing about Wasm is it’s not just for running in the browser. If you have Node.js installed, you can run it on your machine. To do this, go back to your terminal and run:

node a.out.js

Thanks for reading and I hope you find Wasm interesting! For more information please check out:

Hello World In Web Assembly

Written by Michael Gandolfi