Skip to main content
LiveCodes provides a powerful and flexible configuration system that allows you to customize every aspect of your playground experience. The configuration can be set through multiple methods, each suited for different use cases.

​
Configuration Methods

There are three primary ways to configure LiveCodes:

Configuration Object

Pass a config object via the SDK or embed options

URL Query Parameters

Configure playgrounds using URL parameters

Runtime API

Modify configuration programmatically at runtime

​
Configuration Structure

The configuration object is divided into three main categories:

​
Content Configuration

Defines the content of the current project:
  • Editors: Markup, style, and script editor content and languages
  • External Resources: Stylesheets, scripts, and CSS presets
  • Project Metadata: Title, description, tags
  • Custom Settings: Language-specific and advanced settings
  • Type Definitions: Custom TypeScript types for IntelliSense
  • Tests: Test configuration and content

​
App Configuration

Controls how the app behaves:
  • Display Mode: Full, editor-only, result-only, lite, etc.
  • View: Split, editor, or result view
  • Tools: Console, compiled code viewer, tests
  • Permissions: Read-only mode, language change restrictions
  • Zoom: Result page zoom level

​
User Configuration

Defines user preferences and settings:
  • Auto-features: Auto-update, auto-save, auto-test
  • Editor Settings: Theme, font, tab size, line numbers, etc.
  • Formatter Settings: Code formatting preferences
  • Layout: Horizontal, vertical, or responsive
  • UI Language: App language preference

​
Configuration Precedence

When multiple configuration sources are present, they are applied in this order (later sources override earlier ones):
1

Default Configuration

LiveCodes starts with sensible defaults for all configuration options
2

User Configuration

Configuration provided via SDK embed options or stored user preferences
3

URL Parameters

Query string and hash parameters override previous configurations
4

Runtime Changes

Configuration modified via SDK methods like setConfig() at runtime

​
Basic Example

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container', {
  config: {
    // Content Configuration
    title: 'My Project',
    markup: {
      language: 'markdown',
      content: '# Hello World',
    },
    style: {
      language: 'scss',
      content: 'h1 { color: blue; }',
    },
    script: {
      language: 'typescript',
      content: 'console.log("Hello!");',
    },
    
    // App Configuration
    mode: 'full',
    view: 'split',
    readonly: false,
    tools: {
      enabled: ['console', 'compiled'],
      active: 'console',
      status: 'open',
    },
    
    // User Configuration
    autoupdate: true,
    delay: 1500,
    theme: 'dark',
    fontSize: 14,
  },
});

​
URL Parameter Example

The same configuration can be achieved with URL parameters: 
https://livecodes.io/?md=%23%20Hello%20World
  &scss=h1%20%7B%20color%3A%20blue%3B%20%7D
  &ts=console.log(%22Hello!%22)
  &mode=full
  &view=split
  &console=open

​
Default Values

All configuration properties have sensible defaults:
  • title: "Untitled Project"
  • markup: { language: "html", content: "" }
  • style: { language: "css", content: "" }
  • script: { language: "javascript", content: "" }
  • stylesheets: []
  • scripts: []
  • mode: "full"
  • view: "split"
  • readonly: false
  • allowLangChange: true
  • tools: { enabled: "all", active: "", status: "" }
  • zoom: 1
  • autoupdate: true
  • autosave: false
  • delay: 1500
  • theme: "dark"
  • tabSize: 2
  • lineNumbers: true
  • formatOnsave: false

​
Configuration Validation

LiveCodes automatically validates and upgrades configuration objects:
  • Invalid values are replaced with defaults
  • Old configuration formats are automatically upgraded
  • Language aliases are resolved to canonical names
  • Missing required properties are added
Always use the getConfig() method to retrieve the validated configuration rather than relying on the original object you passed.

​
TypeScript Support

The SDK provides full TypeScript definitions for the configuration object: 
import type { Config } from 'livecodes';

const config: Partial<Config> = {
  markup: {
    language: 'html',
    content: '<h1>Hello</h1>',
  },
  theme: 'dark',
  autoupdate: true,
};

​
Next Steps

Configuration Object

Complete reference for all configuration options

Query Parameters

Learn how to configure via URL parameters

Editor Settings

Customize the code editor appearance and behavior

Custom Settings

Advanced language-specific configuration

Build docs developers (and LLMs) love

Get started for freeTalk to us