JavaScript

LiveCodes runs JavaScript (JS) in the browser. Accordingly, it has access to the DOM and other Web APIs, but it does not have access to Node.js APIs such as the file system or process information.

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "javascript"
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "template": "javascript"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "javascript"
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "template": "javascript"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "template": "javascript"
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Solid

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

export default function App() {
  const options: EmbedOptions = {
  "template": "javascript"
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Usage

The JavaScript code is added as-is without any transformations to the result page inside a <script> tag.

If the code has imports or exports, the <script> tag will have type="module" attribute.

The only case where the code is modified is when CommonJS requires are used to import external dependencies (not recommended - use ESM imports instead). These requires are converted to ESM imports with some glue code to make them work.

Example:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "activeEditor": "script",
    "js": "const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();",
    "compiled": "open"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "activeEditor": "script",
    "js": "const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();",
    "compiled": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "activeEditor": "script",
    "js": "const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();",
    "compiled": "open"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "activeEditor": "script",
    "js": "const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();",
    "compiled": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "params": {
    "activeEditor": "script",
    "js": "const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();",
    "compiled": "open"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Solid

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

export default function App() {
  const options: EmbedOptions = {
  "params": {
    "activeEditor": "script",
    "js": "const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();",
    "compiled": "open"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

External Modules

Modules can be imported from various sources (e.g. npm, deno.land/x, jsr, CDNs, GitHub, etc.) including bare module imports. The modules are loaded from CDNs using importmaps (see module resolution for details).

Example:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "activeEditor": "script",
    "js": "import _ from 'lodash';\n\nconst arr = [1, 2, 3, 4, 5];\nconsole.log(_.shuffle(arr)); // shuffle the array\n",
    "console": "open"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "params": {
    "activeEditor": "script",
    "js": "import _ from 'lodash';\n\nconst arr = [1, 2, 3, 4, 5];\nconsole.log(_.shuffle(arr)); // shuffle the array\n",
    "console": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "activeEditor": "script",
    "js": "import _ from 'lodash';\n\nconst arr = [1, 2, 3, 4, 5];\nconsole.log(_.shuffle(arr)); // shuffle the array\n",
    "console": "open"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "params": {
    "activeEditor": "script",
    "js": "import _ from 'lodash';\n\nconst arr = [1, 2, 3, 4, 5];\nconsole.log(_.shuffle(arr)); // shuffle the array\n",
    "console": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

let options = $state({
  "params": {
    "activeEditor": "script",
    "js": "import _ from 'lodash';\n\nconst arr = [1, 2, 3, 4, 5];\nconsole.log(_.shuffle(arr)); // shuffle the array\n",
    "console": "open"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Solid

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

export default function App() {
  const options: EmbedOptions = {
  "params": {
    "activeEditor": "script",
    "js": "import _ from 'lodash';\n\nconst arr = [1, 2, 3, 4, 5];\nconsole.log(_.shuffle(arr)); // shuffle the array\n",
    "console": "open"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}

Language Info

Name

javascript

Alias

js

Extensions

js, mjs

Editor

script

Compiler

JavaScript runs natively in the browser without compilation.

Code Formatting

Using Prettier.

Starter Template

https://livecodes.io/?template=Javascript

Links

• JavaScript Reference on MDN
• Web API