Getting Started

There are multiple options:

Standalone App

The easiest way to get started with LiveCodes is to just use the app (https://livecodes.io).

It is packed with features and offers various ways to import code.

Embedded Playgrounds

LiveCodes playgrounds can be easily embedded into any web page. This can be achieved using:

App Embed Screen

The standalone app allows you to embed any project from the embed screen. The UI allows setting embed options and shows a preview of the embedded playground.
Copy the generated code snippet (at the bottom of the screen) and add it to the web page that you want to embed the playground in.

SDK

LiveCodes SDK is available as npm package to allow easy embedding and communication with playgrounds.

Option 1: Using a bundler

Install from npm.

npm i livecodes

then you can use it like that:

index.js

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  template: 'react',
  // other embed options
});

Option 2: Load from CDN

ESM:

index.html

<div id="container"></div>
<script type="module">
  import { createPlayground } from 'https://unpkg.com/[email protected]';

  createPlayground('#container', {
    template: 'react',
    // other embed options
  });
</script>

UMD:

index.html

<div id="container"></div>
<script src="https://unpkg.com/[email protected]/livecodes.umd.js"></script>
<script>
  // the UMD version provides the global object `livecodes`
 livecodes.createPlayground('#container', {
    template: 'react',
    // other embed options
 });
</script>

Add your own content

You may use any of the methods to prefill the playground with your own code.

Example:

index.js

import { createPlayground } from 'livecodes';

const config = {
  markup: {
    language: 'markdown',
    content: '# Hello LiveCodes!',
  },
  style: {
    language: 'css',
    content: 'body { color: blue; }',
  },
  script: {
    language: 'javascript',
    content: 'console.log("hello from JavaScript!");',
  },
  activeEditor: 'script',
};

createPlayground('#container', { config, params: { console: 'open' } });

Live demo:
(this is an interactive playground - try editing the code!)

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Please refer to the section on Embedded Playgrounds for more details.

Self-Hosting

LiveCodes can be hosted on any static file server or CDN.

The easiest way is to download the app from releases, extract the folder and add it to your website.

Please check the section on self-hosting for other methods of self-hosting, including the built-in setup to deploy to GitHub pages and how to use the SDK with the self-hosted app.