Tools Pane

The resizeable tools pane (below the result page) provides an area for developer tools. This currently includes:

• Console
• Compiled code viewer
• Tests
• Open result page in new window (not in embeds)
• Broadcast status (not in embeds)
• Loading spinner that appears when the result page is loading

The pane can be resized by dragging the bar. Clicking a tool button toggles opening/closing the pane. Double-click toggles maximize/close.

It can be configured to have any of the following states:

• closed (default)
• open
• full
• none

e.g. https://livecodes.io/?console=open&js=console.log('hello')
opens the console and sets JavaScript code.

Demo: (console=open)

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "console": "open",
    "js": "console.log('hello')"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "console": "open",
    "js": "console.log('hello')"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "console": "open",
    "js": "console.log('hello')"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "console": "open",
    "js": "console.log('hello')"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "params": {
    "console": "open",
    "js": "console.log('hello')"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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

 

Demo: (console=full)

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "console": "full",
    "js": "console.log('hello')"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "console": "full",
    "js": "console.log('hello')"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "console": "full",
    "js": "console.log('hello')"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "console": "full",
    "js": "console.log('hello')"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "params": {
    "console": "full",
    "js": "console.log('hello')"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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