livecodes/sdk-embedding

LiveCodes — Create Embedded Playground

LiveCodes is a client-side code playground that runs in the browser. Use createPlayground to embed interactive code editors in any web page.

Setup

import { createPlayground } from 'livecodes';

// Minimal embed with template
createPlayground('#container', {
  template: 'react',
});

// Embed with custom code
createPlayground('#container', {
  config: {
    markup: { language: 'html', content: '<h1>Hello World</h1>' },
    style: { language: 'css', content: 'h1 { color: blue; }' },
    script: { language: 'javascript', content: 'console.log("Hello");' },
  },
});

// CDN usage (no bundler)
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
createPlayground('#container', { template: 'vue' });

Core Patterns

Load playground lazily

Playgrounds load when they approach the viewport by default. Use loading: 'eager' for immediate load or loading: 'click' for click-to-load.

createPlayground('#container', {
  template: 'react',
  loading: 'click', // Shows "Click to load" screen
});

Configure via query params

For simple cases, use URL-style params instead of full config objects.

createPlayground('#container', {
  params: {
    html: '<h1>Hello</h1>',
    css: 'h1 { color: blue; }',
    js: 'console.log("Hello")',
    console: 'open',
  },
});

Use self-hosted instance

Point to your own LiveCodes deployment.

createPlayground('#container', {
  appUrl: 'https://playground.mywebsite.com',
  template: 'react',
});

Multiple sources priority

When providing multiple config sources, they override in order: template < import < config < params.

createPlayground('#container', {
  template: 'react', // Lowest priority
  import: 'https://gist.github.com/...', // Overrides template
  config: {
    /* ... */
  }, // Overrides import
  params: { js: '...' }, // Highest priority
});

Generate shareable URL