diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
new file mode 100644
index 00000000000..1caf9d09b51
--- /dev/null
+++ b/.devcontainer/devcontainer.json
@@ -0,0 +1,13 @@
+{
+	"image": "mcr.microsoft.com/devcontainers/rust:0-1-bullseye",
+  	// Configure tool-specific properties.
+	"customizations": {
+		// Configure properties specific to VS Code.
+		"vscode": {
+			"settings": {},
+			"extensions": [
+				"streetsidesoftware.code-spell-checker"
+			]
+		}
+	}
+}
diff --git a/Cargo.lock b/Cargo.lock
index 8b65dd36403..c901b83df55 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -2,6 +2,21 @@
 # It is not intended for manual editing.
 version = 3
 
+[[package]]
+name = "addr2line"
+version = "0.20.0"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f4fa78e18c64fce05e902adecd7a5eed15a5e0a3439f7b0e169f0252214865e3"
+dependencies = [
+ "gimli",
+]
+
+[[package]]
+name = "adler"
+version = "1.0.2"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "f26201604c87b1e01bd3d98f8d5d9a8fcbb815e8cedb41ffccbeb4bf593a35fe"
+
 [[package]]
 name = "aho-corasick"
 version = "0.7.20"
@@ -103,6 +118,21 @@ version = "1.1.0"
 source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "d468802bab17cbc0cc575e9b053f41e72aa36bfa6b7f55e3529ffa43161b97fa"
 
+[[package]]
+name = "backtrace"
+version = "0.3.68"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "4319208da049c43661739c5fade2ba182f09d1dc2299b32298d3a31692b17e12"
+dependencies = [
+ "addr2line",
+ "cc",
+ "cfg-if",
+ "libc",
+ "miniz_oxide",
+ "object",
+ "rustc-demangle",
+]
+
 [[package]]
 name = "base64"
 version = "0.13.1"
@@ -277,6 +307,16 @@ dependencies = [
  "windows-sys 0.45.0",
 ]
 
+[[package]]
+name = "console_error_panic_hook"
+version = "0.1.7"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "a06aeb73f470f66dcdbf7223caeebb85984942f22f1adb2a088cf9668146bbbc"
+dependencies = [
+ "cfg-if",
+ "wasm-bindgen",
+]
+
 [[package]]
 name = "convert_case"
 version = "0.4.0"
@@ -702,6 +742,12 @@ dependencies = [
  "wasi 0.11.0+wasi-snapshot-preview1",
 ]
 
+[[package]]
+name = "gimli"
+version = "0.27.3"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "b6c80984affa11d98d1b88b66ac8853f143217b399d3c74116778ff8fdb4ed2e"
+
 [[package]]
 name = "gitignore"
 version = "1.0.7"
@@ -1050,9 +1096,9 @@ checksum = "e2abad23fbc42b3700f2f279844dc832adb2b2eb069b2df918f455c4e18cc646"
 
 [[package]]
 name = "libc"
-version = "0.2.140"
+version = "0.2.147"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "99227334921fae1a979cf0bfdfcc6b3e5ce376ef57e16fb6fb3ea2ed6095f80c"
+checksum = "b4668fb0ea861c1df094127ac5f1da3409a82116a4ba74fca2e58ef927159bb3"
 
 [[package]]
 name = "link-cplusplus"
@@ -1187,6 +1233,15 @@ dependencies = [
  "unicase",
 ]
 
+[[package]]
+name = "miniz_oxide"
+version = "0.7.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "e7810e0be55b428ada41041c41f32c9f1a42817901b4ccf45fa3d4b6561e74c7"
+dependencies = [
+ "adler",
+]
+
 [[package]]
 name = "mio"
 version = "0.8.6"
@@ -1286,6 +1341,15 @@ dependencies = [
  "libc",
 ]
 
+[[package]]
+name = "object"
+version = "0.31.1"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "8bda667d9f2b5051b8833f59f3bf748b28ef54f850f4fcb389a252aa383866d1"
+dependencies = [
+ "memchr",
+]
+
 [[package]]
 name = "once_cell"
 version = "1.17.1"
@@ -1586,6 +1650,18 @@ dependencies = [
  "unicode-ident",
 ]
 
+[[package]]
+name = "project"
+version = "0.1.0"
+dependencies = [
+ "console_error_panic_hook",
+ "js-sys",
+ "tokio",
+ "wasm-bindgen",
+ "wasm-bindgen-futures",
+ "web-sys",
+]
+
 [[package]]
 name = "pulldown-cmark"
 version = "0.9.2"
@@ -1771,6 +1847,12 @@ dependencies = [
  "winreg",
 ]
 
+[[package]]
+name = "rustc-demangle"
+version = "0.1.23"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "d626bb9dae77e28219937af045c257c28bfd3f69333c512553507f5f9798cb76"
+
 [[package]]
 name = "rustc_version"
 version = "0.4.0"
@@ -2184,11 +2266,12 @@ checksum = "1f3ccbac311fea05f86f61904b462b55fb3df8837a366dfc601a0161d0532f20"
 
 [[package]]
 name = "tokio"
-version = "1.28.1"
+version = "1.29.1"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "0aa32867d44e6f2ce3385e89dceb990188b8bb0fb25b0cf576647a6f98ac5105"
+checksum = "532826ff75199d5833b9d2c5fe410f29235e25704ee5f0ef599fb51c21f4a4da"
 dependencies = [
  "autocfg",
+ "backtrace",
  "bytes",
  "libc",
  "mio",
@@ -2495,6 +2578,8 @@ source = "registry+https://github.com/rust-lang/crates.io-index"
 checksum = "31f8dcbc21f30d9b8f2ea926ecb58f6b91192c17e9d33594b3df58b2007ca53b"
 dependencies = [
  "cfg-if",
+ "serde",
+ "serde_json",
  "wasm-bindgen-macro",
 ]
 
diff --git a/Cargo.toml b/Cargo.toml
index 7f1b06da21c..57ba757817b 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -5,4 +5,5 @@ members = [
   "src/bare-metal/useful-crates/allocator-example",
   "src/bare-metal/useful-crates/zerocopy-example",
   "src/exercises/concurrency/chat-async",
+  "src/rust-wasm-template",
 ]
diff --git a/src/SUMMARY.md b/src/SUMMARY.md
index ddcd83b6151..71b08b6c529 100644
--- a/src/SUMMARY.md
+++ b/src/SUMMARY.md
@@ -1,6 +1,7 @@
 # Summary
 
 [Welcome to Comprehensive Rust 🦀](welcome.md)
+
 - [Running the Course](running-the-course.md)
   - [Course Structure](running-the-course/course-structure.md)
   - [Keyboard Shortcuts](running-the-course/keyboard-shortcuts.md)
@@ -10,10 +11,9 @@
   - [Code Samples](cargo/code-samples.md)
   - [Running Cargo Locally](cargo/running-locally.md)
 
-
 # Day 1: Morning
 
-----
+---
 
 - [Welcome](welcome-day-1.md)
   - [What is Rust?](welcome-day-1/what-is-rust.md)
@@ -67,10 +67,9 @@
   - [Storing Books](exercises/day-1/book-library.md)
   - [Iterators and Ownership](exercises/day-1/iterators-and-ownership.md)
 
-
 # Day 2: Morning
 
-----
+---
 
 - [Welcome](welcome-day-2.md)
 - [Structs](structs.md)
@@ -120,10 +119,9 @@
   - [Luhn Algorithm](exercises/day-2/luhn.md)
   - [Strings and Iterators](exercises/day-2/strings-iterators.md)
 
-
 # Day 3: Morning
 
-----
+---
 
 - [Welcome](welcome-day-3.md)
 - [Generics](generics.md)
@@ -177,10 +175,9 @@
 - [Exercises](exercises/day-3/afternoon.md)
   - [Safe FFI Wrapper](exercises/day-3/safe-ffi-wrapper.md)
 
-
 # Android
 
-----
+---
 
 - [Welcome](android.md)
 - [Setup](android/setup.md)
@@ -203,10 +200,9 @@
   - [With Java](android/interoperability/java.md)
 - [Exercises](exercises/android/morning.md)
 
-
 # Bare Metal: Morning
 
-----
+---
 
 - [Welcome](bare-metal.md)
 - [no_std](bare-metal/no_std.md)
@@ -253,10 +249,9 @@
 - [Exercises](exercises/bare-metal/afternoon.md)
   - [RTC Driver](exercises/bare-metal/rtc.md)
 
-
 # Concurrency: Morning
 
-----
+---
 
 - [Welcome](concurrency.md)
 - [Threads](concurrency/threads.md)
@@ -297,19 +292,39 @@
   - [Dining Philosophers](exercises/concurrency/dining-philosophers-async.md)
   - [Broadcast Chat Application](exercises/concurrency/chat-app.md)
 
+# WebAssembly
+
+---
+
+- [WebAssembly basics](webassembly.md)
+- [Load a Wasm module](webassembly/load-wasm-module.md)
+- [Expose a method](webassembly/expose-method.md)
+- [Import Method](webassembly/import-method.md)
+  - [web-sys](webassembly/import-method/web-sys.md)
+- [Expose user-defined Rust types](webassembly/expose-rust-type.md)
+- [Import user-defined Javascript types](webassembly/import-js-type.md)
+- [Error handling](webassembly/error-handling.md)
+  - [Error handling for imported methods](webassembly/error-handling/imported-methods.md)
+  - [Error handling for exported methods](webassembly/error-handling/exported-methods.md)
+- [Limitations](webassembly/limitations.md)
+  - [Borrow Checker](webassembly/limitations/borrow-checker.md)
+  - [Closures](webassembly/limitations/closures.md)
+- [Async](webassembly/async.md)
+- [Exercises](exercises/webassembly/webassembly.md)
+  - [Camera](exercises/webassembly/camera.md)
+  - [Game Of Life](exercises/webassembly/game-of-life.md)
 
 # Final Words
 
-----
+---
 
 - [Thanks!](thanks.md)
 - [Other Resources](other-resources.md)
 - [Credits](credits.md)
 
-
 # Solutions
 
-----
+---
 
 - [Solutions](exercises/solutions.md)
   - [Day 1 Morning](exercises/day-1/solutions-morning.md)
@@ -322,3 +337,6 @@
   - [Bare Metal Rust Afternoon](exercises/bare-metal/solutions-afternoon.md)
   - [Concurrency Morning](exercises/concurrency/solutions-morning.md)
   - [Concurrency Afternoon](exercises/concurrency/solutions-afternoon.md)
+  - [Webassembly](exercises/webassembly/webassembly.md)
+    - [Camera](exercises/webassembly/solutions-camera.md)
+    - [Game Of Life](exercises/webassembly/solutions-game-of-life.md)
\ No newline at end of file
diff --git a/src/exercises/webassembly/camera.md b/src/exercises/webassembly/camera.md
new file mode 100644
index 00000000000..a926a5d7d0e
--- /dev/null
+++ b/src/exercises/webassembly/camera.md
@@ -0,0 +1,50 @@
+# Camera
+
+In this exercise we will play with the camera in real time.
+
+Serve the web server and navigate to [http://localhost:8000/exercises/camera/](http://localhost:8000/exercises/camera/).
+
+You will edit [lib.rs](../../rust-wasm-template/lib.rs) as usual.
+
+Here is the basic code you will need:
+
+```rust
+extern crate console_error_panic_hook;
+
+use js_sys::Uint8ClampedArray;
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+
+    #[wasm_bindgen(js_namespace = console)]
+    pub fn log(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn setup() {
+    console_error_panic_hook::set_once();
+}
+
+#[wasm_bindgen]
+pub fn edit_bitmap(image_data: &Uint8ClampedArray, width: u32, height: u32) {
+}
+
+```
+
+We want to edit the function `edit_bitmap`. `image_data` is a reference to the [Uint8ClampedArray](https://rustwasm.github.io/wasm-bindgen/api/js_sys/struct.Uint8ClampedArray.html) being rendered on your screen. `Uint8ClampedArray` is a flat array of unsigned int of `8` bits.
+It represents _srgb_ image, which means that each pixel is represented as a vector of 4 elements [red, green, blue, illumination].
+The image can be thought of as a matrix of dimension `(width, height, 4)`, it is row-major.
+
+We will reuse our different implementations. So do not erase them when going from one exercise to the next.
+
+First off let's implement some methods that modify the video live:
+
+1. Paint the top half the image to black.
+2. Paint the left half of the image to white.
+3. Create an X-ray effect. This is done by mapping colors to their opposite, for instance `0<->255`, `100<->155`. Beware of illumination.
+4. _Bonus question:_  Now feel free to implement other transformations such as _greyscale_ or adding _random noise_.
+5. Let's now add functionalities to our page. In the _setup_ function create a dropdown (`<select>`) that will change which transformation to apply to the image.
+6. _Bonus question:_ Track moving objects. This can be done by figuring out only the pixels that didn't change between multiple frames. For instance, you could compute the standard deviation of the pixel and black out below a threshold.
+While this can be achieved without touching Javascript, I recommend editing it.
diff --git a/src/exercises/webassembly/game-of-life.md b/src/exercises/webassembly/game-of-life.md
new file mode 100644
index 00000000000..ffd4ecff081
--- /dev/null
+++ b/src/exercises/webassembly/game-of-life.md
@@ -0,0 +1,41 @@
+# Game of life exercise
+
+The goal of this exercise is to implement [John Conway's Game Of Life](https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life).
+
+Serve the web server and navigate to [http://localhost:8000/exercises/game_of_life/](http://localhost:8000/exercises/game_of_life/).
+
+You will edit [lib.rs](../../rust-wasm-template/lib.rs) as usual.
+
+Here is the basic code you will need:
+
+```rust
+extern crate console_error_panic_hook;
+
+use wasm_bindgen::prelude::*;
+use web_sys::HtmlCanvasElement;
+
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+
+    #[wasm_bindgen(js_namespace = console)]
+    pub fn log(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn setup() {
+    console_error_panic_hook::set_once();
+}
+```
+
+1. Let's create a `GameOfLife` struct that segments the canvas into cells of dimensions `10x10` pixels. Cells can be
+   either dead or alive.
+2. Use the struct to paint every alive cells with and dead cells black. To test this, make every other cell alive.
+3. Randomly change every cell's status to dead or alive, multiple times per second.
+4. Using Javascript and Rust; Create a button that triggers the start of the game and allows stopping/restarting it.
+5. Implement the rules of game of life:
+    1. Any live cell with fewer than two live neighbours dies, as if by underpopulation.
+    2. Any live cell with two or three live neighbours lives on to the next generation.
+    3. Any live cell with more than three live neighbours dies, as if by overpopulation.
+    4. Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
+6. Create an event listener to manually kill or revive cells on click.
\ No newline at end of file
diff --git a/src/exercises/webassembly/solutions-camera.md b/src/exercises/webassembly/solutions-camera.md
new file mode 100644
index 00000000000..3b5bfbe4671
--- /dev/null
+++ b/src/exercises/webassembly/solutions-camera.md
@@ -0,0 +1,170 @@
+# Camera exercise solution
+
+1. The first exercise is to turn the top half the image to black.
+```rust
+#[wasm_bindgen]
+pub fn edit_bitmap(image_data: &Uint8ClampedArray, width: u32, height: u32) {
+    for i in 0..image_data.length() / 2 {
+        image_data.set_index(i, 0);
+    }
+}
+
+```
+
+2. The second exercise is to turn the left half of the image to white.
+```rust
+#[wasm_bindgen]
+pub fn edit_bitmap(image_data: &Uint8ClampedArray, width: u32, height: u32) {
+    for i in 0..height {
+        for j in 0..(width * 4) / 2 {
+            image_data.set_index(i * 4 * width + j, 255);
+        }
+    }
+}
+```
+
+3. Create an X-ray effect. This is done by mapping colors to their opposite, for instance 0<->255, 100<->155. Beware of illumination.
+```rust
+#[wasm_bindgen]
+pub fn edit_bitmap(image_data: &Uint8ClampedArray, width: u32, height: u32) {
+    for i in 0..image_data.length() {
+        if i % 4 == 3 {
+            continue;
+        }
+        let pixel = image_data.get_index(i);
+        image_data.set_index(i, 255 - pixel);
+    }
+}
+```
+
+4. You can play with the function, for instance you can implement greyscale, or add random noise.
+5. In the `setup` function create a dropdown (`<select>`) that will change which transformation to apply to the image.
+```rust
+static METHODS: [&str; 3] = ["xray", "top-black", "left-white"];
+
+#[wasm_bindgen]
+pub fn setup() -> Result<(), JsValue> {
+    console_error_panic_hook::set_once();
+    let window = web_sys::window().expect("no global `window` exists");
+    let document = window.document().expect("should have a document on window");
+    let body = document.body().expect("document should have a body");
+
+    let select = document.create_element("select")?;
+    for option_value in METHODS {
+        let option = document.create_element("option")?;
+        option.set_inner_html(option_value);
+        option.set_attribute("value", option_value)?;
+        select.append_child(&option)?;
+    }
+    body.append_child(&select)?;
+    Ok(())
+}
+
+#[wasm_bindgen]
+pub fn edit_bitmap(
+    image_data: &Uint8ClampedArray,
+    width: u32,
+    height: u32,
+) -> Result<(), JsValue> {
+    let window = web_sys::window().expect("no global `window` exists");
+    let document = window.document().expect("should have a document on window");
+    let select = document
+        .query_selector("select")?
+        .expect("No select")
+        .dyn_into::<web_sys::HtmlSelectElement>()
+        .expect("Failed to cast <select>");
+    let selected_option = select.value();
+    match selected_option.as_str() {
+        "xray" => xray(image_data, width, height),
+        "top-black" => top_black(image_data, width, height),
+        "left-white" => left_white(image_data, width, height),
+        _ => (),
+    };
+    Ok(())
+}
+```
+
+6. Track moving objects. This can be done by figuring out only the pixels that didn't change between multiple frames. For instance, you could compute the standard deviation of the pixel and black out below a threshold.
+While this can be achieved without touching Javascript, I recommend editing it.
+```rust
+extern crate console_error_panic_hook;
+
+use js_sys::Uint8ClampedArray;
+use std::collections::VecDeque;
+use tokio::sync::mpsc::{channel, Receiver, Sender};
+use wasm_bindgen::{prelude::*, Clamped};
+use wasm_bindgen_futures::spawn_local;
+use web_sys::ImageData;
+
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+
+    #[wasm_bindgen(js_namespace = console)]
+    pub fn log(s: &str);
+}
+
+#[wasm_bindgen]
+pub struct FrameSender {
+    sdr: Sender<Uint8ClampedArray>,
+}
+
+#[wasm_bindgen]
+impl FrameSender {
+    pub fn send(&self, data: Uint8ClampedArray) -> Result<(), JsValue> {
+        self.sdr.try_send(data).map_err(|e| e.to_string().into())
+    }
+}
+
+async fn frame_processor(
+    mut image_data: Receiver<Uint8ClampedArray>,
+    canvas_ctx: web_sys::CanvasRenderingContext2d,
+) {
+    let mut deque: VecDeque<Vec<u8>> = VecDeque::new();
+    let mut current_data;
+    while let Some(image_data) = image_data.recv().await {
+        deque.push_back(image_data.to_vec());
+        if deque.len() < 10 {
+            continue;
+        }
+        let first = deque.pop_front().unwrap();
+        for (idx, v) in first.into_iter().enumerate() {
+            let pixels: Vec<f32> = deque
+                .iter()
+                .map(|image| image[idx] as f32)
+                .chain(Some(v as f32))
+                .collect();
+            let mean = pixels.iter().fold(0.0, |a, b| a + *b) / pixels.len() as f32;
+            let variance = pixels.iter().fold(0.0, |a, b| a + (b - mean).powi(2))
+                / pixels.len() as f32;
+            if variance.sqrt() < 8.0 && idx % 4 != 3 {
+                image_data.set_index(idx as u32, 0);
+            }
+        }
+        current_data = image_data.to_vec();
+        canvas_ctx
+            .put_image_data(
+                &ImageData::new_with_u8_clamped_array(Clamped(&current_data), 400)
+                    .unwrap(),
+                0.0,
+                0.0,
+            )
+            .unwrap();
+    }
+}
+
+#[wasm_bindgen]
+pub fn setup(
+    canvas_ctx: web_sys::CanvasRenderingContext2d,
+) -> Result<FrameSender, JsValue> {
+    console_error_panic_hook::set_once();
+
+    let (sdr, rcv) = channel(2);
+    let sender = FrameSender { sdr };
+    spawn_local(async move {
+        frame_processor(rcv, canvas_ctx).await;
+    });
+    Ok(sender)
+}
+
+```
\ No newline at end of file
diff --git a/src/exercises/webassembly/solutions-game-of-life.md b/src/exercises/webassembly/solutions-game-of-life.md
new file mode 100644
index 00000000000..e2b061a91c1
--- /dev/null
+++ b/src/exercises/webassembly/solutions-game-of-life.md
@@ -0,0 +1,190 @@
+# Solutions for the Game Of Life exercise
+
+1. Let's create a `GameOfLife` struct that segments the canvas into cells of dimensions `10x10` pixels. Cells can be
+   either dead or alive.
+
+```rust
+struct GameOfLife {
+    ctx: CanvasRenderingContext2d,
+    width: i32,
+    height: i32,
+    // true == alive, false == dead
+    cells: Vec<bool>,
+}
+
+impl GameOfLife {
+    fn new(ctx: CanvasRenderingContext2d, width: i32, height: i32) -> Self {
+        let mut cells = vec![false; (width * height) as usize / 10];
+        cells.iter_mut().step_by(2).for_each(|cell| *cell = true);
+        Self {
+            ctx,
+            width,
+            height,
+            cells,
+        }
+    }
+}
+```
+
+2. Use the struct to paint every alive cells with and dead cells black. To test this, make every other cell alive.
+
+```rust
+    // In impl GameOfLife
+    fn draw(&self) {
+        self.ctx
+            .clear_rect(0.0, 0.0, self.width as f64, self.height as f64);
+        self.ctx.set_fill_style(&JsValue::from_str("white"));
+        for (i, cell) in self.cells.iter().enumerate() {
+            if *cell {
+                let x = (i % (self.width as usize / 10)) as f64 * 10.0;
+                let y = (i / (self.width as usize / 10)) as f64 * 10.0;
+                self.ctx.fill_rect(x, y, 10.0, 10.0);
+            }
+        }
+    }
+```
+
+3. 4 times per second, randomly change every cell's status to dead or alive.
+
+```rust
+    #[wasm_bindgen]
+    extern "C" {
+        fn setInterval(closure: &Closure<dyn FnMut()>, millis: u32) -> f64;
+    }
+
+    #[wasm_bindgen]
+    pub struct GameOfLifeHandle {
+        closure: Closure<dyn FnMut()>,
+    }
+
+    // In impl GameOfLife
+    fn game_logic(&mut self) {
+        for cell in &mut self.cells {
+            let rand = js_sys::Math::random();
+            if rand > 0.5 {
+                *cell = true;
+            } else {
+                *cell = false;
+            }
+        }
+    }
+
+    pub fn start(mut self) -> GameOfLifeHandle {
+        let closure = Closure::wrap(Box::new(move || {
+            self.game_logic();
+            self.draw();
+        }) as Box<dyn FnMut()>);
+        setInterval(&closure, 250);
+        GameOfLifeHandle { closure }
+    }
+```
+
+4. Using Javascript and Rust; Create a button that triggers the start of the game and allows stopping it.
+
+
+```javascript
+import init, {setup, GameOfLife} from '/wasm/project.js';
+
+
+(async () => { 
+    // Run the init method to initiate the WebAssembly module.
+    await init();
+    setup();
+    const canvas = document.getElementById('game-of-life-canvas');
+    const ctx = canvas.getContext('2d');
+    const game = new GameOfLife(ctx, canvas.width, canvas.height);
+    const startButton = document.createElement('button');
+    document.body.appendChild(startButton);
+    let handle = null;
+    let playing = false;
+    startButton.addEventListener('click', () => {
+        if (handle === null) {
+            handle = game.start();
+            playing = true;
+        } else {
+            handle.stop_or_start();
+            playing = !playing;
+        }
+        startButton.textContent = playing ? 'STOP' : 'START';
+    });
+})();
+
+```
+
+```rust
+#[wasm_bindgen]
+extern "C" {
+    fn setInterval(closure: &Closure<dyn FnMut()>, millis: u32) -> f64;
+    fn clearInterval(token: f64);
+}
+
+#[wasm_bindgen]
+pub struct GameOfLifeHandle {
+    closure: Closure<dyn FnMut()>,
+    interval: Option<f64>,
+}
+
+#[wasm_bindgen]
+impl GameOfLifeHandle {
+    pub fn stop_or_start(&mut self) {
+        if let Some(interval) = self.interval.take() {
+            clearInterval(interval);
+        } else {
+            let interval = setInterval(&self.closure, 250);
+            self.interval = Some(interval);
+        }
+    }
+}
+```
+
+5. Implement the rules of game of life
+
+```rust
+    fn alive_neighbour_count(&self, idx: i32) -> usize {
+        let mut alive_count = 0;
+        let (width, height) = (self.width as i32 / 10, self.height as i32 / 10);
+        let x = idx % width;
+        let y = idx / width;
+        for i in -1..=1 {
+            for j in -1..=1 {
+                if i == 0 && j == 0 {
+                    continue;
+                }
+                let x = x as i32 + i;
+                let y = y as i32 + j;
+                if x < 0 || x >= width || y < 0 || y >= height {
+                    continue;
+                }
+                let idx = (x + y * self.width) as usize;
+                if self.cells[idx] {
+                    alive_count += 1;
+                }
+            }
+        }
+        alive_count
+    }
+
+    fn game_logic(&mut self) {
+        let mut new_cells = self.cells.clone();
+        for idx in 0..self.cells.len() {
+            let alive_count = self.alive_neighbour_count(idx as i32);
+            // Rule 1
+            if self.cells[idx] && alive_count < 2 {
+                new_cells[idx] = false;
+            }
+            // Rule 2
+            if self.cells[idx] && (alive_count == 2 || alive_count == 3) {
+                new_cells[idx] = true;
+            }
+            // Rule 3
+            if self.cells[idx] && alive_count > 3 {
+                new_cells[idx] = false;
+            }
+            // Rule 4
+            if !self.cells[idx] && alive_count == 3 {
+                new_cells[idx] = true;
+            }
+        }
+        self.cells = new_cells;
+    }
+```
\ No newline at end of file
diff --git a/src/exercises/webassembly/webassembly.md b/src/exercises/webassembly/webassembly.md
new file mode 100644
index 00000000000..4e4fa01da53
--- /dev/null
+++ b/src/exercises/webassembly/webassembly.md
@@ -0,0 +1,13 @@
+# Exercises
+
+There are two exercises for Webassembly, they both live in their own repository inside of
+[rust-wasm-template](../rust-wasm-template).
+
+- [The Camera Exercise](camera.md) will give you access to the camera on your computer and offer you to
+  apply transformations on the frames it captures.
+- [The Game Of Life Exercise](game-of-life.md) will have you implement _John Conway's Game Of Life_ using Webassembly.
+
+You can find the solutions here:
+
+- [Camera](solutions-camera.md)
+- [Game Of Life](solutions-game-of-life.md)
diff --git a/src/rust-wasm-template/Cargo.toml b/src/rust-wasm-template/Cargo.toml
new file mode 100644
index 00000000000..fb9cf65e4c0
--- /dev/null
+++ b/src/rust-wasm-template/Cargo.toml
@@ -0,0 +1,36 @@
+[package]
+name = "project"
+version = "0.1.0"
+edition = "2021"
+publish = false
+
+
+[lib]
+crate-type = ["cdylib", "rlib"]
+
+[dependencies]
+wasm-bindgen = { version = "0.2.74", features = ["serde-serialize"] }
+wasm-bindgen-futures = "0.4.24"
+js-sys = "0.3.51"
+# The `console_error_panic_hook` crate provides better debugging of panics by
+# logging them with `console.error`. This is great for development, but requires
+# all the `std::fmt` and `std::panicking` infrastructure, so isn't great for
+# code size when deploying.
+console_error_panic_hook = "0.1.7"
+tokio = { version = "1.29.1", features = ["sync"] }
+
+[dependencies.web-sys]
+version = "0.3.4"
+features = [
+  'CanvasRenderingContext2d',
+  'CssStyleDeclaration',
+  'Document',
+  'Element',
+  'ImageData',
+  'HtmlCanvasElement',
+  'HtmlElement',
+  'HtmlSelectElement',
+  'Node',
+  'Response',
+  'Window',
+]
diff --git a/src/rust-wasm-template/README.md b/src/rust-wasm-template/README.md
new file mode 100644
index 00000000000..d457f258be4
--- /dev/null
+++ b/src/rust-wasm-template/README.md
@@ -0,0 +1,60 @@
+# rust-wasm-template
+
+This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and Wasm as well as the javascript boilerplate needed to load Wasm.
+
+- `static` contains the static files including compiled webassembly.
+- `src/lib.rs` contains the Rust code.
+
+## Installation
+
+### Rust
+
+Recommended:
+```
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+```
+
+Alternatively, see the [installation page](https://www.rust-lang.org/tools/install).
+
+### wasm-pack
+
+Recommended:
+```
+curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
+```
+
+Alternatively, see the [installation page](https://rustwasm.github.io/wasm-pack/installer/).
+
+## Run the local server
+
+If you have Python on your machine, you can simply
+
+```
+cd rust-wasm-template/static
+
+python3 -m http.server
+```
+
+Otherwise a Rust alternative exists and you can install it with
+
+```
+cargo install cargo-server
+```
+
+And run
+
+```
+cd rust-wasm-template/static
+
+cargo server
+```
+
+Visit http://localhost:8000
+
+## Build Wasm and copy target to the correct path
+
+```
+wasm-pack build --target web --out-dir static/wasm                                     
+```
+
+This command needs to be re-run to view your latest changes.
diff --git a/src/rust-wasm-template/src/lib.rs b/src/rust-wasm-template/src/lib.rs
new file mode 100644
index 00000000000..d0af5ebec15
--- /dev/null
+++ b/src/rust-wasm-template/src/lib.rs
@@ -0,0 +1,25 @@
+extern crate console_error_panic_hook;
+
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+
+    #[wasm_bindgen(js_namespace = console)]
+    pub fn log(s: &str);
+}
+
+#[wasm_bindgen]
+pub fn set_panic_hook() {
+    // Generates better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    console_error_panic_hook::set_once();
+}
+
+#[wasm_bindgen]
+pub fn add(a: i32, b: i32) -> i32 {
+    a + b
+}
diff --git a/src/rust-wasm-template/static/exercises/camera/index.html b/src/rust-wasm-template/static/exercises/camera/index.html
new file mode 100644
index 00000000000..bf31ff5f9c9
--- /dev/null
+++ b/src/rust-wasm-template/static/exercises/camera/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Comprehensive Rust 🦀 camera exercise</title>
+    <link rel="stylesheet" href="/index.css">
+    <style>
+        video, canvas {
+            width: 400px;
+            height: 400px;
+            display: block;
+            background-color: black;
+        }
+
+        select {
+            position: fixed;
+            left: 50%;
+            bottom: 50%;
+        }
+    </style>
+</head>
+<body>
+<h1>
+    Comprehensive Rust 🦀 camera exercise
+</h1>
+<video src=""></video>
+<canvas></canvas>
+<script type="module" src="/exercises/camera/index.mjs"></script>
+</body>
+</html>
diff --git a/src/rust-wasm-template/static/exercises/camera/index.mjs b/src/rust-wasm-template/static/exercises/camera/index.mjs
new file mode 100644
index 00000000000..08a83501713
--- /dev/null
+++ b/src/rust-wasm-template/static/exercises/camera/index.mjs
@@ -0,0 +1,38 @@
+import init, {setup, edit_bitmap} from '/wasm/project.js';
+
+const renderCanvas = (ctx, video, bitmapConversionCanvas) => {
+    const bitmapconversionContext = bitmapConversionCanvas.getContext("2d");
+    requestAnimationFrame(async () => {
+        try {
+            bitmapconversionContext.drawImage(video, 0, 0);
+            const bitmap = bitmapconversionContext.getImageData(0, 0, 400, 400);
+            edit_bitmap(bitmap.data, 400, 400);
+            ctx.putImageData(bitmap, 0, 0);
+        } catch(e){
+            console.error(e);
+        } finally { 
+            renderCanvas(ctx, video, bitmapConversionCanvas, bitmapconversionContext);
+        }
+    });
+};
+
+const initCamera = async (video, canvas, bitmapConversionCanvas) => {
+    const stream = await navigator.mediaDevices.getUserMedia({video: {width: 400, height: 400}});
+    video.srcObject = stream;
+    video.onloadedmetadata = () => {
+        video.play();
+    };
+    canvas.width = 400;
+    canvas.height = 400;
+    renderCanvas(canvas.getContext("2d"), video, bitmapConversionCanvas);
+}
+
+(async () => { 
+    // Run the init method to initiate the WebAssembly module.
+    await init();
+    setup();
+    const video = document.querySelector("video");
+    const canvas = document.querySelector("canvas");
+    const bitmapConversionCanvas = new OffscreenCanvas(400, 400);
+    initCamera(video, canvas, bitmapConversionCanvas);
+})();
diff --git a/src/rust-wasm-template/static/exercises/game_of_life/index.html b/src/rust-wasm-template/static/exercises/game_of_life/index.html
new file mode 100644
index 00000000000..5a3314e1695
--- /dev/null
+++ b/src/rust-wasm-template/static/exercises/game_of_life/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Comprehensive Rust 🦀 Game Of Life exercise</title>
+    <link rel="stylesheet" href="/index.css">
+    <style>
+         canvas {
+            width: 1000px;
+            height: 800px;
+            display: block;
+            background-color: black;
+        }
+    </style>
+</head>
+<body>
+<h1>
+    Comprehensive Rust 🦀 Game Of Life exercise
+</h1>
+<button id="start-button">START</button>
+
+<canvas id="game-of-life-canvas" width="1000" height="800"></canvas>
+<script type="module" src="/exercises/game_of_life/index.mjs"></script>
+</body>
+</html>
diff --git a/src/rust-wasm-template/static/exercises/game_of_life/index.mjs b/src/rust-wasm-template/static/exercises/game_of_life/index.mjs
new file mode 100644
index 00000000000..88853009665
--- /dev/null
+++ b/src/rust-wasm-template/static/exercises/game_of_life/index.mjs
@@ -0,0 +1,11 @@
+import init, {setup} from '/wasm/project.js';
+
+
+(async () => { 
+    // Run the init method to initiate the WebAssembly module.
+    await init();
+    setup();
+    const canvas = document.getElementById('game-of-life-canvas');
+    const ctx = canvas.getContext('2d');
+    const game = new GameOfLife(ctx, canvas.width, canvas.height);
+})();
diff --git a/src/rust-wasm-template/static/index.css b/src/rust-wasm-template/static/index.css
new file mode 100644
index 00000000000..2601bf2cfa0
--- /dev/null
+++ b/src/rust-wasm-template/static/index.css
@@ -0,0 +1,78 @@
+@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro&display=swap');
+
+body {
+    background-color: #282c34;
+    font-family: 'Source Code Pro', monospace;
+}
+
+h1 {
+    margin-left: 40px;
+    max-width: 530px;
+    color: #ca6568;
+}
+
+i {
+    color: #ca6568;
+}
+
+p, ul {
+    margin-left: 40px;
+    max-width: 530px;
+    text-align: justify;
+    color: #99a0ab;
+}
+
+li {
+    color: #ca6568;
+    background-color: #31363f;
+    margin-bottom: 20px;
+    max-width: 470px;
+    padding: 10px;
+}
+
+a {
+    color: #5fade9;
+}
+
+button {
+    background-color: #99a0ab;
+    width: 200px;
+    padding: 5px 0;
+    margin-left: calc(50% - 100px - 11px);
+    border-radius: 5px;
+    border: 0;
+    cursor: pointer;
+    transition: 1s;
+}
+
+button:hover {
+    background-color: #282c34;
+    color: white;
+}
+
+input, select {
+    width: 150px;
+    padding: 5px;
+    background-color: #31363f;
+    border: 1px solid #99a0ab;
+    color: #99a0ab;
+    border-radius: 4px;
+}
+
+#wasmoutput {
+    background-color: aliceblue;
+    color: #282c34;
+    padding: 10px;
+    border-radius: 5px;
+    font-weight: bold;
+    cursor: pointer;
+    display: inline-block;
+    min-height: 1em;
+    min-width: 1em;
+}
+
+img {
+    width: 300px;
+    height: 300px;
+    object-fit: contain;
+}
diff --git a/src/rust-wasm-template/static/index.html b/src/rust-wasm-template/static/index.html
new file mode 100644
index 00000000000..fa61ecb1e98
--- /dev/null
+++ b/src/rust-wasm-template/static/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Comprehensive Rust 🦀 WebAssembly Template</title>
+    <link rel="stylesheet" href="/index.css">
+
+</head>
+<body>
+<h1>
+    Comprehensive Rust 🦀 WebAssembly Template
+</h1>
+<p>
+    This repository contains the minimum amount of code needed to experiment with WebAssembly. Including a web server to serve the HTML and Wasm as well as the javascript boilerplate needed to load Wasm.
+</p>
+<p>
+    Edit <a href="https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template/static/index.mjs">server/files/index.mjs</a> to edit the Javascript.
+</p>
+<p>
+Wasm output: <span id="wasmoutput" />
+</p>
+<script type="module" src="/index.mjs"></script>
+</body>
+</html>
diff --git a/src/rust-wasm-template/static/index.mjs b/src/rust-wasm-template/static/index.mjs
new file mode 100644
index 00000000000..15bc9a9836c
--- /dev/null
+++ b/src/rust-wasm-template/static/index.mjs
@@ -0,0 +1,8 @@
+import init, {set_panic_hook, add} from '/wasm/project.js';
+
+(async () => { 
+    // Run the init method to initiate the WebAssembly module.
+    await init();
+    set_panic_hook();
+    document.querySelector("#wasmoutput").innerHTML = add(1, 2);
+})();
diff --git a/src/webassembly.md b/src/webassembly.md
new file mode 100644
index 00000000000..fa81c4b4496
--- /dev/null
+++ b/src/webassembly.md
@@ -0,0 +1,11 @@
+# WebAssembly basics
+
+WebAssembly (Wasm) is a binary instruction format designed to bring more languages to web browsers (historically, Javascript was the only available choice.) Wasm is designed as a portable target for compilation of high-level languages like Rust, enabling it to be used in web applications. Wasm has also grown beyond its scope because it can be run in a number of use cases beyond the web, including [nodejs](https://nodejs.dev/en/learn/nodejs-with-webassembly/) or the [Ethereum WebAsssembly Runtime](https://ewasm.readthedocs.io/en/mkdocs/README/)
+
+Rust is often considered as one of the best languages to compile to WebAssembly due to its safety, performance, and rather expansive Wasm ecosystem.
+
+# Setting up the environment
+
+There are multiple frameworks to create Wasm libraries from Rust. We will focus on [wasm-pack](https://rustwasm.github.io/docs/wasm-pack/introduction.html) and [wasm-bindgen](https://rustwasm.github.io/wasm-bindgen/).
+
+WebAssembly needs to be run in a browser or a VM, therefore we will use a different set up for this class. Please navigate to [rust-wasm-template](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template) to view the installation instructions. Feel free to either clone the repository to run it locally, or open a new [Codespace on Github](https://codespaces.new/google/comprehensive-rust)
diff --git a/src/webassembly/async.md b/src/webassembly/async.md
new file mode 100644
index 00000000000..7af6d6a5310
--- /dev/null
+++ b/src/webassembly/async.md
@@ -0,0 +1,36 @@
+# Async
+
+Rust methods in WebAssembly can be declared async. 
+
+```rust
+use wasm_bindgen::prelude::*;
+use wasm_bindgen_futures::JsFuture;
+use web_sys::Response;
+
+#[wasm_bindgen]
+pub async fn get_current_page() -> Result<JsValue, JsValue> {
+    let window = web_sys::window().unwrap();
+    let resp_value = JsFuture::from(window.fetch_with_str("")).await?;
+    let resp: Response = resp_value.dyn_into().unwrap();
+    let text = JsFuture::from(resp.text()?).await?;
+    Ok(text)
+}
+```
+
+```javascript
+import init, { get_current_page} from '/wasm/project.js';
+
+(async () => { 
+    await init();
+    console.log(await get_current_page());
+})();
+
+```
+
+<details>
+
+- Async methods are scheduled on the Javascript event loop.
+- Instead of `tokio::spawn`, `wasm_bindgen` provides `wasm_bindgen_futures::spawn_local`.
+- We use `JsFuture::from` to convert Javascript futures to Rust futures that we can `.await`.
+
+</details>
\ No newline at end of file
diff --git a/src/webassembly/error-handling.md b/src/webassembly/error-handling.md
new file mode 100644
index 00000000000..de4bbcff52a
--- /dev/null
+++ b/src/webassembly/error-handling.md
@@ -0,0 +1,7 @@
+# Error handling
+
+In this chapter we cover error handling both on the Rust side for imported Javascript methods
+and on the Javascript side for imported Rust methods.
+
+- [Error handling for imported methods](error-handling/imported-methods.md)
+- [Error handling for exported methods](error-handling/exported-methods.md)
diff --git a/src/webassembly/error-handling/exported-methods.md b/src/webassembly/error-handling/exported-methods.md
new file mode 100644
index 00000000000..625e1a0a760
--- /dev/null
+++ b/src/webassembly/error-handling/exported-methods.md
@@ -0,0 +1,53 @@
+# Error handling
+
+`Result<T, E>` is translated to javascript errors. Methods directly exposed and called from Javascript that return a `Result`
+will automatically throw an error if the variant of the return value is `Result::Err`. `E` has to implement `Into<JsValue>`.
+
+```rust
+#[wasm_bindgen]
+pub fn str_to_int(s: &str) -> Result<i32, JsValue> {
+    s.parse::<i32>()
+        .map_err(|_| JsValue::from_str("Failed to parse string"))
+}
+```
+
+`Option` is converted to `undefined` in case of `None`. 
+
+```rust
+#[wasm_bindgen]
+pub fn str_to_int(s: &str) -> Option<i32> {
+    s.parse::<i32>().ok()
+}
+
+```
+
+Javascript, click on the wasm output box to parse the string:
+
+```javascript
+import init, {str_to_int} from '/wasm/project.js';
+
+
+(async () => { 
+    // Run the init method to initiate the WebAssembly module.
+    await init();
+    const wasmoutput = document.querySelector('#wasmoutput');
+    const input = document.createElement('input');
+    input.type = 'text';
+    document.body.appendChild(input);
+    wasmoutput.onclick = () => {
+        try {
+            wasmoutput.innerHTML = str_to_int(input.value);
+        } catch (e) {
+            wasmoutput.innerHTML = e;
+        }
+    };
+})();
+```
+
+
+<details>
+
+* Click on the wasm output box to see the output
+* `?` and other error handling tools are also supported
+
+</details>
diff --git a/src/webassembly/error-handling/imported-methods.md b/src/webassembly/error-handling/imported-methods.md
new file mode 100644
index 00000000000..8cc9d0a9ecb
--- /dev/null
+++ b/src/webassembly/error-handling/imported-methods.md
@@ -0,0 +1,18 @@
+# Error handling for imported Javascript methods
+
+Javascript methods that throw can be imported in Rust like this:
+
+```javascript
+window.throwsIfPair = (num) => {
+  if (num % 2 === 0) throw new Error("Pair number");
+  return num;
+};
+```
+
+```rust
+#[wasm_bindgen]
+extern "C" {
+    #[wasm_bindgen(catch)]
+    pub fn throwsIfPair(text: i32) -> Result<i32, JsValue>;
+}
+```
diff --git a/src/webassembly/expose-method.md b/src/webassembly/expose-method.md
new file mode 100644
index 00000000000..5a99b06f25a
--- /dev/null
+++ b/src/webassembly/expose-method.md
@@ -0,0 +1,29 @@
+# Expose a method
+
+The first thing you will want to do with WebAssembly is expose your methods to Javascript.
+This is straightforward using the `#[wasm_bindgen]` procedural macro.
+
+```rust
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub fn set_panic_hook() {
+    // Generates better error messages if our code ever panics.
+    //
+    // For more details see
+    // https://github.com/rustwasm/console_error_panic_hook#readme
+    console_error_panic_hook::set_once();
+}
+
+// Exposes the `add` method from the previous slide
+#[wasm_bindgen]
+pub fn add(a: i32, b: i32) -> i32 {
+    a + b
+}
+```
+
+<details>
+ 
+* `set_panic_hook` is a convenient setup method that adds debug information to stack traces when a Wasm module panics. Don't use it in prod builds because it tends to bloat the bundle size.
+
+</details>
diff --git a/src/webassembly/expose-rust-type.md b/src/webassembly/expose-rust-type.md
new file mode 100644
index 00000000000..b27c68c2ed8
--- /dev/null
+++ b/src/webassembly/expose-rust-type.md
@@ -0,0 +1,60 @@
+# Expose user-defined Rust types
+
+Similarily to methods, types can be exposed from Rust to Javascript with the `#[wasm_bindgen]` macro.
+
+```rust
+use wasm_bindgen::prelude::*;
+#[wasm_bindgen]
+pub struct Counter {
+    name: String,
+    pub count: u8,
+}
+#[wasm_bindgen]
+impl Counter {
+    #[wasm_bindgen(constructor)]
+    pub fn new(name: String, count: u8) -> Counter {
+        Counter { name, count }
+    }
+    pub fn increment(&mut self) {
+        self.count += 1;
+    }
+    #[wasm_bindgen(getter)]
+    pub fn name(&self) -> String {
+        self.name.clone()
+    }
+    #[wasm_bindgen(setter)]
+    pub fn set_name(&mut self, name: String) {
+        self.name = name;
+    }
+}
+```
+
+Javascript to use the `Counter`.
+
+```javascript
+import init, { Counter } from "/wasm/project.js";
+
+(async () => {
+  // Run the init method to initiate the WebAssembly module.
+  await init();
+  const wasmOutput = document.querySelector("#wasmoutput");
+  const button = document.createElement("button");
+  button.textContent = "increment";
+  document.body.appendChild(button);
+  const counter = new Counter("ButtonCounter", 42);
+  wasmOutput.textContent = counter.count;
+  button.addEventListener("click", () => {
+    // Calls the getter
+    console.log("Button clicked!", counter.name);
+    counter.increment();
+    wasmOutput.textContent = counter.count;
+  });
+})();
+```
+
+<details>
+
+- `pub` members must implement copy
+- Type parameters and lifetime annotations are not supported yet
+- Members that implement `Copy` can be public and directly accessed from Javascript.
+</details>
diff --git a/src/webassembly/import-js-type.md b/src/webassembly/import-js-type.md
new file mode 100644
index 00000000000..4a98ae794dd
--- /dev/null
+++ b/src/webassembly/import-js-type.md
@@ -0,0 +1,83 @@
+# Import user-defined Javascript types
+
+User-defined Javascript types can be imported by declaring the relevant methods as `extern "C"` just like
+other foreign functions.
+
+```javascript
+import init, { edit_box } from "/wasm/project.js";
+
+window.OutputBox = class {
+  constructor(element) {
+    this.element = element;
+    this.lastText = null;
+  }
+  setText(text) {
+    this.element.innerHTML = text;
+  }
+  get currentText() {
+    return this.element.innerHTML;
+  }
+};
+```
+
+It can be imported as such in Rust
+
+```rust
+use wasm_bindgen::prelude::*;
+#[wasm_bindgen]
+extern "C" {
+    pub type OutputBox;
+    #[wasm_bindgen(constructor)]
+    pub fn new(element: web_sys::HtmlElement) -> OutputBox;
+    #[wasm_bindgen(method)]
+    pub fn setText(this: &OutputBox, text: &str);
+    #[wasm_bindgen(method, getter)]
+    pub fn lastText(this: &OutputBox) -> Option<String>;
+    #[wasm_bindgen(method, setter)]
+    pub fn set_lastText(this: &OutputBox, text: Option<String>);
+    #[wasm_bindgen(method, getter)]
+    pub fn currentText(this: &OutputBox) -> String;
+}
+```
+
+<details>
+
+- Getters and Setters have to be declared with an added parameter in the proc macro.
+- `null` and `undefined` can be both represented by `Option::None`
+
+Try it in action:
+
+```javascript
+(async () => {
+  // Run the init method to initiate the WebAssembly module.
+  await init();
+  const wasmoutput = document.querySelector("#wasmoutput");
+  const outputBox = new OutputBox(wasmoutput);
+  const input = document.createElement("input");
+  document.body.appendChild(input);
+  wasmoutput.onclick = () => {
+    const inputValue = input.value;
+    edit_box(outputBox, inputValue);
+  };
+})();
+```
+
+```rust
+#[wasm_bindgen]
+pub fn edit_box(output_box: &OutputBox, text: &str) {
+    match text {
+        "reset" => output_box.set_lastText(None),
+        "recover" => {
+            if let Some(last_text) = output_box.lastText() {
+                output_box.setText(&last_text);
+            } else {
+                output_box.setText("No last text");
+            }
+        }
+        "save" => output_box.set_lastText(Some(output_box.currentText())),
+        _ => output_box.setText(text),
+    }
+}
+```
+
+</details>
diff --git a/src/webassembly/import-method.md b/src/webassembly/import-method.md
new file mode 100644
index 00000000000..b507e17460e
--- /dev/null
+++ b/src/webassembly/import-method.md
@@ -0,0 +1,46 @@
+# Import a Javascript method
+
+Methods from javascript can be imported directly as `extern "C"` bindings.
+
+```rust
+#[wasm_bindgen]
+extern "C" {
+    fn alert(s: &str);
+    #[wasm_bindgen(js_namespace = console)]
+    pub fn log(s: &str);
+    pub fn jsMethod();
+}
+
+#[wasm_bindgen]
+pub fn add_and_log(a: i32, b: i32) {
+    let result = a + b;
+    // Doesn't show in the console
+    println!("println! {}", result);
+    log(&format!("log {}", result));
+    alert(&format!("alert {}", result));
+    jsMethod("Hi from Rust");
+}
+```
+
+```javascript
+import init, { add_and_log } from "/wasm/project.js";
+
+export function jsMethod(value) {
+  alert(`Hello from JS! Value: ${value}`);
+}
+
+window.jsMethod = jsMethod;
+
+(async () => {
+  await init();
+  add_and_log(1, 2);
+})();
+```
+
+<details>
+
+Since Wasm runs in the browser, we will want to interact directly with Javascript APIs from Rust.
+For instance `println!` will not log to the javascript console, so we need to use `console.log`.
+Similarly, we want to be able to call `alert`. This works the same way as FFIs with C.
+
+</details>
\ No newline at end of file
diff --git a/src/webassembly/import-method/web-sys.md b/src/webassembly/import-method/web-sys.md
new file mode 100644
index 00000000000..a04c63aaec2
--- /dev/null
+++ b/src/webassembly/import-method/web-sys.md
@@ -0,0 +1,37 @@
+# web-sys and js_sys
+
+You don't need to import all Javascript methods manually. [web_sys](https://rustwasm.github.io/wasm-bindgen/web-sys/index.html) amd [js_sys](https://docs.rs/js-sys/latest/js_sys/) import Javascript and DOM methods for us.
+
+```rust
+use wasm_bindgen::prelude::*;
+
+#[wasm_bindgen]
+pub fn add_a_cat() -> Result<(), JsValue> {
+    let window = web_sys::window().expect("no global `window` exists");
+    let document = window.document().expect("should have a document on window");
+    let body = document.body().expect("document should have a body");
+
+    let image = document.create_element("img")?;
+    // We need a random number to prevent the browser from caching the image
+    let random_number = js_sys::Math::random() * 10_000.0;
+    image.set_attribute("src", &format!("https://picsum.photos/300?random={random_number}"))?;
+    body.append_child(&image)?;
+
+    Ok(())
+}
+```
+
+```javascript
+import init, { add_a_cat } from "/wasm/project.js";
+
+(async () => {
+  // Run the init method to initiate the WebAssembly module.
+  await init();
+  const button = document.createElement("button");
+  button.textContent = "Add a cat";
+  document.body.appendChild(button);
+  button.addEventListener("click", () => {
+    add_a_cat();
+  });
+})();
+```
diff --git a/src/webassembly/limitations.md b/src/webassembly/limitations.md
new file mode 100644
index 00000000000..238ce3d7967
--- /dev/null
+++ b/src/webassembly/limitations.md
@@ -0,0 +1,29 @@
+# Limitations and Workarounds
+
+Because it runs in a Virtual Machine with its own set of restrictions, 
+some common native operations are not available in WebAssembly. For instance, 
+there is no file system in Wasm, therefore file operations are handled 
+through Web APIs.
+
+Other methods from the standard library that rely on system calls cannot be
+used as well. They can however either be replaced by a dependency or be enabled 
+by setting a feature flag. For instance,
+
+- Many methods from `std::time` rely on system calls, so they will panic when called
+in Wasm. [Drop in replacements](https://docs.rs/web-time/latest/web_time/) exist that
+use the brower's `Date` and `performance` methods
+- `rand` which usually relies on thread local storage, can be made to use
+`Math.random()` by setting the dependency feature `getrandom = { ..., features = ["js"] }`
+- Statically linking against another language and bundling as one binary is mostly not supported
+because the standard Wasm ABI is not based on C's like in most environments. Instead, you
+should dynamically link with `#[wasm_bindgen] extern "C"`. This means that some crates
+which bundle C or C++ binaries will not be portable to Wasm.
+
+Furthermore, interoperability with Javascript, a language that knows nothing about 
+the borrow-checker but uses Garbage Collection to manage memory forces us to
+alter how we use both Rust and Javascript with WebAssembly.
+
+This chapter covers a few caveats of Wasm programming:
+
+- [Borrow Checker](limitations/borrow-checker.md)
+- [Closures](limitations/closures.md)
diff --git a/src/webassembly/limitations/borrow-checker.md b/src/webassembly/limitations/borrow-checker.md
new file mode 100644
index 00000000000..eb9cd4eb21c
--- /dev/null
+++ b/src/webassembly/limitations/borrow-checker.md
@@ -0,0 +1,40 @@
+# Borrow Checker
+
+When we export a Rust type to Javascript we need to beware about the borrow checker on the Javascript side.
+
+```rust
+#[wasm_bindgen]
+pub struct RustType {}
+#[wasm_bindgen]
+impl RustType {
+    #[wasm_bindgen]
+    pub fn new() -> RustType {
+        RustType {}
+    }
+}
+#[wasm_bindgen]
+pub fn takes_struct(s: RustType) -> RustType {
+    s
+}
+```
+
+```javascript
+import init, {RustType, takes_struct} from '/wasm/project.js';
+
+(async () => { 
+    // Run the init method to initiate the WebAssembly module.
+    await init();
+    const rustType = RustType.new();
+    const moved = takes_struct(rustType);
+    console.log(moved);
+    console.log(rustType);
+})();
+```
+
+<details>
+
+* `rustType` is moved so it points to null in the second log.
+* Ownership rules must be respected even in Javascript.
+* Integral types in JS that are automatically translated to Rust do not have those constraints. `(String, Vec, etc.)`
+
+</details>
\ No newline at end of file
diff --git a/src/webassembly/limitations/closures.md b/src/webassembly/limitations/closures.md
new file mode 100644
index 00000000000..b303910f559
--- /dev/null
+++ b/src/webassembly/limitations/closures.md
@@ -0,0 +1,49 @@
+# Closures
+
+Closures created in Rust have to be returned to so they won't be dropped.
+
+```rust
+use wasm_bindgen::prelude::*;
+#[wasm_bindgen]
+extern "C" {
+    fn setInterval(closure: &Closure<dyn FnMut()>, millis: u32) -> f64;
+}
+#[wasm_bindgen]
+pub struct ClosureHandle {
+    closure: Closure<dyn FnMut()>,
+}
+#[wasm_bindgen]
+pub fn timeout_set_seconds(elem: web_sys::HtmlElement) -> ClosureHandle {
+    let seconds = Rc::new(RefCell::new(0usize));
+    elem.set_inner_html("0 seconds");
+    let closure = Closure::wrap(Box::new(move || {
+        let mut seconds = seconds.borrow_mut();
+        *seconds += 1;
+        elem.set_inner_html(&format!("{} seconds", seconds));
+    }) as Box<dyn FnMut()>);
+    setInterval(&closure, 1000);
+    ClosureHandle { closure }
+}
+```
+
+```javascript
+import init, { timeout_set_seconds } from "/wasm/project.js";
+
+(async () => {
+  // Run the init method to initiate the WebAssembly module.
+  await init();
+  const wasmOutput = document.querySelector("#wasmoutput");
+  timeout_set_seconds(wasmOutput);
+})();
+```
+
+<details>
+
+- Since the function that creates the closure keeps its ownership, the closure would be dropped if we did't return it.
+  - Returning ownership allows the JS runtime to manage the lifetime of the closure and to collect it when it can.
+  - Try returning nothing from the method.
+- Closures can only be passed by reference to Wasm functions.
+  - This is why we pass `&Closure` to `setInterval`.
+  - This is also why we need to create `ClosureHandle` to return the closure.
+
+</details>
diff --git a/src/webassembly/load-wasm-module.md b/src/webassembly/load-wasm-module.md
new file mode 100644
index 00000000000..887f16ed6d8
--- /dev/null
+++ b/src/webassembly/load-wasm-module.md
@@ -0,0 +1,74 @@
+# Load a Wasm module
+
+## Commands to run:
+
+
+### Compile Rust lib to Wasm
+
+You can compile the basic Wasm library provided in [rust-wasm-template](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template) with this command:
+
+```shell
+cd src/rust-wasm-template
+
+wasm-pack build --target web --out-dir static/wasm
+```
+
+### Serve static files
+
+Webassembly has to be loaded from an HTTP server in order to be loaded on the brower.  
+
+If you have Python on your machine, you can simply
+
+```
+cd rust-wasm-template/static
+
+python3 -m http.server
+```
+
+Otherwise a Rust alternative exists and you can install it with
+
+```
+cargo install cargo-server
+```
+
+And run
+
+```
+cd rust-wasm-template/static
+
+cargo server
+```
+
+Open the web page on port `8000`. HTML and JS files are provided at [rust-wasm-template/static](https://github.com/google/comprehensive-rust/tree/main/src/rust-wasm-template/static).
+
+## Javascript
+
+Once you have compiled your WebAssembly module, you want to call it from your Web application.
+
+```javascript
+// Import the module and the exported method `add`
+import init, {add} from '/wasm/project.js'; // A typescript version is also generated
+
+// Async IIFE
+(async () => { 
+    // Run the init method to initiate the WebAssembly module.
+    await init();
+    console.log('Wasm output', add(1, 2));
+})();
+```
+
+Adding the Javascript module to an HTML file:
+
+```html
+<script type="module" src="/path/to/module.mjs"></script>
+```
+
+<details>
+
+* This loads the compiled WebAssembly
+* `init` installs the bytecode and compiles it
+* `add` is an exported method
+* For this class, we are compiling `wasm-pack` with the `--web` flag, complex applications will want to use a bundler,
+see more information about build options on the [official documentation](https://rustwasm.github.io/docs/wasm-pack/commands/build.html)
+
+</details>