How I built a browser Java compiler with Monaco Editor

In the modern web era, developers expect instant feedback. Whether it's a sandbox, a tutorial, or an interactive technical interview, requiring a user to download a JDK and configure their IDE is a massive point of friction.

I wanted to build an experience similar to LeetCode or CodePen, but specifically for Java—a notoriously heavy and server-dependent language. Here is how I built a robust browser-based Java compiler using the Monaco Editor and isolated execution environments.

The Frontend: Monaco Editor

The first step was providing a world-class typing experience. You can't build a serious web IDE with a basic \\</code>. </p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">I integrated <strong class="text-bone font-semibold">Monaco Editor</strong>, the very same engine that powers VS Code. Setting up Monaco in a React environment is relatively straightforward thanks to wrappers like \<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">@monaco-editor/react\</code>, but configuring it for Java requires extra work. </p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">Out of the box, Monaco provides basic syntax highlighting for Java, but it lacks semantic understanding (autocomplete, error linting, import suggestions). To achieve true IDE features, I had to connect Monaco to a Language Server Protocol (LSP). I set up a lightweight WebSocket connection between Monaco on the client and an Eclipse JDT Language Server running in a container. This allowed the editor to show real-time squiggly lines and intelligent code completion, dramatically elevating the user experience.</p><h2 class="mt-10 mb-4 border-b border-bone/10 pb-2 font-display text-2xl font-semibold text-bone sm:text-3xl">The Execution Challenge</h2><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">Java isn't interpreted in the browser like JavaScript. It must be compiled (\<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">javac\</code>) to bytecode and then executed (\<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">java\</code>) by a JVM. </p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">Initially, I considered compiling Java to WebAssembly (Wasm) to run entirely client-side. While projects like CheerpJ exist, they often come with significant overhead or limitations regarding the standard library and threading. I needed standard, predictable execution.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">I opted for a highly isolated backend execution engine.</p><h3 class="mt-8 mb-3 font-display text-xl font-semibold text-bone">Building the Execution Pipeline</h3><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">When a user clicks "Run", the following sequence happens:</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">1. <strong class="text-bone font-semibold">Payload Transmission</strong>: The raw Java code string is sent via a REST API to a Node.js orchestration server.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">2. <strong class="text-bone font-semibold">Container Provisioning</strong>: The orchestrator talks to the Docker daemon to spin up an ephemeral, deeply restricted Docker container based on a minimal Alpine Linux OpenJDK image.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">3. <strong class="text-bone font-semibold">Compilation</strong>: Inside the container, the code is saved to a \<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">Main.java\</code> file. A strict timeout (e.g., 5 seconds) is applied, and \<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">javac\</code> is executed. If compilation fails, the stderr is piped directly back to the client and the container is killed.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">4. <strong class="text-bone font-semibold">Execution</strong>: If compilation succeeds, the \<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">java\</code> command runs the compiled class. Again, a strict timeout and memory limit (e.g., 128MB) are enforced.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">5. <strong class="text-bone font-semibold">Output Streaming</strong>: The \<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">stdout\</code> and \<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">stderr\</code> are captured and streamed back to the frontend dashboard.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">6. <strong class="text-bone font-semibold">Cleanup</strong>: Regardless of success, failure, or timeout, the ephemeral container is immediately destroyed.</p><h2 class="mt-10 mb-4 border-b border-bone/10 pb-2 font-display text-2xl font-semibold text-bone sm:text-3xl">Security: The Ultimate Priority</h2><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">Executing arbitrary, untrusted code from the internet is fundamentally dangerous. A malicious user could write Java code to attempt a fork bomb, mine cryptocurrency, or access internal network resources.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">To mitigate this, the execution containers are locked down heavily:</p><ul class="my-5 space-y-2 pl-5 list-disc text-ash text-base leading-relaxed"><li><strong class="text-bone font-semibold">No Network Access</strong>: The containers are run without network interfaces (\<code class="border border-bone/15 bg-surface/80 px-1.5 py-0.5 font-mono text-xs text-bone">--network none\</code>).</li><li><strong class="text-bone font-semibold">Read-Only Filesystem</strong>: The root filesystem is mounted as read-only.</li><li><strong class="text-bone font-semibold">Resource Quotas</strong>: Strict CPU and memory limits are enforced at the Docker level.</li><li><strong class="text-bone font-semibold">PIDs Limit</strong>: The maximum number of processes is capped to prevent fork bombs.</li></ul><h2 class="mt-10 mb-4 border-b border-bone/10 pb-2 font-display text-2xl font-semibold text-bone sm:text-3xl">Closing Thoughts</h2><p class="my-4 text-base leading-relaxed text-ash sm:text-lg">Building a browser-based Java compiler was a fantastic exercise in balancing frontend user experience with hardcore backend security. The combination of Monaco Editor for the UI and ephemeral Docker containers for execution provides a seamless, safe, and powerful platform.</p><p class="my-4 text-base leading-relaxed text-ash sm:text-lg"><em class="text-bone/90">Mahesh Chopade builds developer tools and modern web experiences. Check out my other projects on my portfolio.</em></p></article></div><div class="mt-6 flex items-center gap-4 border-t border-bone/10 pt-8"><span class="font-mono text-xs uppercase tracking-widest text-ash">Share this article</span><a href="https://twitter.com/intent/tweet?url=https%3A%2F%2Fheymahesh.in%2Fblog%2Fhow-i-built-a-browser-java-compiler-with-monaco-editor&text=Check%20out%20this%20article%3A%20How%20I%20built%20a%20browser%20Java%20compiler%20with%20Monaco%20Editor" target="_blank" rel="noreferrer noopener" class="flex items-center justify-center w-8 h-8 rounded-full border border-bone/20 hover:border-bone/50 transition-colors" aria-label="Share on X (Twitter)"><svg viewBox="0 0 24 24" class="w-4 h-4 fill-bone" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></svg></a><a href="https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fheymahesh.in%2Fblog%2Fhow-i-built-a-browser-java-compiler-with-monaco-editor" target="_blank" rel="noreferrer noopener" class="flex items-center justify-center w-8 h-8 rounded-full border border-bone/20 hover:border-bone/50 transition-colors" aria-label="Share on LinkedIn"><svg viewBox="0 0 24 24" class="w-4 h-4 fill-bone" aria-hidden="true"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"></path></svg></a></div><div class="mt-14 border-t border-bone/10 pt-10"><span class="font-mono text-xs uppercase tracking-widest text-ash">Continue Reading</span><div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2"><a class="group block border border-bone/10 bg-surface/20 p-5 transition-colors hover:border-bone/30 hover:bg-surface/40" href="/blog/jev-ai-explained"><div class="flex items-center justify-between font-mono text-[0.65rem] uppercase tracking-wider text-faint"><span>2026-10-07</span><span class="flex items-center gap-1 text-ash group-hover:text-bone">Read <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3 w-3 transition-transform group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></div><h4 class="mt-2 font-display text-base font-semibold tracking-tight text-bone group-hover:text-bone">Jev AI Explained: The Model That Doesn't Generate Text, It Makes Decisions</h4><p class="mt-1 text-xs text-ash line-clamp-2">Jev is a new kind of AI model built for making decisions instead of generating text. Learn how TypeSafe's System One model works, how it compares with GPT and other LLMs, where it fits in AI agents, what the benchmarks show, and whether developers should actually use it.</p></a><a class="group block border border-bone/10 bg-surface/20 p-5 transition-colors hover:border-bone/30 hover:bg-surface/40" href="/blog/best-ai-coding-assistants-for-beginners-in-2026"><div class="flex items-center justify-between font-mono text-[0.65rem] uppercase tracking-wider text-faint"><span>2026-09-09</span><span class="flex items-center gap-1 text-ash group-hover:text-bone">Read <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-arrow-right h-3 w-3 transition-transform group-hover:translate-x-1" aria-hidden="true"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg></span></div><h4 class="mt-2 font-display text-base font-semibold tracking-tight text-bone group-hover:text-bone">Best AI coding assistants for beginners in 2026 (Claude Code, Copilot, Cursor compared simply)</h4><p class="mt-1 text-xs text-ash line-clamp-2">New to coding and wondering which AI assistant to use? This simple comparison of Claude Code, GitHub Copilot, and Cursor explains what each tool does best and which one is worth choosing as a beginner in 2026.</p></a></div></div><div class="mt-14 border border-bone/10 bg-surface/30 p-6 sm:p-8"><div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"><div><span class="font-mono text-[0.65rem] uppercase tracking-widest text-ash">Written by</span><h3 class="font-display text-xl font-semibold text-bone">Mahesh</h3><p class="mt-1 text-xs text-ash">Full Stack Developer · A Freelancer</p></div><div class="flex items-center gap-3"><a class="border border-bone/20 bg-bone px-4 py-2 font-mono text-xs font-semibold uppercase tracking-wider text-void hover:opacity-90" href="/#contact">Get in Touch</a><a class="border border-bone/15 bg-surface/50 px-4 py-2 font-mono text-xs uppercase tracking-wider text-bone hover:border-bone/40" href="/blog">More Articles</a></div></div></div></main><footer class="border-t border-bone/8 py-10"><div class="mx-auto flex max-w-4xl flex-col items-center justify-between gap-4 px-5 font-mono text-xs uppercase tracking-wider text-faint sm:flex-row sm:px-6"><span>Mahesh © 2026</span><a class="hover:text-bone" href="/blog">← Back to all articles</a></div></footer></div><script src="/_next/static/immutable/chunks/0biakp5uvb2np.js" id="_R_" async=""></script><script>(self.__next_f=self.__next_f||[]).push([0])</script><script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[93706,[\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\"],\"\"]\n3:I[96923,[\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\"],\"Providers\"]\n4:I[64902,[\"/_next/static/immutable/chunks/2_0l-r005r02x.js\"],\"default\"]\n5:I[63003,[\"/_next/static/immutable/chunks/2_0l-r005r02x.js\"],\"default\"]\n6:I[65581,[\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\"],\"Analytics\"]\n8:I[93330,[\"/_next/static/immutable/chunks/2_0l-r005r02x.js\"],\"OutletBoundary\"]\n9:\"$Sreact.suspense\"\nc:I[93330,[\"/_next/static/immutable/chunks/2_0l-r005r02x.js\"],\"ViewportBoundary\"]\ne:I[93330,[\"/_next/static/immutable/chunks/2_0l-r005r02x.js\"],\"MetadataBoundary\"]\n10:I[37386,[\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\"],\"default\",1]\n:HL[\"/_next/static/immutable/chunks/0dgquxq8lif4u.css\",\"style\"]\n:HL[\"/_next/static/immutable/media/5c285b27cdda1fe8-s.p.0lsanbtneewqp.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/immutable/media/797e433ab948586e-s.p.1v5bejj26fx9h.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\nb:X\n0:{\"P\":null,\"c\":[\"\",\"blog\",\"how-i-built-a-browser-java-compiler-with-monaco-editor\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"blog\",{\"children\":[[\"slug\",\"how-i-built-a-browser-java-compiler-with-monaco-editor\",\"d\",[]],{\"children\":[\"__PAGE__\",{},\"$undefined\",\"$undefined\",4096]},\"$undefined\",\"$undefined\",4096]},\"$undefined\",\"$undefined\",4096]},\"$undefined\",\"$undefined\",4112],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0dgquxq8lif4u.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"className\":\"dm_sans_f7a1aa10-module__ocMDgG__variable geist_mono_aed55a57-module__iGg3zq__variable\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://heymahesh.in\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://heymahesh.in\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://github.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://github.com\"}],[\"$\",\"link\",null,{\"rel\":\"dns-prefetch\",\"href\":\"https://www.linkedin.com\"}],[\"$\",\"link\",null,{\"rel\":\"preconnect\",\"href\":\"https://www.linkedin.com\"}],[\"$\",\"$L2\",null,{\"id\":\"theme-script\",\"strategy\":\"beforeInteractive\",\"dangerouslySetInnerHTML\":{\"__html\":\"(function(){try{var s=localStorage.getItem(\\\"portfolio-theme-mode\\\")||\\\"auto\\\";var d=false;if(s===\\\"dark\\\"){d=true;}else if(s===\\\"light\\\"){d=false;}else{var h=new Date().getHours();d=(h\u003e=19||h\u003c7);}if(d){document.documentElement.classList.add(\\\"dark\\\");document.documentElement.style.colorScheme=\\\"dark\\\";}else{document.documentElement.classList.remove(\\\"dark\\\");document.documentElement.style.colorScheme=\\\"light\\\";}}catch(e){}})();\"}}],[\"$\",\"$L2\",null,{\"async\":true,\"strategy\":\"afterInteractive\",\"src\":\"https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6591133878918589\",\"crossOrigin\":\"anonymous\"}]]}],[\"$\",\"body\",null,{\"className\":\"font-sans antialiased\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"$L3\",null,{\"children\":[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]}],[\"$\",\"$L6\",null,{}]]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[null,[\"$\",\"$L4\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L5\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":\"$undefined\",\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[\"$L7\",[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/immutable/chunks/260x17h4kmxpf.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$L8\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@a\"}]}]]}],{},null,false,null]},null,false,\"$b\"]},null,false,\"$b\"]},null,false,null],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$Lc\",null,{\"children\":\"$Ld\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$Le\",null,{\"children\":[\"$\",\"$9\",null,{\"name\":\"Next.Metadata\",\"children\":\"$Lf\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$10\",[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/immutable/chunks/0dgquxq8lif4u.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}]]],\"S\":false,\"h\":null,\"r\":\"$undefined\",\"s\":\"$undefined\",\"a\":\"$undefined\",\"l\":\"$undefined\",\"p\":\"$undefined\",\"d\":\"$undefined\",\"b\":\"RizMhyTE-JBQLFsB06sQZ\"}\nb:C\nd:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}],[\"$\",\"meta\",\"2\",{\"name\":\"theme-color\",\"content\":\"#f7f7f5\"}]]\n11:I[53740,[\"/_next/static/immutable/chunks/2_0l-r005r02x.js\"],\"IconMark\"]\na:null\nf:[[\"$\",\"title\",\"0\",{\"children\":\"How I built a browser Java compiler with Monaco Editor — Mahesh | Mahesh Chopade Portfolio\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Exploring the engineering behind bringing a full Java compilation and execution environment directly into the web browser without managing heavy backend servers.\"}],[\"$\",\"link\",\"2\",{\"rel\":\"author\",\"href\":\"https://heymahesh.in\"}],[\"$\",\"meta\",\"3\",{\"name\":\"author\",\"content\":\"Mahesh Chopade\"}],[\"$\",\"meta\",\"4\",{\"name\":\"keywords\",\"content\":\"Mahesh Chopade,heymahesh,Full Stack Developer,AI Engineer,Next.js,React,LangGraph,Node.js,TypeScript,Software Engineer Pune\"}],[\"$\",\"meta\",\"5\",{\"name\":\"creator\",\"content\":\"Mahesh Chopade\"}],[\"$\",\"meta\",\"6\",{\"name\":\"publisher\",\"content\":\"Mahesh Chopade\"}],[\"$\",\"meta\",\"7\",{\"name\":\"robots\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"8\",{\"name\":\"googlebot\",\"content\":\"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1\"}],[\"$\",\"meta\",\"9\",{\"name\":\"category\",\"content\":\"technology\"}],[\"$\",\"link\",\"10\",{\"rel\":\"canonical\",\"href\":\"https://heymahesh.in/blog/how-i-built-a-browser-java-compiler-with-monaco-editor\"}],[\"$\",\"meta\",\"11\",{\"property\":\"og:title\",\"content\":\"How I built a browser Java compiler with Monaco Editor\"}],[\"$\",\"meta\",\"12\",{\"property\":\"og:description\",\"content\":\"Exploring the engineering behind bringing a full Java compilation and execution environment directly into the web browser without managing heavy backend servers.\"}],[\"$\",\"meta\",\"13\",{\"property\":\"og:type\",\"content\":\"article\"}],[\"$\",\"meta\",\"14\",{\"property\":\"article:published_time\",\"content\":\"2026-08-30\"}],[\"$\",\"meta\",\"15\",{\"name\":\"twitter:card\",\"content\":\"summary_large_image\"}],[\"$\",\"meta\",\"16\",{\"name\":\"twitter:creator\",\"content\":\"@heymahesh\"}],[\"$\",\"meta\",\"17\",{\"name\":\"twitter:title\",\"content\":\"Mahesh Chopade | Full Stack Developer \u0026 AI Engineer\"}],[\"$\",\"meta\",\"18\",{\"name\":\"twitter:description\",\"content\":\"Official portfolio of Mahesh Chopade (heymahesh), a Full Stack Developer \u0026 AI Engineer based in Pune, India. Explore production web applications built with React, Next.js, Node.js, and AWS. Discover generative AI systems, LangGraph agents, case studies, and engineering essays by Mahesh Chopade.\"}],[\"$\",\"meta\",\"19\",{\"name\":\"twitter:image\",\"content\":\"https://heymahesh.in/og-image.png\"}],[\"$\",\"meta\",\"20\",{\"name\":\"twitter:image:alt\",\"content\":\"Mahesh Chopade Portfolio — heymahesh.in\"}],[\"$\",\"link\",\"21\",{\"rel\":\"icon\",\"href\":\"/favicon.svg\"}],[\"$\",\"$L11\",\"22\",{}]]\n13:I[85846,[\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\",\"/_next/static/immutable/chunks/260x17h4kmxpf.js\"],\"\"]\n14:I[87284,[\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\",\"/_next/static/immutable/chunks/260x17h4kmxpf.js\"],\"default\"]\n12:T414,{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"BreadcrumbList\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https://heymahesh.in\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https://heymahesh.in/blog\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"How I built a browser Java compiler with Monaco Editor\",\"item\":\"https://heymahesh.in/blog/how-i-built-a-browser-java-compiler-with-monaco-editor\"}]},{\"@type\":\"BlogPosting\",\"headline\":\"How I built a browser Java compiler with Monaco Editor\",\"description\":\"Exploring the engineering behind bringing a full Java compilation and execution environment directly into the web browser without managing heavy backend servers.\",\"datePublished\":\"2026-08-30\",\"dateModified\":\"2026-08-30\",\"mainEntityOfPage\":{\"@type\":\"WebPage\",\"@id\":\"https://heymahesh.in/blog/how-i-built-a-browser-java-compiler-with-monaco-editor\"},\"author\":{\"@type\":\"Person\",\"name\":\"Mahesh\",\"url\":\"https://heymahesh.in\"},\"publisher\":{\"@type\":\"Person\",\"name\":\"Mahesh\",\"url\":\"https://heymahesh.in\"}}]}7:[\"$\",\"div\",null,{\"className\":\"min-h-screen bg-void text-bone\",\"children\":[[\"$\",\"script\",null,{\"type\":\"application/ld+json\",\"dangerouslySetInnerHTML\":{\"__html\":\"$12\"}}],[\"$\",\"header\",null,{\"className\":\"border-b border-bone/8 bg-surface/30 backdrop-blur-md sticky top-0 z-40\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex max-w-4xl items-center justify-between px-5 py-4 sm:px-6\",\"children\":[[\"$\",\"$L13\",null,{\"href\":\"/blog\",\"className\":\"group flex items-center gap-2 font-mono text-xs uppercase tracking-wider text-ash transition-colors hover:text-bone\",\"children\":[[\"$\",\"$L14\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"m12 19-7-7 7-7\",\"key\":\"1l729n\"}],[\"path\",{\"d\":\"M19 12H5\",\"key\":\"x3x0zl\"}]],\"className\":\"lucide-arrow-left h-3.5 w-3.5 transition-transform duration-200 group-hover:-translate-x-1\"}],[\"$\",\"span\",null,{\"children\":\"All Articles\"}]]}],[\"$\",\"$L13\",null,{\"href\":\"/\",\"className\":\"font-display font-semibold tracking-tight text-bone\",\"children\":[\"Mahesh\",\".\"]}]]}]}],[\"$\",\"main\",null,{\"className\":\"mx-auto max-w-4xl px-5 py-12 sm:px-6 sm:py-20\",\"children\":[[\"$\",\"div\",null,{\"className\":\"border-b border-bone/10 pb-8\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex flex-wrap items-center gap-3 font-mono text-xs uppercase tracking-widest text-ash\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"$L14\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M8 2v3\",\"key\":\"1ioesn\"}],[\"path\",{\"d\":\"M16 2v3\",\"key\":\"otl347\"}],[\"rect\",{\"x\":\"3\",\"y\":\"3\",\"width\":\"18\",\"height\":\"18\",\"rx\":\"2\",\"key\":\"h1oib\"}],[\"path\",{\"d\":\"M3 9h18\",\"key\":\"1pudct\"}]],\"className\":\"lucide-calendar h-3.5 w-3.5 text-faint\"}],\"2026-08-30\"]}],[\"$\",\"span\",null,{\"className\":\"text-faint\",\"children\":\"•\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5\",\"children\":[[\"$\",\"$L14\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"circle\",{\"cx\":\"12\",\"cy\":\"12\",\"r\":\"10\",\"key\":\"1mglay\"}],[\"path\",{\"d\":\"M12 6v6l4 2\",\"key\":\"mmk7yg\"}]],\"className\":\"lucide-clock h-3.5 w-3.5 text-faint\"}],\"4 min read\"]}],[\"$\",\"span\",null,{\"className\":\"text-faint\",\"children\":\"•\"}],[\"$\",\"span\",null,{\"className\":\"text-bone/80\",\"children\":[\"By \",\"Mahesh\"]}]]}],[\"$\",\"h1\",null,{\"className\":\"mt-6 text-balance font-display text-[clamp(2.4rem,6vw,4.5rem)] font-bold leading-[1.04] tracking-tight text-bone\",\"children\":\"How I built a browser Java compiler with Monaco Editor\"}],[\"$\",\"p\",null,{\"className\":\"mt-5 text-lg leading-relaxed text-ash sm:text-xl\",\"children\":\"Exploring the engineering behind bringing a full Java compilation and execution environment directly into the web browser without managing heavy backend servers.\"}],[\"$\",\"div\",null,{\"className\":\"mt-6 flex flex-wrap items-center gap-2\",\"children\":[[\"$\",\"$L14\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\",\"key\":\"vktsd0\"}],[\"circle\",{\"cx\":\"7.5\",\"cy\":\"7.5\",\"r\":\".5\",\"fill\":\"currentColor\",\"key\":\"kqv944\"}]],\"className\":\"lucide-tag h-3 w-3 text-faint mr-1\"}],[\"$L15\",\"$L16\",\"$L17\",\"$L18\"]]}]]}],\"$L19\",\"$L1a\",\"$L1b\",\"$L1c\"]}],\"$L1d\"]}]\n1e:I[32358,[\"/_next/static/immutable/chunks/3kcufqeo76_wn.js\",\"/_next/static/immutable/chunks/260x17h4kmxpf.js\"],\"MarkdownRenderer\"]\n15:[\"$\",\"span\",\"Java\",{\"className\":\"border border-bone/12 bg-surface/50 px-2.5 py-1 font-mono text-[0.65rem] uppercase tracking-wider text-bone\",\"children\":[\"#\",\"Java\"]}]\n16:[\"$\",\"span\",\"Docker\",{\"className\":\"border border-bone/12 bg-surface/50 px-2.5 py-1 font-mono text-[0.65rem] uppercase tracking-wider text-bone\",\"children\":[\"#\",\"Docker\"]}]\n17:[\"$\",\"span\",\"Monaco\",{\"className\":\"border border-bone/12 bg-surface/50 px-2.5 py-1 font-mono text-[0.65rem] uppercase tracking-wider text-bone\",\"children\":[\"#\",\"Monaco\"]}]\n18:[\"$\",\"span\",\"Web\",{\"className\":\"border border-bone/12 bg-surface/50 px-2.5 py-1 font-mono text-[0.65rem] uppercase tracking-wider text-bone\",\"children\":[\"#\",\"Web\"]}]\n1f:Tfd0,# How I built a browser Java compiler with Monaco Editor\n\nIn the modern web era, developers expect instant feedback. Whether it's a sandbox, a tutorial, or an interactive technical interview, requiring a user to download a JDK and configure their IDE is a massive point of friction. \n\nI wanted to build an experience similar to LeetCode or CodePen, but specifically for Java—a notoriously heavy and server-dependent language. Here is how I built a robust browser-based Java compiler using the Monaco Editor and isolated execution environments.\n\n## The Frontend: Monaco Editor\n\nThe first step was providing a world-class typing experience. You can't build a serious web IDE with a basic \\`\u003ctextarea\u003e\\`. \n\nI integrated **Monaco Editor**, the very same engine that powers VS Code. Setting up Monaco in a React environment is relatively straightforward thanks to wrappers like \\`@monaco-editor/react\\`, but configuring it for Java requires extra work. \n\nOut of the box, Monaco provides basic syntax highlighting for Java, but it lacks semantic understanding (autocomplete, error linting, import suggestions). To achieve true IDE features, I had to connect Monaco to a Language Server Protocol (LSP). I set up a lightweight WebSocket connection between Monaco on the client and an Eclipse JDT Language Server running in a container. This allowed the editor to show real-time squiggly lines and intelligent code completion, dramatically elevating the user experience.\n\n## The Execution Challenge\n\nJava isn't interpreted in the browser like JavaScript. It must be compiled (\\`javac\\`) to bytecode and then executed (\\`java\\`) by a JVM. \n\nInitially, I considered compiling Java to WebAssembly (Wasm) to run entirely client-side. While projects like CheerpJ exist, they often come with significant overhead or limitations regarding the standard library and threading. I needed standard, predictable execution.\n\nI opted for a highly isolated backend execution engine.\n\n### Building the Execution Pipeline\n\nWhen a user clicks \"Run\", the following sequence happens:\n\n1. **Payload Transmission**: The raw Java code string is sent via a REST API to a Node.js orchestration server.\n2. **Container Provisioning**: The orchestrator talks to the Docker daemon to spin up an ephemeral, deeply restricted Docker container based on a minimal Alpine Linux OpenJDK image.\n3. **Compilation**: Inside the container, the code is saved to a \\`Main.java\\` file. A strict timeout (e.g., 5 seconds) is applied, and \\`javac\\` is executed. If compilation fails, the stderr is piped directly back to the client and the container is killed.\n4. **Execution**: If compilation succeeds, the \\`java\\` command runs the compiled class. Again, a strict timeout and memory limit (e.g., 128MB) are enforced.\n5. **Output Streaming**: The \\`stdout\\` and \\`stderr\\` are captured and streamed back to the frontend dashboard.\n6. **Cleanup**: Regardless of success, failure, or timeout, the ephemeral container is immediately destroyed.\n\n## Security: The Ultimate Priority\n\nExecuting arbitrary, untrusted code from the internet is fundamentally dangerous. A malicious user could write Java code to attempt a fork bomb, mine cryptocurrency, or access internal network resources.\n\nTo mitigate this, the execution containers are locked down heavily:\n- **No Network Access**: The containers are run without network interfaces (\\`--network none\\`).\n- **Read-Only Filesystem**: The root filesystem is mounted as read-only.\n- **Resource Quotas**: Strict CPU and memory limits are enforced at the Docker level.\n- **PIDs Limit**: The maximum number of processes is capped to prevent fork bombs.\n\n## Closing Thoughts\n\nBuilding a browser-based Java compiler was a fantastic exercise in balancing frontend user experience with hardcore backend security. The combination of Monaco Editor for the UI and ephemeral Docker containers for execution provides a seamless, safe, and powerful platform.\n\n*Mahesh Chopade builds developer tools and modern web experiences. Check out my other projects on my portfolio.*19:[\"$\",\"div\",null,{\"className\":\"py-10\",\"children\":[\"$\",\"$L1e\",null,{\"content\":\"$1f\"}]}]\n1a:[\"$\",\"div\",null,{\"className\":\"mt-6 flex items-center gap-4 border-t border-bone/10 pt-8\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-mono text-xs uppercase tracking-widest text-ash\",\"children\":\"Share this article\"}],[\"$\",\"a\",null,{\"href\":\"https://twitter.com/intent/tweet?url=https%3A%2F%2Fheymahesh.in%2Fblog%2Fhow-i-built-a-browser-java-compiler-with-monaco-editor\u0026text=Check%20out%20this%20article%3A%20How%20I%20built%20a%20browser%20Java%20compiler%20with%20Monaco%20Editor\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"className\":\"flex items-center justify-center w-8 h-8 rounded-full border border-bone/20 hover:border-bone/50 transition-colors\",\"aria-label\":\"Share on X (Twitter)\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"w-4 h-4 fill-bone\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"d\":\"M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z\"}]}]}],[\"$\",\"a\",null,{\"href\":\"https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fheymahesh.in%2Fblog%2Fhow-i-built-a-browser-java-compiler-with-monaco-editor\",\"target\":\"_blank\",\"rel\":\"noreferrer noopener\",\"className\":\"flex items-center justify-center w-8 h-8 rounded-full border border-bone/20 hover:border-bone/50 transition-colors\",\"aria-label\":\"Share on LinkedIn\",\"children\":[\"$\",\"svg\",null,{\"viewBox\":\"0 0 24 24\",\"className\":\"w-4 h-4 fill-bone\",\"aria-hidden\":\"true\",\"children\":[\"$\",\"path\",null,{\"d\":\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z\"}]}]}]]}]\n1b:[\"$\",\"div\",null,{\"className\":\"mt-14 border-t border-bone/10 pt-10\",\"children\":[[\"$\",\"span\",null,{\"className\":\"font-mono text-xs uppercase tracking-widest text-ash\",\"children\":\"Continue Reading\"}],[\"$\",\"div\",null,{\"className\":\"mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2\",\"children\":[[\"$\",\"$L13\",\"jev-ai-explained\",{\"href\":\"/blog/jev-ai-explained\",\"className\":\"group block border border-bone/10 bg-surface/20 p-5 transition-colors hover:border-bone/30 hover:bg-surface/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between font-mono text-[0.65rem] uppercase tracking-wider text-faint\",\"children\":[[\"$\",\"span\",null,{\"children\":\"2026-10-07\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-ash group-hover:text-bone\",\"children\":[\"Read \",[\"$\",\"$L14\",null,{\"ref\":\"$undefined\",\"iconNode\":[[\"path\",{\"d\":\"M5 12h14\",\"key\":\"1ays0h\"}],[\"path\",{\"d\":\"m12 5 7 7-7 7\",\"key\":\"xquz4c\"}]],\"className\":\"lucide-arrow-right h-3 w-3 transition-transform group-hover:translate-x-1\"}]]}]]}],[\"$\",\"h4\",null,{\"className\":\"mt-2 font-display text-base font-semibold tracking-tight text-bone group-hover:text-bone\",\"children\":\"Jev AI Explained: The Model That Doesn't Generate Text, It Makes Decisions\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-ash line-clamp-2\",\"children\":\"Jev is a new kind of AI model built for making decisions instead of generating text. Learn how TypeSafe's System One model works, how it compares with GPT and other LLMs, where it fits in AI agents, what the benchmarks show, and whether developers should actually use it.\"}]]}],[\"$\",\"$L13\",\"best-ai-coding-assistants-for-beginners-in-2026\",{\"href\":\"/blog/best-ai-coding-assistants-for-beginners-in-2026\",\"className\":\"group block border border-bone/10 bg-surface/20 p-5 transition-colors hover:border-bone/30 hover:bg-surface/40\",\"children\":[[\"$\",\"div\",null,{\"className\":\"flex items-center justify-between font-mono text-[0.65rem] uppercase tracking-wider text-faint\",\"children\":[[\"$\",\"span\",null,{\"children\":\"2026-09-09\"}],[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1 text-ash group-hover:text-bone\",\"children\":[\"Read \",[\"$\",\"$L14\",null,{\"ref\":\"$undefined\",\"iconNode\":\"$1b:props:children:1:props:children:0:props:children:0:props:children:1:props:children:1:props:iconNode\",\"className\":\"lucide-arrow-right h-3 w-3 transition-transform group-hover:translate-x-1\"}]]}]]}],[\"$\",\"h4\",null,{\"className\":\"mt-2 font-display text-base font-semibold tracking-tight text-bone group-hover:text-bone\",\"children\":\"Best AI coding assistants for beginners in 2026 (Claude Code, Copilot, Cursor compared simply)\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-ash line-clamp-2\",\"children\":\"New to coding and wondering which AI assistant to use? This simple comparison of Claude Code, GitHub Copilot, and Cursor explains what each tool does best and which one is worth choosing as a beginner in 2026.\"}]]}]]}]]}]\n1c:[\"$\",\"div\",null,{\"className\":\"mt-14 border border-bone/10 bg-surface/30 p-6 sm:p-8\",\"children\":[\"$\",\"div\",null,{\"className\":\"flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between\",\"children\":[[\"$\",\"div\",null,{\"children\":[[\"$\",\"span\",null,{\"className\":\"font-mono text-[0.65rem] uppercase tracking-widest text-ash\",\"children\":\"Written by\"}],[\"$\",\"h3\",null,{\"className\":\"font-display text-xl font-semibold text-bone\",\"children\":\"Mahesh\"}],[\"$\",\"p\",null,{\"className\":\"mt-1 text-xs text-ash\",\"children\":\"Full Stack Developer · A Freelancer\"}]]}],[\"$\",\"div\",null,{\"className\":\"flex items-center gap-3\",\"children\":[[\"$\",\"$L13\",null,{\"href\":\"/#contact\",\"className\":\"border border-bone/20 bg-bone px-4 py-2 font-mono text-xs font-semibold uppercase tracking-wider text-void hover:opacity-90\",\"children\":\"Get in Touch\"}],[\"$\",\"$L13\",null,{\"href\":\"/blog\",\"className\":\"border border-bone/15 bg-surface/50 px-4 py-2 font-mono text-xs uppercase tracking-wider text-bone hover:border-bone/40\",\"children\":\"More Articles\"}]]}]]}]}]\n1d:[\"$\",\"footer\",null,{\"className\":\"border-t border-bone/8 py-10\",\"children\":[\"$\",\"div\",null,{\"className\":\"mx-auto flex max-w-4xl flex-col items-center justify-between gap-4 px-5 font-mono text-xs uppercase tracking-wider text-faint sm:flex-row sm:px-6\",\"children\":[[\"$\",\"span\",null,{\"children\":[\"Mahesh\",\" © \",2026]}],[\"$\",\"$L13\",null,{\"href\":\"/blog\",\"className\":\"hover:text-bone\",\"children\":\"← Back to all articles\"}]]}]}]\n"])</script></body></html>