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 npm package (or jsr 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, Preact, Vue, Solid and Svelte), in addition to a web component. 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} />);
}

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

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"
    }
  }
};
}
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

<live-codes></live-codes>

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

  const playground = document.querySelector("live-codes");
  playground.config = {
    "markup": {
      "language": "markdown",
      "content": "# Hello World!"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"Hello, from JS!\");"
    },
    "tools": {
      "active": "console",
      "status": "open"
    }
  };
</script>

Installation

NPM Package

This is a single npm package for the SDK which provides support for JavaScript/TypeScript, Preact, React, Solid, Svelte, Vue and Web Components. 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
});

JSR

The SDK is also available as a JSR package. Install it with Deno:

Deno

deno add jsr:@livecodes/sdk

then it can be used like that:

index.js

import { createPlayground } from 'jsr:@livecodes/sdk';

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>

note

The UMD version allows automatic code pre-fill from the page DOM when data-prefill attribute is added to the script tag.

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

• Preact

• React

• Solid

• Svelte

• Vue

• Web Components

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!