microsoft/monaco-editor

The Monaco Editor is the code editing component that powers Visual Studio Code, extracted and packaged so it can be embedded directly inside any web application running in a browser. If you have ever used VS Code, you have already used Monaco, it is the part you actually type into. The editor solves the problem of needing a sophisticated, feature-rich code editing experience inside a web page without building one from scratch. It comes with syntax highlighting, code completion with IntelliSense (the pop-up suggestions that show available methods and properties), hover tooltips, error highlighting, multiple cursors, find-and-replace, code folding, and a large number of other features developers expect from a professional code editor. Internally, the editor is built around a few key concepts. A "model" represents the content being edited, think of it as an in-memory file with its own language setting and edit history. An "editor" is the visual component you place on your web page that displays a model. "Providers" are the services that power smart features like auto-complete, they work against models and can be connected to a language server using the standard Language Server Protocol. A developer would use Monaco when building an in-browser coding tool, such as an online code playground, an IDE-in-the-browser, a configuration editor, or a SQL query editor. Real-world examples include the editors on platforms like CodeSandbox and various cloud database consoles. The tech stack is JavaScript and TypeScript, and it is distributed as an npm package. It runs purely in the browser using ES modules, and offloads computationally heavy language processing work to web workers (background browser threads) so the main page stays responsive.