livecodes/display-modes

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

Codeblock mode (read-only)

Static code display with copy button on hover. No editing.

createPlayground('#container', {
  config: {
    mode: 'codeblock',
    editor: 'monaco', // Optional: use Monaco instead of CodeJar
  },
  params: { html: '<h1>Hello World</h1>' },
});

Use for:

• Blog posts with code snippets
• Documentation
• One-way code display

Result mode (output only)

Shows only the result page with a drawer to open in full playground.

createPlayground('#container', {
  params: {
    mode: 'result',
    template: 'react',
  },
});

// Show console in result mode
createPlayground('#container', {
  params: {
    mode: 'result',
    tools: 'console|full',
    js: 'console.log("Hello World")',
  },
});

Use for:

• Demo showcase
• Embedded output
• Presentations

Focus mode

Minimal UI: editors, result, console only. No menus or secondary controls.

createPlayground('#container', {
  config: { mode: 'focus' },
});

Toggle between focus and full in the app UI. Access via button in bottom-left corner.

Display Mode vs Default View

// Mode: 'editor' - Only editors exist, no result pane
createPlayground('#container', {
  config: { mode: 'editor' },
});

// Mode: 'full', View: 'editor' - All UI, editors shown by default
createPlayground('#container', {
  config: {
    mode: 'full', // Full UI
    view: 'editor', // Show editors first
  },
});

Common Mistakes

MEDIUM Confusing mode with view

Wrong:

// Want to show result by default but use full UI
createPlayground('#container', {
  config: { mode: 'result' }, // Result mode - no editors!
});

Correct:

// Use view for default visible pane
createPlayground('#container', {
  config: {
    mode: 'full', // Full UI with all elements
    view: 'result', // Show result by default
  },
});

mode determines what elements exist. view determines which element is visible first.

Source: docs/docs/features/display-modes.mdx — Display Mode vs Default View section

MEDIUM Tools not visible in result mode

// Console won't show in result mode by default
createPlayground('#container', {
  params: {
    mode: 'result',
    js: 'console.log("Hello")',
  },
});

Correct:

// Set tools to 'open' or 'full' in result mode
createPlayground('#container', {
  params: {
    mode: 'result',
    tools: 'console|full', // Show console in full height
    js: 'console.log("Hello")',
  },
});

In result mode, tools pane is hidden by default. Set tools: 'console|open' or tools: 'console|full' to show it.

Source: docs/docs/features/display-modes.mdx — Result mode section

Mode Reference

View Reference

Tools Configuration

const config = {
  tools: {
    enabled: ['console', 'compiled'],  // or 'all'
    active: 'console',    // Which tool is open
    status: 'open',       // 'open', 'full', 'closed', 'none'
  },
};

// Via params
params: {
  tools: 'console|open',     // Console open
  tools: 'compiled|full',     // Compiled code, full height
  console: 'open',            // Shorthand for console
}