LiveCodes SDK

import LiveCodes from '../../src/components/LiveCodes.tsx';

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#embed-options). In addition, SDK methods#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#typescript-types) provides type-safety and a great developer experience.

SDK Demo

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

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

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 install livecodes

then it can be used like that:

import { createPlayground } from 'livecodes';

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

CDN

Alternatively, it can just be loaded from a CDN.

ESM:

import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import CodeBlock from '@theme/CodeBlock';

export const ESMCode = () => { const { siteConfig } = useDocusaurusContext(); return ( {<div id="container"></div>\n<script type="module"> ${' '}import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}';\n ${' '.repeat(2)}createPlayground('#container', { ${' '.repeat(4)}// embed options ${' '.repeat(2)}}); </script>} ); };

UMD:

export const UMDCode = () => { const { siteConfig } = useDocusaurusContext(); return ( {<div id="container"></div>\n<script src="https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}/livecodes.umd.js"></script>\n<script>\n // the UMD version provides the global object \livecodes` ${' '.repeat(2)}livecodes.createPlayground('#container', { ${' '.repeat(4)}// embed options ${' '.repeat(2)}}); `} ); };

:::info

In the full standalone app#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:

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#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!

4.1 KiB Raw Permalink Blame History