LiveCodes SDK

The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.

The SDK is provided as a light-weight (less than 5kb gzipped), zero-dependencies npm package, that is also available from CDNs. It can be used to create playgrounds with a wide variety of configurations and embed options. In addition, SDK methods allow programmatic communication and control of the playgrounds during runtime.

The JavaScript SDK is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently React and Vue). The SDK can be used in Svelte directly without wrappers. TypeScript support provides type-safety and a great developer experience.

SDK Demo

This is an example of an editable embedded playground using the SDK.

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello World!"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"Hello, from JS!\");"
    },
    "tools": {
      "active": "console",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello World!"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"Hello, from JS!\");"
    },
    "tools": {
      "active": "console",
      "status": "open"
    }
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello World!"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"Hello, from JS!\");"
    },
    "tools": {
      "active": "console",
      "status": "open"
    }
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

Vue

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

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello World!"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"Hello, from JS!\");"
    },
    "tools": {
      "active": "console",
      "status": "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 World!"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"Hello, from JS!\");"
    },
    "tools": {
      "active": "console",
      "status": "open"
    }
  }
};
let container;
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Installation

NPM Package

This is a single npm package for the SDK which supports JavaScript/TypeScript, React, Vue and Svelte. Install the library from npm:

npm i livecodes

then it can be used like that:

index.js

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  // embed options
});

CDN

Alternatively, it can just be loaded from a CDN.

ESM:

index.html

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

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

UMD:

index.html

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

info

In the full standalone app, the JavaScript SDK is accessible via the global variable livecodes, which can be interacted with in the browser console.

Usage

The SDK is currently provided in the following variations:

• JavaScript/TypeScript

• React

• Vue

• Svelte

Headless Mode

The SDK also has a headless mode. In this mode, no visible output is displayed in the embedding web page. However, all SDK methods are accessible. This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI.

SDK Playground!

A demo page that shows the usage of the SDK can be found here (source).

Or edit the SDK playground in LiveCodes. How meta! :)

P.S. You may want to use the "Full Screen" button!