Calling Go WASM from TypeScript React: A Step-by-Step Guide (2026)

Integrating WebAssembly (WASM) with modern web applications can significantly enhance performance by offloading computationally intensive tasks to a more efficient execution environment. In this tutorial, we will explore how to call Go WASM from a TypeScript React frontend. This integration allows you to leverage Go's performance benefits while maintaining a seamless user experience in your React application.

Key Takeaways

• Learn how to compile Go code to WASM and integrate it with a React app.
• Understand the setup and configuration of wasm_exec.js for Go WASM.
• See practical examples of calling Go functions from TypeScript.
• Discover common errors and how to troubleshoot them effectively.

This guide is essential for developers looking to harness the power of Go and WASM in their web applications, providing a performant alternative to JavaScript for heavy computations. We will cover everything from setting up your development environment to handling common issues, ensuring a smooth integration process.

Prerequisites

• Basic knowledge of Go and TypeScript.
• Familiarity with React and JavaScript ES6 features.
• Go version 1.21 or later installed on your machine.
• Node.js and npm installed for running the React app.

Step 1: Set Up Your Go Environment

First, ensure that your Go environment is correctly set up to compile WASM binaries.

# Check Go version
$ go version
# Output should be Go 1.21 or later

# Set the GOOS and GOARCH for WASM
$ export GOOS=js
$ export GOARCH=wasm

This configuration tells Go to build for the JavaScript environment using the WASM architecture.

Step 2: Write a Simple Go Function

Create a Go file, main.go, and define a simple function to be called from the WASM module.

package main

import (
    "syscall/js"
)

func add(args []js.Value) {
    sum := args[0].Int() + args[1].Int()
    js.Global().Set("result", sum)
}

func main() {
    js.Global().Set("add", js.FuncOf(add))
    select {} // Keep the function available
}

This Go code exposes an add function to the JavaScript runtime, allowing you to call it from the React frontend.

Step 3: Compile Go to WASM

Compile the Go code into a WASM binary:

# Compile to WASM
$ go build -o main.wasm main.go

The command outputs a main.wasm file, which will be loaded in your React application.

Step 4: Set Up React App with TypeScript

Initialize a new React application with TypeScript support:

# Create a new React app with TypeScript
$ npx create-react-app my-wasm-app --template typescript
# Navigate to the app directory
$ cd my-wasm-app

This command sets up a React project ready for TypeScript development.

Step 5: Integrate WASM in React

Copy the wasm_exec.js file from the Go installation directory to your public folder:

# Copy wasm_exec.js
$ cp $(go env GOROOT)/misc/wasm/wasm_exec.js ./public/

Then, update the public/index.html to include the WASM setup:

<script src="wasm_exec.js"></script>
<script>
  const go = new Go();
  WebAssembly.instantiateStreaming(fetch("main.wasm"), go.importObject).then((result) => {
    go.run(result.instance);
  });
</script>

Step 6: Call Go Function from TypeScript

In src/App.tsx, import the necessary modules and invoke the Go function:

import React, { useEffect, useState } from 'react';

declare global {
  interface Window {
    add: (a: number, b: number) => void;
    result: number;
  }
}

const App: React.FC = () => {
  const [sum, setSum] = useState<number>(0);

  useEffect(() => {
    if (window.add) {
      window.add(5, 10);
      setSum(window.result);
    }
  }, []);

  return (
    <div className="App">
      <h1>Sum: {sum}</h1>
    </div>
  );
};

export default App;

This code sets up a React component that calls the add function defined in Go and displays the result.

Common Errors/Troubleshooting

• WASM not loading: Ensure the wasm_exec.js script is correctly copied and paths in the HTML are accurate.
• Go function not found: Verify that the function is correctly set in the Go main function and that the WASM binary is updated.
• Incorrect results: Check that data types match between Go and JavaScript.

Frequently Asked Questions

What is WebAssembly and why use it with Go?

WebAssembly (WASM) is a binary instruction format for a stack-based virtual machine, enabling high-performance applications in web environments. Using Go with WASM allows leveraging Go's performance in web apps.

How do I update my Go function in React?

After modifying your Go code, recompile it to WASM and refresh your React app to see the changes.

Why is my Go function not executing?

Ensure the WASM file is correctly loaded and the Go function is exposed to the JavaScript environment.

Frequently Asked Questions

What is WebAssembly and why use it with Go?

WebAssembly (WASM) is a binary instruction format for a stack-based virtual machine, enabling high-performance applications in web environments. Using Go with WASM allows leveraging Go's performance in web apps.

How do I update my Go function in React?

After modifying your Go code, recompile it to WASM and refresh your React app to see the changes.

Why is my Go function not executing?

Ensure the WASM file is correctly loaded and the Go function is exposed to the JavaScript environment.