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, Solid and Ripple 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';

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

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

Ripple

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

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

  <div {ref onMount}></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

npm install livecodes

Yarn

yarn add livecodes

pnpm

pnpm add livecodes

Bun

bun add 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/livecodes@0.12.0';

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

UMD:

index.html

<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/livecodes@0.12.0/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
• Solid
• Ripple

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!