A native desktop code editor built with Wails, Go, React, and Monaco Editor.

Day 28. Three days left. Yesterday was a terminal emulator. Today? A code editor.

Not a web app. Not something running in a browser tab. A native desktop application you install on your machine. The kind of thing that takes teams years to build.

The Prompt

Download it from the latest release

> "Build a native desktop code editor using Wails v2 with Go backend and React frontend with Monaco Editor. File tree sidebar, tabs, syntax highlighting. Multi-platform builds for macOS, Linux, and Windows."

How It Was Built

This one was a beast. Watchfire broke the work down into 43 tasks, which is by far the most tasks for any project in this challenge. And a lot of those were CI fixes, because building native desktop apps for three platforms turns out to be... not straightforward.

The stack is Wails v2 for the native wrapper, Go for the backend file system operations, React for the UI, and Monaco Editor (the same editor engine that powers VS Code) for the actual code editing. The Go backend handles all the file I/O, reading directories, opening files, saving changes, and exposes those as functions the React frontend can call through Wails bindings.

The CI pipeline was where the real pain showed up. WebKit dependencies on Linux, build tags that needed to be just right, Wails bindings generation, cross-platform packaging. I lost count of how many "fix CI" commits there were. The git log is full of them. But that's the reality of shipping native apps. The code can work perfectly on your machine and still fail spectacularly in a GitHub Actions runner.

What I Got

A proper welcome screen. Quick actions for opening folders and files, recent projects list, and a keyboard shortcuts reference. It looks like an actual IDE welcome page.

File tree that works. Open a folder and you get a full directory tree in the sidebar with expand/collapse, file icons, and the whole deal. There's a minimap at the bottom showing a bird's eye view of the file structure.

Monaco Editor doing its thing. Full syntax highlighting, line numbers, the minimap on the right side. It's the same editing experience as VS Code because it literally is the same editor component. JavaScript, Go, TypeScript, JSON, whatever you open gets proper highlighting.

...

---

Read the full article →