Compiled Code

The resulting compiled/transpiled code can be seen in the compiled code viewer (in the tools pane) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.).

This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled.

e.g. https://livecodes.io/?ts&compiled=full
sets TypeScript as the active editor and shows compiled code viewer maximized.

This demo shows TypeScript code along with the compiled Javascript code, similar to the official TypeScript Playground:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "import": "https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",
  "params": {
    "ts-selector": "playground.ts",
    "activeEditor": "script",
    "compiled": "full"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "import": "https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",
  "params": {
    "ts-selector": "playground.ts",
    "activeEditor": "script",
    "compiled": "full"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "import": "https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",
  "params": {
    "ts-selector": "playground.ts",
    "activeEditor": "script",
    "compiled": "full"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "import": "https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",
  "params": {
    "ts-selector": "playground.ts",
    "activeEditor": "script",
    "compiled": "full"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

const options = {
  "import": "https://gist.github.com/hatemhosny/4bed283ef9757a6a541aee685c710dc7",
  "params": {
    "ts-selector": "playground.ts",
    "activeEditor": "script",
    "compiled": "full"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>