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} />);
}

Vue

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

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

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "template": "javascript"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

<live-codes
  template="javascript"></live-codes>

<script type="module">
  import "livecodes/web-components";
</script>

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} />);
}

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 LiveCodes from 'livecodes/svelte';

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

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.params = {
    "activeEditor": "script",
    "js": "const { v4 } = require('uuid');\n\ndocument.body.innerHTML = v4();",
    "compiled": "open"
  };
</script>

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} />);
}

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 LiveCodes from 'livecodes/svelte';

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>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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} />);
}

Preact

import LiveCodes from 'livecodes/preact';

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} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.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>

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