playground-elements

index.html

<link
  rel="stylesheet"
  href="/node_modules/playground-elements/themes/neo.css"
/>
<script type="module" src="/node_modules/playground-elements/playground-ide.js"
></script>

<playground-ide
  id="playground"
  resizable
  editable-file-system
  line-numbers
  line-wrapping
  class="playground-theme-neo"
>
</playground-ide>

<script>
  const ide = document.querySelector("playground-ide");
  ide.config = {
    files: {
      "index.html": {
        content: `<!-- playground-hide --><script type="module" src="typescript.js"><\/script>
<link rel="stylesheet" href="style.css"><!-- playground-hide-end -->

<h1>Hello World</h1>`,
      },
      "typescript.ts": {
        content: "console.log('hello');",
      },
      "style.css": {
        content: "body { font-family: system-ui; }",
      },
    },
  };
</script>

<style>
  #playground {
    --playground-code-font-family: Roboto Mono, monospace;
  }
</style>