diff --git a/example/app.ts b/example/app.ts
index 85eee4d5b..77d01fb96 100644
--- a/example/app.ts
+++ b/example/app.ts
@@ -37,6 +37,11 @@ fetch(url.href).then(response =>
     group_add_face,
     group_index_for_codepoint,
     group_render_glyph,
+    group_cache_new,
+    group_cache_free,
+    group_cache_index_for_codepoint,
+    group_cache_render_glyph,
+    group_cache_atlas_greyscale,
     atlas_new,
     atlas_free,
     atlas_debug_canvas,
@@ -49,7 +54,7 @@ fetch(url.href).then(response =>
   zjs.memory = memory;
 
   // Create our atlas
-  const atlas = atlas_new(512, 0 /* greyscale */);
+  // const atlas = atlas_new(512, 0 /* greyscale */);
 
   // Create some memory for our string
   const font = new TextEncoder().encode("monospace");
@@ -69,10 +74,13 @@ fetch(url.href).then(response =>
   const group = group_new(72 /* size */);
   group_add_face(group, 0, df);
 
+  // Create our group cache
+  const group_cache = group_cache_new(group);
+
   // Render a glyph
   for (let i = 33; i <= 126; i++) {
-    const font_idx = group_index_for_codepoint(group, i, 0, -1);
-    group_render_glyph(group, atlas, font_idx, i, 0);
+    const font_idx = group_cache_index_for_codepoint(group_cache, i, 0, -1);
+    group_cache_render_glyph(group_cache, font_idx, i, 0);
     //face_render_glyph(face, atlas, i);
   }
   //face_render_glyph(face, atlas, "橋".codePointAt(0));
@@ -82,6 +90,7 @@ fetch(url.href).then(response =>
   //face_debug_canvas(face);
 
   // Debug our atlas canvas
+  const atlas = group_cache_atlas_greyscale(group_cache);
   const id = atlas_debug_canvas(atlas);
   document.getElementById("atlas-canvas").append(zjs.deleteValue(id));
 
diff --git a/src/font/GroupCache.zig b/src/font/GroupCache.zig
index c6fd1d2c5..5af5de4cd 100644
--- a/src/font/GroupCache.zig
+++ b/src/font/GroupCache.zig
@@ -231,6 +231,88 @@ test {
     }
 }
 
+/// The wasm-compatible API.
+pub const Wasm = struct {
+    const wasm = @import("../os/wasm.zig");
+    const alloc = wasm.alloc;
+
+    export fn group_cache_new(group: *Group) ?*GroupCache {
+        return group_cache_new_(group) catch null;
+    }
+
+    fn group_cache_new_(group: *Group) !*GroupCache {
+        var gc = try GroupCache.init(alloc, group.*);
+        errdefer gc.deinit(alloc);
+
+        var result = try alloc.create(GroupCache);
+        errdefer alloc.destroy(result);
+        result.* = gc;
+        return result;
+    }
+
+    export fn group_cache_free(ptr: ?*GroupCache) void {
+        if (ptr) |v| {
+            v.deinit(alloc);
+            alloc.destroy(v);
+        }
+    }
+
+    export fn group_cache_set_size(self: *GroupCache, size: u16) void {
+        return self.setSize(.{ .points = size }) catch |err| {
+            log.warn("error setting group cache size err={}", .{err});
+            return;
+        };
+    }
+
+    /// Presentation is negative for doesn't matter.
+    export fn group_cache_index_for_codepoint(self: *GroupCache, cp: u32, style: u16, p: i16) i16 {
+        const presentation = if (p < 0) null else @intToEnum(Presentation, p);
+        if (self.indexForCodepoint(
+            alloc,
+            cp,
+            @intToEnum(Style, style),
+            presentation,
+        )) |idx| {
+            return @intCast(i16, @bitCast(u8, idx orelse return -1));
+        } else |err| {
+            log.warn("error getting index for codepoint from group cache size err={}", .{err});
+            return -1;
+        }
+    }
+
+    export fn group_cache_render_glyph(
+        self: *GroupCache,
+        idx: i16,
+        cp: u32,
+        max_height: u16,
+    ) ?*Glyph {
+        return group_cache_render_glyph_(self, idx, cp, max_height) catch |err| {
+            log.warn("error rendering group cache glyph err={}", .{err});
+            return null;
+        };
+    }
+
+    fn group_cache_render_glyph_(
+        self: *GroupCache,
+        idx_: i16,
+        cp: u32,
+        max_height_: u16,
+    ) !*Glyph {
+        const idx = @bitCast(Group.FontIndex, @intCast(u8, idx_));
+        const max_height = if (max_height_ <= 0) null else max_height_;
+        const glyph = try self.renderGlyph(alloc, idx, cp, max_height);
+
+        var result = try alloc.create(Glyph);
+        errdefer alloc.destroy(result);
+        result.* = glyph;
+        return result;
+    }
+
+    export fn group_cache_atlas_greyscale(self: *GroupCache) *font.Atlas {
+        return &self.atlas_greyscale;
+    }
+};
+
 test "resize" {
     const testing = std.testing;
     const alloc = testing.allocator;
diff --git a/src/font/main.zig b/src/font/main.zig
index 4ef05e25a..9a6a2b16f 100644
--- a/src/font/main.zig
+++ b/src/font/main.zig
@@ -22,6 +22,7 @@ pub usingnamespace if (builtin.target.isWasm()) struct {
     pub usingnamespace Atlas.Wasm;
     pub usingnamespace DeferredFace.Wasm;
     pub usingnamespace Group.Wasm;
+    pub usingnamespace GroupCache.Wasm;
     pub usingnamespace face.web_canvas.Wasm;
 } else struct {};