Svelte2tsx REPL

import svelte2tsx from 'svelte2tsx';

const codeEl = document.getElementById('code');
const outputEl = document.getElementById('output');

codeEl.addEventListener('keyup', () => {
  outputEl.classList.remove('error');

  try {
    const svelteCode = codeEl.value;
    const svelteTsx = svelte2tsx(svelteCode, {});

    outputEl.textContent = svelteTsx.code;
  } catch (err) {
    outputEl.classList.add('error');
    outputEl.textContent = err.message;
  }
});

{
  "name": "@plnkr/starter-react",
  "version": "1.0.2",
  "description": "React starter template",
  "dependencies": {
    "svelte2tsx": "^0.1.71"
  },
  "plnkr": {
    "runtime": "system",
    "useHotReload": false
  }
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  display: flex;
  flex-direction: row;
  margin: 0;
  padding: 0;
}

body > #code {
  flex: 1 0 50%;
  border: none;
  border-right: 2px solid #f5f5f5;
  font-size: 14px;
  padding: 0.2em 0.4em;
}

body > #output {
  flex: 1 0 50%;
  font-family: monospace;
  font-size: 14px;
  padding: 0.2em 0.4em;
  white-space: pre;
}

#output.error {
  color: #f00;
}

#output:empty:after {
  content: 'Output goes here';
  color: #999;
}

<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <textarea id="code" placeholder="<h1>Code here</h1>"></textarea>
    <div id="output"></div>
    <script src="./index.js"></script>
  </body>
</html>