Display Modes

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

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

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

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

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

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

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

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

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

// 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
  },
});

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

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

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

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

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
}