[HN Gopher] Show HN: A code editor that integrates into the browser
       ___________________________________________________________________
        
       Show HN: 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!
        
       Author : quintu5
       Score  : 31 points
       Date   : 2025-07-24 17:28 UTC (5 hours ago)
        
 (HTM) web link (tachicode.dev)
 (TXT) w3m dump (tachicode.dev)
        
       | solumos wrote:
       | This is cool, I worked on something similar sort of thing over
       | the winter, more focused on a local-first leetcode/coderpad, with
       | a way to execute code in the browser using WebAssembly, and a way
       | to share code over WebRTC
       | 
       | https://codenow-mu.vercel.app/problems/0001-fizzbuzz
        
         | quintu5 wrote:
         | That's pretty slick! I've avoided digging into project
         | management and code execution so far in order to keep the scope
         | manageable.
         | 
         | What does the process for adding support for additional wasm-
         | capable languages look like?
        
           | solumos wrote:
           | It's a pretty big lift. Python was somewhat easy with
           | pyodide, but I couldn't get Java to work locally. There's a
           | company called CheerpJ that can do it over an API though.
           | 
           | https://pyodide.org/en/stable/ https://cheerpj.com/
        
             | quintu5 wrote:
             | I think if I was going to look into code execution in Tachi
             | Code, it'd probably as part of a transformation into some
             | sort of remote development experience rather than pursue
             | wasm and all its complexities.
        
       | mbildner wrote:
       | Can confirm I use this and it's super convenient to have json
       | payloads open right up in a useful editor
        
       ___________________________________________________________________
       (page generated 2025-07-24 23:01 UTC)