livecodes: Skill for Claude Code

This skill builds on configuration. Read it first for foundational concepts.

LiveCodes — Display Modes

Display modes control what UI elements are shown in the playground. Choose mode based on your embedding use case.

Setup

import { createPlayground } from 'livecodes';

// Via config object
createPlayground('#container', {
  config: { mode: 'simple' },
});

// Via query params
createPlayground('#container', {
  params: { mode: 'result' },
});

// Via URL
// https://livecodes.io/?mode=lite&template=react

Core Patterns

Full mode (default)

Complete playground with toolbars, all editors, result pane.

// Default mode - no need to specify
createPlayground('#container', {
  template: 'react',
});
// Mode is 'full' by default

Simple mode (embeds)

One editor + result. Ideal for embedded playgrounds with limited space.

createPlayground('#container', {
  config: {
    mode: 'simple',
    layout: 'vertical', // 'vertical' or 'horizontal'
    activeEditor: 'script',
    editor: 'monaco', // 'monaco' or 'codemirror' (default)
  },
  params: {
    js: 'console.log("Hello")',
    console: 'open',
  },
});

// With style editor
createPlayground('#container', {
  config: {
    mode: 'simple',
    layout: 'vertical',
    activeEditor: 'script',
    editor: 'monaco',
  },
});

Lite mode

Lightweight editor for faster loading. Minimal features.

createPlayground('#container', {
  config: { mode: 'lite' },
  template: 'react',
});

// Via URL
// https://livecodes.io/?mode=lite&template=react

Lite mode features:

• Uses CodeJar editor (light-weight)
• No minimap, no advanced autocomplete
• Still supports all languages
• Faster initial load

Editor mode (code only)

No result pane. Shows only the editors.

createPlayground('#container', {
  config: { mode: 'editor' },
  template: 'react',
});

Use for:

• Code review interfaces
• Teaching code patterns
• Read-only snippet viewers