0Pricing
WebAssembly (WASM) for High Performance Apps · Lesson

Compiling C/C++ to WASM with Emscripten

Set up your environment and compile your first C/C++ program into a WebAssembly module using the Emscripten toolchain.

Compiling C/C++ to WASM with Emscripten is a free WebAssembly (WASM) for High Performance Apps lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the WebAssembly (WASM) for High Performance Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Meet Emscripten!

Welcome! Today, we'll learn to compile C/C++ code into WebAssembly (WASM). The key tool for this is Emscripten.

Emscripten is a complete toolchain that takes C/C++ code and compiles it into WASM, along with "glue" JavaScript code to help run it in a web browser or Node.js environment.

Bridging C/C++ to WASM

Why Emscripten? Browsers don't understand C/C++ directly. Emscripten acts as a powerful translator.

  • It compiles your C/C++ into the efficient WASM binary format.
  • It generates JavaScript "glue" code to load the WASM module and interact with it from JavaScript.
  • It handles C/C++ standard library functions (like printf) by providing JavaScript equivalents.

Setting Up Emscripten

Setting up Emscripten involves downloading the Emscripten SDK (emsdk). This SDK contains everything you need: the emcc compiler, Node.js, Python, and other utilities.

Typically, you'd run commands like:

  • git clone https://github.com/emscripten-core/emsdk.git
  • cd emsdk
  • ./emsdk install latest
  • ./emsdk activate latest

This prepares your environment to use emcc.

A Simple C Function

Let's start with a very simple C program. This program defines a function add and calls it from main. We'll compile this into WASM.

 #include <stdio.h>

// A simple C function to add two numbers
int add(int a, int b) {
    return a + b;
}

int main() {
    int result = add(5, 7);
    printf("Result of add(5, 7): %d\n", result);
    return 0;
}

The `emcc` Command

The heart of Emscripten is the emcc compiler. It's a drop-in replacement for gcc or clang that knows how to target WebAssembly.

You'll use emcc just like you would a standard C/C++ compiler, but with specific flags to control the WASM output.

Compiling Our C Code

Now, let's compile our add.c file. We'll tell emcc to output a JavaScript file that includes the compiled WASM module.

The command -o add.js tells Emscripten to create add.js (the glue code) and add.wasm (the binary module).

emcc add.c -o add.js -s EXPORTED_FUNCTIONS="['_add']" -s EXPORT_ES6=1

The Generated Files

After running the emcc command, you'll find two main files:

  • add.wasm: This is the actual WebAssembly binary module. It contains the compiled add function in a highly optimized, compact format.
  • add.js: This is the JavaScript "glue" code. It's responsible for loading add.wasm, setting up the WASM environment, and providing an interface to call functions exported from the WASM module.

What the Glue Does

The generated JavaScript glue code (e.g., add.js) is crucial. It handles:

  • Fetching and instantiating the .wasm file.
  • Setting up the WASM module's memory.
  • Converting JavaScript types to WASM types and vice-versa.
  • Providing an object (often named Module) to interact with the WASM module's exported functions.

This allows you to seamlessly call your C functions from JavaScript.

Optimizing Your WASM

Emscripten allows you to optimize your WASM output for size and speed. This is crucial for web performance.

You can use optimization flags similar to gcc:

  • -O0: No optimizations (fastest compile time).
  • -O1, -O2: Standard optimizations.
  • -O3: Aggressive optimizations (slower compile, smaller/faster code).
  • -Os: Optimize for size.
  • -Oz: Optimize aggressively for smallest size.

For production, emcc -O3 or emcc -Oz are common choices.

Quick Check: Emscripten

You've learned about Emscripten and its role. Let's test your understanding!

Recap: Compiling C/C++

In this lesson, you've taken your first step into WebAssembly with C/C++!

  • We introduced Emscripten as the toolchain for compiling C/C++ to WASM.
  • You saw how emcc compiles C code into .wasm and .js glue files.
  • We discussed the purpose of both the WASM binary and the JavaScript glue code.
  • You learned about basic optimization flags for emcc.

Next, we'll dive into how to load and run these WASM modules in a web browser using JavaScript!

Frequently asked questions

Is the “Compiling C/C++ to WASM with Emscripten” lesson free?

Yes — the full text of “Compiling C/C++ to WASM with Emscripten” is free to read here on the web, and the WebAssembly (WASM) for High Performance Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the WebAssembly (WASM) for High Performance Apps course, upgrade to CoddyKit PRO.

What will I learn in “Compiling C/C++ to WASM with Emscripten”?

Set up your environment and compile your first C/C++ program into a WebAssembly module using the Emscripten toolchain. You practise WebAssembly (WASM) for High Performance Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start WebAssembly (WASM) for High Performance Apps?

No prior experience is required. WebAssembly (WASM) for High Performance Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Compiling C/C++ to WASM with Emscripten” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this WebAssembly (WASM) for High Performance Apps lesson?

Yes. Every WebAssembly (WASM) for High Performance Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. Compiling C/C++ to WASM with Emscripten
  2. Loading & Running WASM in JavaScript
  3. Basic Data Exchange: Primitives
  4. Calling JavaScript Functions from C/C++
← Back to WebAssembly (WASM) for High Performance Apps