SDK Overview

​

What is the LiveCodes SDK?

• Embed playgrounds in your web applications
• Control playground behavior programmatically
• Listen to playground events (code changes, console output, test results)
• Load and modify configurations dynamically
• Run code and get results
• Execute custom commands for advanced use cases

​

Key Features

​

Multiple Integration Options

• Vanilla JS/TS: Use the core SDK with any framework or vanilla JavaScript
• React Component: First-class React component support
• Vue Component: Native Vue 3 component
• Svelte: Can be used in Svelte applications

​

Flexible Embedding Modes

• Standard Mode: Full-featured playground with editor and result
• Headless Mode: Run code without visible UI
• Lazy Loading: Load playgrounds only when needed
• Click-to-Load: Show a placeholder until user interaction

​

Rich API

• Get and set configurations
• Run and format code
• Watch for changes and events
• Control the UI (show/hide panels, tools)
• Run tests and get results
• Generate share URLs

​

SDK Exports

import { createPlayground, getPlaygroundUrl } from 'livecodes';
import type { Config, EmbedOptions, Playground, Code, Language } from 'livecodes';

​

Framework Components

// React
import LiveCodes from 'livecodes/react';

// Vue
import LiveCodes from 'livecodes/vue';

​

Quick Example

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container', {
  config: {
    markup: {
      language: 'html',
      content: '<h1>Hello, LiveCodes!</h1>',
    },
  },
});

// Run the code
await playground.run();

// Watch for code changes
playground.watch('code', ({ code, config }) => {
  console.log('Code changed:', code);
});

​

Use Cases

• Interactive Documentation: Embed runnable code examples
• Educational Platforms: Create interactive coding tutorials
• Code Sharing: Build platforms for sharing and showcasing code
• Testing Environments: Run and test code in isolated environments
• Live Coding: Create collaborative coding experiences

​

Browser Support

• ES2020+
• Dynamic imports
• PostMessage API
• IntersectionObserver (for lazy loading)

​

Next Steps