Console

Console messages are shown in the integrated console (in the tools pane, below the result page), without having to open the native browser console.

Messages can be sent to the console using the standard console methods in the code editor (e.g. console.log, console.warn, console.error, console.table, ...etc). The console can also be used as REPL (read–eval–print loop) using the integrated console input.

The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input.

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

Demo: (console=full)

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "console": "full",
    "js": "const x = 5;\nconsole.log('x:', x);\nconsole.log({x, y: 6});\nconsole.table({x, y: 6});\nconsole.warn('take care!');\nconst z = x * y;"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "console": "full",
    "js": "const x = 5;\nconsole.log('x:', x);\nconsole.log({x, y: 6});\nconsole.table({x, y: 6});\nconsole.warn('take care!');\nconst z = x * y;"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "console": "full",
    "js": "const x = 5;\nconsole.log('x:', x);\nconsole.log({x, y: 6});\nconsole.table({x, y: 6});\nconsole.warn('take care!');\nconst z = x * y;"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "console": "full",
    "js": "const x = 5;\nconsole.log('x:', x);\nconsole.log({x, y: 6});\nconsole.table({x, y: 6});\nconsole.warn('take care!');\nconst z = x * y;"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "params": {
    "console": "full",
    "js": "const x = 5;\nconsole.log('x:', x);\nconsole.log({x, y: 6});\nconsole.table({x, y: 6});\nconsole.warn('take care!');\nconst z = x * y;"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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

 

tip

Setting the querystring languages only shows these languages. Selecting one language and setting console to full gives an environment similar to a REPL.

Demo: (Python - print to console)

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "languages": "py",
    "console": "full",
    "py": "print('hello from python')"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "languages": "py",
    "console": "full",
    "py": "print('hello from python')"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "languages": "py",
    "console": "full",
    "py": "print('hello from python')"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "languages": "py",
    "console": "full",
    "py": "print('hello from python')"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "params": {
    "languages": "py",
    "console": "full",
    "py": "print('hello from python')"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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