I built a custom IDE in the browser as part of the Open Data Capture platform. It is based on the Monaco editor, which also powers VS Code. Unfortunately, there are very few examples online showing how to use Monaco with more advanced features (e.g., TypeScript/JSX support, Prettier integration, multiple files), so I figure this could be helpful for some folks out there.

I built this to allow semi-technical users to design instruments (e.g., forms and interactive tasks) for our data capture platform. It includes a custom build toolchain, based on the esbuild-wasm build, that transpiles the source files to the format expected by our system. It supports TypeScript, JSX, CSS, HTML, and images. The idea is to abstract the build process and tooling into the browser so that users can get started building instruments as soon as possible.

In terms of next steps, I have a colleague who is just learning React/TypeScript and wants to try implementing VIM mode so that could be coming soon!

The source code is in our monorepo (in apps/playground), but it is Apache-licensed so feel free to rip it out and use it for whatever you want!

https://github.com/DouglasNeuroInformatics/OpenDataCapture

Would love to hear everybody’s thoughts!