Try CodeMirror

Write a program to define an editor, then see what the resulting editor looks like. This can be useful to try things out or to share scripts to explain something or illustrate a bug report.

@codemirror and @lezer packages can be imported directly by name. Other imports should be URLs. You'll usually want your script to create an editor in document.body. Press Ctrl-Space to run the current code, and see the result (boxed in an <iframe>) in the “Ouput” tab. When errors occur or things are logged to the console, you can find them in the “Log” tab.