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 “Output” tab. When errors occur or things are logged to the console, you can find them in the “Log” tab.

See the bundling example for information on how to set up an editor like this on your own pages.