Show HN: A code editor that integrates into the browser(tachicode.dev)
tachicode.dev
Show HN: A code editor that integrates into the browser
https://tachicode.dev/
10 comments
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
https://codenow-mu.vercel.app/problems/0001-fizzbuzz
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?
What does the process for adding support for additional wasm-capable languages look like?
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/
https://pyodide.org/en/stable/ https://cheerpj.com/
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.
Looks great!
Can confirm I use this and it's super convenient to have json payloads open right up in a useful editor
great idea! but I've had trouble getting it to work. Try this sample JSON here https://gist.github.com/sunilshenoy/23a3e7132c27d62599ba741b... and click on RAW. Tachi pops up but fails to show the json.
I'll keep the extension installed for now, hoping you'll patch it.
I'll keep the extension installed for now, hoping you'll patch it.
Thanks for trying it out!
Loading that gist works for me on both Firefox and Chrome.
You can submit a bug report on GitHub with more environment details, screenshots, and console logs (if available) and I might be able to take a closer look.
https://github.com/tachi-code/tachi-code/issues/new?template...
Loading that gist works for me on both Firefox and Chrome.
You can submit a bug report on GitHub with more environment details, screenshots, and console logs (if available) and I might be able to take a closer look.
https://github.com/tachi-code/tachi-code/issues/new?template...
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!