Display Modes - LiveCodes

LiveCodes supports multiple display modes that control which UI elements are shown and how the playground behaves. Each mode is optimized for specific use cases.

Overview

The display mode is controlled by the mode property in the configuration:

const config = {
  mode: 'full', // or 'focus' | 'lite' | 'simple' | 'editor' | 'codeblock' | 'result'
};

Available Modes

Full Mode

mode

"full"

default:true

The complete LiveCodes experience with all features enabled.

Features:

All three editors (markup, style, script)
Result page
Tools pane (console, compiled code viewer, tests)
Full menu and toolbar
Language selection
All configuration options

Use Cases:

Full playground experience
Development and prototyping
Teaching and tutorials with full features

const config = {
  mode: 'full',
  view: 'split',
  tools: {
    enabled: 'all',
    active: '',
    status: '',
  },
};

URL:

https://livecodes.io/?mode=full

Focus Mode

mode

"focus"

Simplified UI with focus on the code and result.

Features:

Active editor and result page
Minimal toolbar
Tools available but simplified
Language selection hidden by default

Use Cases:

Focused coding sessions
Presentations and demos
Embedded playgrounds with less clutter

const config = {
  mode: 'focus',
  activeEditor: 'script',
};

URL:

https://livecodes.io/?mode=focus&js=console.log('Hello')

Lite Mode

mode

"lite"

Lightweight mode with minimal UI and faster loading.

Features:

Lightweight code editor (CodeJar)
Single active editor
Result page
Minimal toolbar
No tools pane by default
Faster load time

Use Cases:

Quick demos and examples
Embedded in documentation
Mobile-friendly playgrounds
Performance-critical embeds

const config = {
  mode: 'lite',
  script: {
    language: 'javascript',
    content: 'console.log("Hello")',
  },
};

URL:

https://livecodes.io/?lite&js=console.log('Hello')

Lite mode can also be enabled with the lite parameter instead of mode=lite.

Simple Mode

mode

"simple"

Simplified interface similar to lite mode but with standard editors.

Features:

Standard code editors (Monaco/CodeMirror)
Single active editor
Result page
Simplified toolbar
Basic tools available

Use Cases:

Simple embeds with better editor features than lite
Educational content
Code examples with syntax highlighting

const config = {
  mode: 'simple',
  activeEditor: 'markup',
};

URL:

https://livecodes.io/?mode=simple&html=<h1>Hello</h1>

Editor Mode

mode

"editor"

Shows only the code editor, no result page.

Features:

Code editor only
No result page
No tools pane
Minimal UI
Language selection available

Use Cases:

Code snippets and examples
Documentation code blocks
Focus on code only
Syntax highlighting

const config = {
  mode: 'editor',
  script: {
    language: 'typescript',
    content: 'const greeting: string = "Hello";',
  },
};

URL:

https://livecodes.io/?mode=editor&ts=const greeting: string = "Hello";

In editor mode, the tools configuration is automatically set to none.

Codeblock Mode

mode

"codeblock"

Minimal code block display, similar to syntax-highlighted code in documentation.

Features:

Lightweight editor (CodeJar)
Syntax highlighting only
No result page
No tools
No UI chrome
Often used as read-only

Use Cases:

Syntax-highlighted code blocks
Documentation examples
Static code display with copy functionality
README files and blog posts

const config = {
  mode: 'codeblock',
  readonly: true,
  script: {
    language: 'python',
    content: 'print("Hello, World!")',
  },
};

URL:

https://livecodes.io/?mode=codeblock&readonly=true&python=print("Hello")

Result Mode

mode

"result"

Shows only the result page, no editors.

Features:

Result page only
No code editors visible
No tools pane by default
Full result page viewport

Use Cases:

Showcasing results
Demos and presentations
Embedded apps and components
Live previews

const config = {
  mode: 'result',
  markup: {
    language: 'html',
    content: '<h1>Hello, World!</h1>',
  },
  style: {
    language: 'css',
    content: 'h1 { color: blue; font-family: system-ui; }',
  },
};

URL:

https://livecodes.io/?mode=result&html=<h1>Hello</h1>&css=h1{color:blue}

Result mode is perfect for embedding live demos where you want to show the output without exposing the code.

Headless Mode

While not a mode value, headless mode is enabled via the headless embed option:

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container', {
  headless: true,
  config: {
    script: {
      language: 'javascript',
      content: 'console.log("Hello")',
    },
  },
});

// No UI is shown, but you can interact via SDK
await playground.run();
const code = await playground.getCode();

Features:

No UI rendered at all
Full SDK access
Code execution in background
Event listening available

Use Cases:

Testing and automation
Code execution without UI
Backend integration
Custom UI implementations

See Getting Started for usage examples.

Mode Comparison

Feature	Full	Focus	Lite	Simple	Editor	Codeblock	Result
All Editors	✓	✓	✓	✓	✓	✓	-
Result Page	✓	✓	✓	✓	-	-	✓
Tools Pane	✓	✓	-	✓	-	-	-
Full Menu	✓	-	-	-	-	-	-
Lang Select	✓	-	-	✓	✓	-	-
Monaco/CM	✓	✓	-	✓	✓	-	✓
CodeJar	-	-	✓	-	-	✓	-
Load Speed	Slow	Medium	Fast	Medium	Medium	Fast	Fast
Bundle Size	Large	Medium	Small	Medium	Medium	Small	Medium

Combining with Other Options

With View Setting

The view property works with modes that show both editor and result:

const config = {
  mode: 'full',
  view: 'result', // Start with result visible
};

With Readonly

Modes work well with readonly configuration:

const config = {
  mode: 'codeblock',
  readonly: true, // Perfect for documentation
};

With Tools

Customize tools for each mode:

const config = {
  mode: 'focus',
  tools: {
    enabled: ['console'],
    active: 'console',
    status: 'open',
  },
};

Examples

Interactive Tutorial (Full Mode)

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#tutorial', {
  config: {
    mode: 'full',
    view: 'split',
    markup: {
      language: 'html',
      content: '<h1>Welcome to the Tutorial</h1>',
    },
    tools: {
      enabled: ['console', 'compiled'],
      active: 'console',
      status: 'closed',
    },
  },
});

Documentation Example (Codeblock Mode)

const playground = await createPlayground('#example', {
  config: {
    mode: 'codeblock',
    readonly: true,
    script: {
      language: 'typescript',
      content: `
interface User {
  id: number;
  name: string;
}

const user: User = {
  id: 1,
  name: 'John Doe',
};
      `,
    },
  },
});

Live Demo (Result Mode)

const playground = await createPlayground('#demo', {
  config: {
    mode: 'result',
    markup: {
      language: 'html',
      content: '<div id="app"></div>',
    },
    script: {
      language: 'jsx',
      content: `
import { createRoot } from 'react-dom/client';

function App() {
  return <h1>Interactive Demo</h1>;
}

createRoot(document.getElementById('app')).render(<App />);
      `,
    },
  },
});

Quick Prototype (Lite Mode)

const playground = await createPlayground('#prototype', {
  config: {
    mode: 'lite',
    script: {
      language: 'javascript',
      content: 'console.log("Quick test")',
    },
  },
});

URL Examples

Full Mode with Console

https://livecodes.io/?mode=full&console=open&js=console.log('test')

Lite Mode with Python

https://livecodes.io/?lite&python=print('Hello from Python')

Editor Mode with TypeScript

https://livecodes.io/?mode=editor&ts=const x: number = 42

Result Mode with React

https://livecodes.io/?mode=result&template=react

Codeblock with Readonly

https://livecodes.io/?mode=codeblock&readonly=true&jsx=<App />

Switching Modes at Runtime

You can change the mode dynamically:

const playground = await createPlayground('#container');

// Switch to result mode
await playground.setConfig({ mode: 'result' });

// Switch back to full mode
await playground.setConfig({ mode: 'full' });

Best Practices

Choose Based on Use Case

Full mode: Complete playground features
Lite mode: Fast loading, simple demos
Editor mode: Code examples without execution
Result mode: Showcase output
Codeblock mode: Documentation snippets

Performance Considerations

Lite and codeblock modes load faster and use less memory. Use them for multiple embeds on a single page.

Mobile Optimization

Lite and simple modes work better on mobile devices due to their simplified UI and smaller bundle size.

Readonly + Codeblock

Combine codeblock mode with readonly for documentation-style code blocks that can’t be edited.

Configuration Object

Complete configuration reference

View Settings

Control editor and result visibility

Embed Options

SDK embed configuration

SDK Getting Started

Learn about headless mode and more

Get Started

Features

SDK

Languages

Configuration

Advanced

Resources

​Overview

​Available Modes

​Full Mode

​Focus Mode

​Lite Mode

​Simple Mode

​Editor Mode

​Codeblock Mode

​Result Mode

​Headless Mode

​Mode Comparison

​Combining with Other Options

​With View Setting

​With Readonly

​With Tools

​Examples

​Interactive Tutorial (Full Mode)

​Documentation Example (Codeblock Mode)

​Live Demo (Result Mode)

​Quick Prototype (Lite Mode)

​URL Examples

​Full Mode with Console

​Lite Mode with Python

​Editor Mode with TypeScript

​Result Mode with React

​Codeblock with Readonly

​Switching Modes at Runtime

​Best Practices

​Related Documentation

Configuration Object

View Settings

Embed Options

SDK Getting Started

Build docs developers (and LLMs) love

Overview

Available Modes

Full Mode

Focus Mode

Lite Mode

Simple Mode

Editor Mode

Codeblock Mode

Result Mode

Headless Mode

Mode Comparison

Combining with Other Options

With View Setting

With Readonly

With Tools

Examples

Interactive Tutorial (Full Mode)

Documentation Example (Codeblock Mode)

Live Demo (Result Mode)

Quick Prototype (Lite Mode)

URL Examples

Full Mode with Console

Lite Mode with Python

Editor Mode with TypeScript

Result Mode with React

Codeblock with Readonly

Switching Modes at Runtime

Best Practices

Related Documentation