Skip to main content
The LiveCodes SDK is available as an npm package and can be installed using your preferred package manager.

​
Package Manager Installation

Install the livecodes package in your project: 
npm install livecodes

​
Package Details

​
CDN Usage

You can also use the SDK directly from a CDN without installation:

​
ES Modules

<script type="module">
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/[email protected]/livecodes.js';
  
  const playground = await createPlayground('#container');
</script>

​
UMD (Browser Global)

<script src="https://cdn.jsdelivr.net/npm/[email protected]/livecodes.umd.js"></script>
<script>
  const { createPlayground } = livecodes;
  
  createPlayground('#container').then(playground => {
    // Use playground
  });
</script>

​
Importing the SDK

​
JavaScript/TypeScript

Import the main SDK functions and types: 
import { createPlayground, getPlaygroundUrl } from 'livecodes';
import type { 
  Config, 
  EmbedOptions, 
  Playground, 
  Code, 
  Language 
} from 'livecodes';

​
React

Import the React component: 
import LiveCodes from 'livecodes/react';
import type { Props } from 'livecodes/react';

​
Vue

Import the Vue component: 
<script setup>
import LiveCodes from 'livecodes/vue';
import type { Props } from 'livecodes/vue';
</script>

​
TypeScript Support

The SDK is written in TypeScript and includes complete type definitions. TypeScript users get full IntelliSense and type checking out of the box. 
import { createPlayground } from 'livecodes';
import type { Playground, Config } from 'livecodes';

// Full type support
const config: Partial<Config> = {
  markup: {
    language: 'markdown',
    content: '# Hello World',
  },
  autoupdate: true,
};

const playground: Playground = await createPlayground('#container', { config });

​
Package Exports

The package provides the following exports:
ExportTypeDescription
.ESM/CJSMain SDK (createPlayground, getPlaygroundUrl)
./reactESMReact component
./vueESMVue component
./package.jsonJSONPackage metadata

​
Build Formats

The SDK is available in multiple formats:
  • ESM (livecodes.js): For modern bundlers and <script type="module">
  • CommonJS (livecodes.cjs): For Node.js and older bundlers
  • UMD (livecodes.umd.js): For browser <script> tags
  • TypeScript Definitions (livecodes.d.ts): Type definitions

​
Bundler Configuration

​
Vite

No configuration needed. Vite handles the SDK automatically.

​
Webpack

// webpack.config.js
module.exports = {
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx'],
  },
};

​
Next.js

For Next.js applications, you may need to configure transpilation: 
// next.config.js
module.exports = {
  transpilePackages: ['livecodes'],
};

​
Version Requirements

  • Node.js: 14.x or higher recommended
  • TypeScript: 4.5 or higher (if using TypeScript)
  • React: 16.8+ (if using React component)
  • Vue: 3.x (if using Vue component)

​
Verify Installation

Create a simple test to verify the installation: 
import { createPlayground } from 'livecodes';

console.log('LiveCodes SDK loaded successfully!');

createPlayground('#container', {
  config: {
    markup: {
      language: 'html',
      content: '<h1>It works!</h1>',
    },
  },
}).then(() => {
  console.log('Playground created!');
});

​
Next Steps

Getting Started

Learn how to create your first embedded playground

Build docs developers (and LLMs) love

Get started for freeTalk to us