Compiling React in the Browser using esbuild-wasm

A lot of people don't know, but it's possible to run a React application in the browser using just one file.

You can even compile your entire React app directly in the browser. No need for server-side builds.

First, let's see how we can render React using pure HTML and JavaScript.

We'll use an import map to resolve React and ReactDOM, by pointing to their corresponding ESM URLs. It's a hack: esm.sh has already done the dependency bundling work.1

<!DOCTYPE html>
<html>
  <head>
    <script type="importmap">
      {
        "imports": {
          "react": "https://esm.sh/[email protected]",
          "react-dom/client": "https://esm.sh/[email protected]/client"
        }
      }
    </script>
  </head>
  <body>
    <div id="root"></div>

    <script type="module">
      import React from 'react';
      import { createRoot } from 'react-dom/client';

      function App() {
        const [count, setCount] = React.useState(0);

        return React.createElement(
          'div',
          null,
          React.createElement('h3', null, 'Count: ', count),
          React.createElement(
            'button',
            { onClick: () => setCount(count + 1) },
            'Increment'
          )
        );
      }

      const root = createRoot(document.getElementById('root'));
      root.render(React.createElement(App));
    </script>
  </body>
</html>

If we place this code inside an iframe, a React application will be live and running. Try using Dev Tools to examine the network tab. You'll notice that React and ReactDOM are being loaded from ESM URLs:

This is awesome, but in practice nobody writes React by manually creating elements everywhere.

Instead, we typically write our components using JSX (or even better, TSX), but since browsers can't interpret JSX directly, we need to transform it into regular JavaScript first.

Transforming JSX with esbuild-wasm

One way to go from JSX to JavaScript is to use esbuild's esbuild.transform(), which can run in the browser using WebAssembly (WASM):2

import * as esbuild from 'esbuild-wasm';

await esbuild.initialize({
  wasmURL: 'https://unpkg.com/[email protected]/esbuild.wasm',
});

const jsxCode = `
function App() {
  return <h1>Hello, World!</h1>;
}
`;

const result = await esbuild.transform(jsxCode, {
  loader: 'jsx',
  target: 'es2015',
});

Here's an interactive editor that uses esbuild.transform() to perform the transformation in real time. Edit the code and see the JavaScript output update in no time.

Input (JSX)

Output (JavaScript)

// Initializing esbuild...

esbuild.transform() works great for a single piece of code, but it doesn't support resolving multiple files, custom imports, or bundling.

Compiling Multiple Files and Bundling

The esbuild.build() method can do all of that:

Resolves imports: Follows import statements and includes dependencies, allowing custom plugins to resolve and load.
Bundles code: Combines multiple files into a single output.
Tree-shakes: Removes unused code.
Handles external modules: Can mark certain modules (like React) as external and load them separately.

Here's how to set up esbuild.build() to handle path aliases and bundle local files:

// Define the virtual file system
const virtualFiles = {
  "@/entry": {
    contents: `...`,
    loader: "tsx",
  },
  "@/components/ui/button": {
    contents: `...`,
    loader: "tsx",
  },
  "@/lib/utils": {
    contents: `...`,
    loader: "js",
  },
};

const result = await esbuild.build({
  entryPoints: ["@/entry"],
  bundle: true,
  format: "esm",
  write: false,
  plugins: [
    {
      name: "virtual-files",
      setup(build) {

        // First, a resolver to mark React as external and resolve @/ paths to "virtual" namespace
        build.onResolve({ filter: /.*/ }, (args) => {
          // Mark React as external (loaded via importmap)
          if (/^(react|react-dom|react-dom/client)$/.test(args.path)) {
            return { path: args.path, external: true };
          }

          // Resolve all @/ paths to virtual namespace
          if (args.path.startsWith("@/")) {
            return {
              path: args.path,
              namespace: "virtual",
            };
          }
        });

        // Handles the "virtual" namespace to return file contents
        build.onLoad({ filter: /.*/, namespace: "virtual" }, (args) => {
          return virtualFiles[args.path] || null;
        });
      },
    },
  ],
});

const bundledCode = result.outputFiles?.[0]?.text;

For more details on esbuild's build options, see the official esbuild documentation.

Below is an editor powered by esbuild.build(). The code is compiled and bundled in the browser, and then rendered in an iframe.

File Structure

src/

entry.tsx

components/

ui/

button.tsx

lib/

utils.js

entry.tsx

Initializing esbuild...

Live Preview

Wrapping Up

Compiling React in the browser opens up exciting possibilities. You can build your own playground, a lightweight vibe-coding tool, or showcase animations alongside a code editor so readers can tweak examples. All in the user's browser!

As an example, check out this interactive React demo built with Motion, where you can modify and experiment with it live.

Code

"use client";

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { Check } from "https://esm.sh/lucide-react?external=react";
import { motion } from "https://esm.sh/motion/react?external=react";

const FRUITS_INFO = {
  Apple: { emoji: "🍎", bg: "#fde7e7" },
  Banana: { emoji: "🍌", bg: "#fffadb" },
  Orange: { emoji: "🍊", bg: "#ffead1" },
};

const DIMENSIONS = {
  closed: { height: "46px", width: "200px" },
  open: { height: "180px", width: "170px" },
  tight: { height: "60px", width: "60px" },
};

const fruits = Object.keys(FRUITS_INFO);

function App() {
  const [isExpanded, setIsExpanded] = useState(false);
  const [selected, setSelected] = useState(null);

const selectedFruitInfo = selected ? FRUITS_INFO[selected] : undefined;

const getDimensions = (isExpanded, hasSelection) => {
    if (isExpanded) return DIMENSIONS.open;
    if (hasSelection) return DIMENSIONS.tight;

return DIMENSIONS.closed;
  };

const getBackground = () => {
    if (isExpanded) {
        return "white";
      }

if (selectedFruitInfo) {
      return selectedFruitInfo.bg;
    }

return "transparent";
  };

const handleSelect = (fruit) => {
    setSelected(fruit);
    setIsExpanded(false);
  };

const dimensions = getDimensions(isExpanded, !!selected);

return (
    <div className="w-full h-full flex items-start justify-center p-4 bg-black">
      <div className="flex flex-col items-center gap-4">
        <motion.div
          className="rounded-xl overflow-hidden flex items-center justify-center origin-center"
          initial={{
            ...getDimensions(false, !!selected),
          }}
          animate={{
            ...dimensions,
            background: getBackground(),
          }}
          transition={{
            type: "spring",
            stiffness: 500,
            damping: 36,
            duration: 0.1,
          }}
          whileTap={{ scale: isExpanded ? 1 : 0.97 }}
        >
          {isExpanded ? (
            <motion.div
              key="options"
              initial={{ y: -10, filter: "blur(30px)" }}
              animate={{ y: 0, filter: "blur(0px)" }}
              className="flex flex-col gap-2 w-full p-4"
              transition={{
                type: "spring",
                stiffness: 250,
                damping: 24,
              }}
            >
              {fruits.map((fruit) => {
                const info = FRUITS_INFO[fruit];
                const isSelected = selected === fruit;
                return (
                  <motion.button
                    key={fruit}
                    onClick={() => handleSelect(fruit)}
                    className="flex items-center gap-2 px-4 py-2 rounded-lg bg-gray-100 hover:bg-gray-200 text-gray-800 border-none cursor-pointer outline-none mb-1 transition-colors"
                    whileTap={{ scale: 0.97 }}
                  >
                    <span role="img" aria-label={fruit} className="text-xl">
                      {info.emoji}
                    </span>
                    <span>{fruit}</span>
                    {isSelected && (
                      <span className="ml-auto" aria-label="Selected">
                        <Check size={16} className="inline-block" />
                      </span>
                    )}
                  </motion.button>
                );
              })}
            </motion.div>
          ) : selectedFruitInfo ? (
            <motion.button
              key="emoji"
              onClick={() => setIsExpanded(true)}
              className="flex items-center justify-center w-full h-full outline-none border-0 bg-transparent cursor-pointer text-[32px] p-0 min-w-0"
              aria-label={`Selected fruit: ${selected}`}
            >
              <span aria-hidden="true">{selectedFruitInfo.emoji}</span>
            </motion.button>
          ) : (
            <motion.button
              key="button"
              onClick={() => setIsExpanded(true)}
              className="bg-white hover:bg-gray-100 text-gray-800 px-4 py-2 rounded-lg border border-gray-200 w-full whitespace-nowrap cursor-pointer transition-colors"
            >
              Select a fruit
            </motion.button>
          )}
        </motion.div>
      </div>
    </div>
  );
}

const rootElem = document.getElementById("root");
if (rootElem) {
  createRoot(rootElem).render(<App />);
}

Initializing esbuild...

Live Preview

The same technology is behind faces.app, a platform that that lets users generate software artifacts for storytelling. Give it a try!

1In this first setup, esm.sh is doing almost all the heavy lifting. It fetches React and other dependencies, transpiles them, and serves everything as ready-to-run ES modules. There's no local build step or bundling happening here; the browser just loads what esm.sh already prepared. Interestingly, esm.sh itself originally used esbuild under the hood, and that's exactly what we'll use next to bundle our own files and extend this example further.

2While esbuild-wasm is an excellent choice for browser-based transformation and bundling, other alternatives include Babel (extensive plugin support) and SWC (similar performance profile). There are many more options available, each with its own strengths.