A code editor that integrates into the browser

Hacker News

Share card

A code editor that integrates into the browser

When the startup I was working for shut down, I knew it would probably be a while before my health allowed me to commit to a new role, so I decided to start working on some personal projects to keep my mind active and engaged. With AI-augmented VS Code forks being all the rage at the time, I wanted to take a slightly different angle on a code editor/viewer using the same core technology. That led me to building Tachi Code, a Monaco-based code editor that integrates directly into your browser as an extension to streamline your more ephemeral coding tasks, so you can spend less time switching between your code editor and browser. The original flow that piqued my interest was viewing raw source files or API responses. Historically, I've used a JSON formatter extension to prettify JSON, but I wanted something more powerful, more universal, and quite frankly, something that looked better, so I built Tachi Code with the ability to detect when you're viewing pre-formatted text and inject itself into the page, so it's always beautifully syntax highlighted, foldable, and regex searchable. Then I added context menu integrations, so you could quickly edit snippets, compare text, or view the current page's source in Tachi Code's editor. The browser extension works offline with the only external HTTP requests going to GitHub to retrieve JSON Schemas or additional themes. All user data stays local. The only tracking is CloudFlare's web analytics beacon on TachiCode.dev (not present in the browser extension or in the EU). TachiCode.dev is a sandbox environment that serves the latest commit of Tachi Code's editor hosted on CloudFlare Pages. The core stack is: - React 19 - Monaco Editor - Radix UI - Zustand - Shiki - WXT (full SBOM is available via the about dialog if you want to dig deeper) Monaco Editor provides the code and diff editors, as well as low level systems for configuration and theming. There's a lot of hackery involved in surfacing those systems and integrating them into the larger React app. Shiki is used to provide more complete syntax highlighting than Monaco Editor provides out of the box. The rest of the UI is primarily based on Radix UI components, typically starting from a shadcn template and then reworked to use colors provided by the theme system. Zustand is my go-to for any kind of shared/persistent state. WXT just turns browser extension development and publishing into a breeze. If you've got any feedback or a question about how the app was developed, I'd love to hear it!