Building a Browser-Based Code Editor with Monaco and Web Workers

Online code playgrounds need to feel as responsive as VS Code while running untrusted code safely. Here is how we built Interactive Coding Sandbox.

1. Monaco Editor Integration

Monaco powers VS Code. We embed it in React with full IntelliSense support:

typescript
import Editor from '@monaco-editor/react';

function CodePanel({ language, value, onChange }) {
  return (
    <Editor
      height="100%"
      language={language}
      value={value}
      onChange={onChange}
      theme="vs-dark"
      options={{ minimap: { enabled: false }, fontSize: 14, wordWrap: 'on' }}
    />
  );
}

2. Secure Iframe Execution

User code runs inside a sandboxed iframe with restricted permissions. The sandbox attribute blocks access to the parent document, cookies, and navigation:

html
<iframe sandbox="allow-scripts" srcdoc={compiledHtml} />

3. Web Worker Compilation

Code bundling runs in a Web Worker to prevent UI freezes. Even infinite loops in user code cannot crash the editor.

Summary

Monaco + sandboxed iframes + Web Workers creates a code playground that is fast, safe, and feels native.