Building a Live Code Editor: A Practical Guide with esbuild.do

Live code editors are one of the most powerful tools in a web developer's arsenal. From documentation sites with interactive examples to full-fledged platforms like CodePen and JSFiddle, the ability to write and execute code in the browser provides instant feedback and a fantastic learning experience.

But have you ever wondered how they work? The magic behind them is real-time code transpilation and bundling. A user types modern JavaScript, TypeScript, or JSX, and something behind the scenes needs to convert it into plain JavaScript that a browser can understand. Traditionally, this required a complex server setup, managing Node.js dependencies, and wrestling with build tools like Webpack or Rollup.

Today, we'll explore a modern, simpler approach. We'll build a functional, live React code editor using esbuild.do, a powerful API that provides blazing-fast JavaScript bundling without the server-side headaches.

What is esbuild.do?

esbuild.do is an agentic workflow that exposes the power of esbuild—an extremely fast JavaScript bundler and minifier—through a simple REST API. Instead of installing esbuild, managing node_modules, and configuring build scripts, you can send your code to the API and get back browser-ready, bundled code in milliseconds.

This is perfect for our use case because:

It's extremely fast: User feedback is nearly instantaneous.
It's dependency-free: No need to manage a backend environment or node_modules.
It's versatile: It handles JavaScript, TypeScript, and JSX out of the box.

The Goal: A Simple React Code Editor

We're going to build a web page with two main components:

A textarea where a user can write React and JSX code.
An iframe that renders the live output of the executed code.

Let's get started!

Step 1: The HTML Skeleton

First, we need a basic HTML structure. Create an index.html file and add the following code. This sets up our text editor, a "Run" button, and the iframe for the output.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Live React Editor with esbuild.do</title>
    <style>
        body { font-family: sans-serif; display: flex; flex-direction: column; height: 100vh; margin: 0; }
        #app { display: flex; flex: 1; height: 100%; }
        .pane { flex: 1; height: 100%; overflow: auto; border-left: 1px solid #ccc; }
        textarea { width: 100%; height: 100%; border: none; font-family: monospace; font-size: 16px; padding: 1rem; resize: none; }
        iframe { width: 100%; height: 100%; border: none; }
        header { padding: 0.5rem 1rem; background-color: #f7f7f7; border-bottom: 1px solid #ccc; text-align: right; }
        button { background-color: #007bff; color: white; border: none; padding: 0.5rem 1rem; border-radius: 4px; cursor: pointer; }
        button:hover { background-color: #0056b3; }
    </style>
</head>
<body>
    <header>
        <button id="runButton">Run</button>
    </header>
    <div id="app">
        <div class="pane">
            <textarea id="codeInput" placeholder="Write your React code here..."></textarea>
        </div>
        <div class="pane">
            <iframe id="outputFrame" title="Code Output"></iframe>
        </div>
    </div>

    <script type="module" src="app.js"></script>
</body>
</html>

Step 2: The Bundling Logic with esbuild.do

Now for the core logic. We need to write JavaScript that:

Listens for a click on the "Run" button.
Takes the code from the textarea.
Sends it to the esbuild.do API.
Injects the bundled result into our iframe.

To use the API, we'll install the handy @do-inc/sdk. In your project, run:

npm install @do-inc/sdk

Now, create a file named app.js and add the following:

// app.js
import { doing } from '@do-inc/sdk';

const codeInput = document.getElementById('codeInput');
const runButton = document.getElementById('runButton');
const outputFrame = document.getElementById('outputFrame');

// Add some default React code to the editor
const startingCode = `import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom/client';

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

  return (
    <div>
      <h1>Hello from esbuild.do!</h1>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
`;

codeInput.value = startingCode;

runButton.addEventListener('click', async () => {
  const userCode = codeInput.value;

  try {
    // Show a loading state
    outputFrame.srcdoc = `<html><body><p>Bundling...</p></body></html>`;

    // Call the esbuild.do API
    const { bundledCode, hasError } = await doing.esbuild({
      entryPoints: ['index.jsx'],
      sourceFiles: {
        'index.jsx': userCode,
      },
      bundle: true,
      minify: true,
      platform: 'browser',
      format: 'iife' // Immediately Invoked Function Expression
    });
    
    if (hasError) {
        throw new Error(bundledCode); // On error, bundledCode contains the error message
    }

    // Prepare the HTML to inject into the iframe
    const iframeContent = `
      <html>
        <head>
          <style>body { font-family: sans-serif; }</style>
        </head>
        <body>
          <div id="root"></div>
          <script type="module">
            ${bundledCode}
          </script>
        </body>
      </html>
    `;
    
    // Render the bundled code in the iframe
    outputFrame.srcdoc = iframeContent;

  } catch (error) {
    console.error('Bundling failed:', error);
    // Display the error directly in the iframe for easy debugging
    outputFrame.srcdoc = `<html><body><pre style="color: red;">${error.message}</pre></body></html>`;
  }
});

// Run the code once on initial load
runButton.click();

Let's break down the key doing.esbuild call:

entryPoints: ['index.jsx']: We tell esbuild our main file is index.jsx.
sourceFiles: We provide the code as a virtual file system. The key index.jsx matches our entry point, and its value is the code from our textarea.
bundle: true: This is crucial. It tells esbuild to follow the import statements (like import React from 'https://esm.sh/react') and include them in the final output.
platform: 'browser': Optimizes the output for web browsers.
format: 'iife': This wraps our code in a function that executes immediately, preventing it from polluting the global scope—perfect for securely running code in an iframe.

Step 3: Run Your Live Editor!

Serve your index.html file using a simple local server. If you have Node.js, you can use npx serve in your project directory.

Open your browser, and you should see your live editor in action! You can now modify the JSX code, click "Run," and watch the output update instantly.

Why esbuild.do Shines for This Task

Building this tool was surprisingly simple. Here's why the esbuild.do approach is so effective:

Zero Build Configuration: We didn't write a single line of webpack.config.js or esbuild.config.js. Our entire build process was defined in a simple JSON object passed to an API.
Serverless Power: We leveraged the power of a sophisticated backend bundler without provisioning, managing, or even thinking about a server. This is ideal for serverless functions, static sites, or any environment where you want to keep your infrastructure lean.
Unmatched Speed: The user experience is snappy and responsive because esbuild is one of the fastest bundlers available. The API call is lightweight and the bundling completes in a fraction of a second.
Effortless Extensibility: Want to support TypeScript? Just change the virtual filename to index.tsx and start writing TypeScript. The API handles the transpilation automatically. No additional configuration is needed.

By offloading the complex build step to a dedicated, high-performance API, we were able to focus entirely on the user-facing application. Whether you're enhancing your documentation, building educational tools, or creating the next great code playground, esbuild.do provides the performance and simplicity you need.

Ready to build your own on-demand tools? Head over to esbuild.do to learn more and get started.

Do Work. With AI.