livecodes: Skill for Claude Code

This skill builds on sdk-embedding. Read it first for foundational concepts.

LiveCodes — Use SDK Methods

The Playground object returned by createPlayground exposes methods to programmatically control the playground.

Setup

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container', {
  template: 'react',
});

// All SDK methods return Promises
await playground.run();
const code = await playground.getCode();
await playground.setConfig({
  /* new config */
});

Core Patterns

Run the playground

// Run the result page (after any needed compilation)
await playground.run();

Get current code and config

// Get code from all editors
const code = await playground.getCode();
console.log(code.markup.content); // Source markup
console.log(code.markup.language); // Language name
console.log(code.markup.compiled); // Compiled output (if applicable)
console.log(code.result); // Result page HTML

// Get configuration object
const config = await playground.getConfig();
console.log(config.title);
console.log(config.markup.language);

// Get content-only config (without user preferences)
const contentConfig = await playground.getConfig(true);

Update playground configuration

// Load new project in place (no full reload)
await playground.setConfig({
  markup: { language: 'markdown', content: '# New Content' },
});

// Get the resulting config
const newConfig = await playground.setConfig({
  script: { language: 'typescript', content: 'const x: number = 1;' },
});

Watch for changes

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

// Watch for code execution
const runWatcher = playground.watch('run', ({ code, config }) => {
  console.log('Playground ran. Result HTML:', code.result);
});

// Watch for console output
const consoleWatcher = playground.watch('console', ({ method, args }) => {
  console[method](...args);
});

// Watch for test results
const testsWatcher = playground.watch('tests', ({ results, error }) => {
  results.forEach((r) => console.log(r.status, r.testPath));
});

// Remove watchers when done
codeWatcher.remove();
runWatcher.remove();
consoleWatcher.remove();
testsWatcher.remove();