codemirror-ts

You can import this a val like this in browser to run codemirror-ts. Bundling done with esm.sh.

Working demo: preview / source

Run an editor like so:

Create val
/** @jsxImportSource https://esm.sh/react */
import { renderToString } from "npm:react-dom/server";

export default async function(req: Request): Promise<Response> {
  return new Response(
    renderToString(
      <>
        <script type="module" src="https://esm.town/v/maxm/codemirrorTsBrowser" />
        <form>
          <textarea id="editorSource" className="for-codemirror" name="editorSource">
            {`let hasAnError: string = 10;

function increment(num: number) {
  return num + 1;
}

increment('not a number');`}
          </textarea>
          <button id="submit" type="submit">Submit</button>
        </form>
      </>,
    ),
    { headers: { "content-type": "text/html" } },
  );
}