SDK Embedding

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

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

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

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

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

import { getPlaygroundUrl } from 'livecodes';

const url = getPlaygroundUrl({
  config: {
    markup: { language: 'markdown', content: '# Hello World' },
  },
});
// url = "https://livecodes.io/#config/..."

import { compress } from 'livecodes';

const config = {
  markup: { language: 'html', content: '<h1>Hello World</h1>' },
};
const compressed = compress(JSON.stringify(config));

import { decompress } from 'livecodes';

const decompressed = decompress(compressedString);
if (decompressed) {
  const config = JSON.parse(decompressed);
}

createPlayground('#nonexistent-container', { template: 'react' });
// Throws: "Cannot find element: \"#nonexistent-container\""

// Ensure container exists before calling
const container = document.querySelector('#container');
if (container) {
  createPlayground('#container', { template: 'react' });
}

// Or use headless mode (container optional)
createPlayground({
  view: 'headless',
  config: {
    /* ... */
  },
});

const playground = await createPlayground('#container', options);
await playground.destroy();
await playground.run(); // Throws: "Cannot call API methods after calling `destroy()`."

const playground = await createPlayground('#container', options);
await playground.run();
// Use SDK methods while playground exists...
await playground.destroy(); // Last call — no more methods after this

createPlayground('#container', {
  appUrl: 'my-playground', // Not a valid URL
});
// Throws: "my-playground is not a valid URL."

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

// This can timeout if playground has infinite loop or slow WASM load
await playground.run(); // Times out after 60s

try {
  await playground.run();
} catch (error) {
  if (error.message.includes('timed out')) {
    console.error('Playground timed out');
  }
}