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

Concept	What it controls
Mode	What UI elements are loaded
View	Which pane is shown by default

// 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

Mode	Shows	Use Case
full	All UI (default)	Full playground experience
focus	Editors + result + console	Minimal distractions
simple	One editor + result	Compact embeds
lite	Lightweight editor	Fast loading, basic editing
editor	Only editors	Code review, teaching
codeblock	Static code with copy	Read-only snippets
result	Only result page	Demo showcase

View Reference

View	Description
split	Editors and result side by side (default)
editor	Editors visible, result hidden
result	Result visible, editors hidden

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
}