Skip to main content
LiveCodes provides extensive configuration options for the code editor, allowing you to customize the editing experience to match your preferences.

​
Editor Selection

​
editor
"monaco" | "codemirror" | "codejar" | "auto" | undefined
default:"undefined"
Selects which code editor to use.
  • undefined (default): Smart selection based on context
    • Monaco on desktop
    • CodeMirror on mobile
    • CodeJar in lite/readonly/codeblock modes
  • "auto": Monaco on desktop, CodeMirror on mobile (ignores mode)
  • "monaco": Always use Monaco editor (VS Code editor)
  • "codemirror": Always use CodeMirror 6
  • "codejar": Always use CodeJar (lightweight editor)
const config = {
  editor: 'monaco',
  // ... other settings
};
Monaco provides the richest features but is larger. CodeMirror is lighter and mobile-friendly. CodeJar is the most lightweight option.

​
Theme Configuration

​
App Theme

​
theme
"light" | "dark"
default:"\"dark\""
Sets the overall app theme.
​
themeColor
string | undefined
default:"\"hsl(214, 40%, 50%)\""
Sets the app accent color. Any valid CSS color value.
const config = {
  theme: 'dark',
  themeColor: 'hsl(214, 40%, 50%)',
};

​
Editor Theme

​
editorTheme
EditorTheme[] | string | undefined
Sets the code editor theme(s). Supports multiple formats:
  • Simple theme name: "vs-dark"
  • App theme suffix: "github-light@light" (use when app theme is light)
  • Editor-specific: "monaco:twilight", "codemirror:one-dark"
  • Multiple themes: ["vs@light", "vs-dark@dark"]

​
Simple Theme

const config = {
  editorTheme: 'monokai',
};

​
Theme per App Theme

const config = {
  editorTheme: ['github-light@light', 'github-dark@dark'],
};
When the app theme is light, use github-light. When dark, use github-dark.

​
Editor-Specific Themes

const config = {
  editorTheme: 'monaco:dracula, codemirror:one-dark, codejar:darcula',
};

​
Combined Format

const config = {
  editorTheme: [
    'monaco:vs@light',
    'codemirror:github-light@light',
    'monaco:dracula@dark',
    'codemirror:one-dark@dark',
  ],
};

​
Available Themes

  • active4d, all-hallows-eve, amy
  • birds-of-paradise, blackboard
  • brilliance-black, brilliance-dull
  • catppuccin-latte, catppuccin-frappe
  • catppuccin-macchiato, catppuccin-mocha
  • chrome-devtools, clouds-midnight, clouds
  • cobalt, cobalt2, dawn, dracula
  • dreamweaver, eiffel, espresso-libre
  • github, github-dark, github-light
  • hc-black, hc-light, idle, idlefingers
  • iplastic, katzenmilch, krtheme, kuroir
  • lazy, magicwb-amiga
  • merbivore-soft, merbivore
  • monochrome, monochrome-dark
  • monokai, monokai-bright, monoindustrial
  • night-owl, nord, oceanic-next
  • pastels-on-dark, slush-and-poppies
  • solarized-dark, solarized-light
  • spacecadet, sunburst
  • textmate-mac-classic, tomorrow
  • tomorrow-night, tomorrow-night-blue
  • tomorrow-night-bright, tomorrow-night-eighties
  • twilight, upstream-sunburst
  • vibrant-ink, vs, vs-dark
  • xcode-default, zenburnesque
See the full list with examples at livecodes.io/docs/features/themes

​
Typography

​
fontFamily
string | undefined
Sets the editor font family. Any valid CSS font-family value.
​
fontSize
number | undefined
default:"14 (full app), 12 (embeds)"
Sets the editor font size in pixels.
const config = {
  fontFamily: 'JetBrains Mono, Monaco, Consolas, monospace',
  fontSize: 16,
};

​
Indentation

​
useTabs
boolean
default:"false"
If true, use tabs for indentation instead of spaces.Also affects code formatting.
​
tabSize
number
default:"2"
Number of spaces per indentation level.Also affects code formatting.
const config = {
  useTabs: false,
  tabSize: 2,
};

​
Display Options

​
lineNumbers
boolean | 'relative'
default:"true"
Controls line number display.
  • true: Show absolute line numbers
  • false: Hide line numbers
  • "relative": Show relative line numbers (Vim-style)
​
wordWrap
boolean
default:"false"
Enable word wrapping for long lines.
​
minimap
boolean
default:"false"
Show code minimap (Monaco only).
const config = {
  lineNumbers: true,
  wordWrap: false,
  minimap: true,
};

​
Editor Behavior

​
closeBrackets
boolean
default:"true"
Auto-close brackets, quotes, and parentheses.
​
emmet
boolean
default:"true"
Enable Emmet abbreviations for HTML and CSS.
​
foldRegions
boolean
default:"false"
When true, regions marked with #region and #endregion comments are automatically folded on load.
const config = {
  closeBrackets: true,
  emmet: true,
  foldRegions: false,
};

​
Code Regions

When foldRegions is enabled: 
//#region Utility Functions
function helper1() { /* ... */ }
function helper2() { /* ... */ }
//#endregion

// Main code here...
The region will be folded by default.

​
Editor Modes

​
editorMode
"vim" | "emacs" | undefined
Enable alternative keybinding modes.
  • "vim": Vim keybindings and modal editing
  • "emacs": Emacs keybindings
  • undefined: Standard editor keybindings
const config = {
  editorMode: 'vim',
};
Editor modes are only available in Monaco and CodeMirror editors.

​
Complete Example

import { createPlayground } from 'livecodes';

const config = {
  // Editor selection
  editor: 'monaco',
  
  // Theme
  theme: 'dark',
  themeColor: 'hsl(214, 40%, 50%)',
  editorTheme: [
    'github-light@light',
    'dracula@dark',
  ],
  
  // Typography
  fontFamily: 'JetBrains Mono, Consolas, monospace',
  fontSize: 14,
  
  // Indentation
  useTabs: false,
  tabSize: 2,
  
  // Display
  lineNumbers: true,
  wordWrap: false,
  minimap: false,
  
  // Behavior
  closeBrackets: true,
  emmet: true,
  foldRegions: false,
  editorMode: undefined,
};

await createPlayground('#container', { config });

​
Formatter Settings

These settings control code formatting behavior:
​
semicolons
boolean
default:"true"
Add semicolons when formatting JavaScript/TypeScript code.
​
singleQuote
boolean
default:"false"
Use single quotes instead of double quotes when formatting.
​
trailingComma
boolean
default:"true"
Add trailing commas in multi-line objects and arrays when formatting.
​
formatOnsave
boolean
default:"false"
Automatically format code when saving the project.
const config = {
  // Formatting preferences
  semicolons: true,
  singleQuote: false,
  trailingComma: true,
  formatOnsave: false,
  
  // Inherited from indentation settings
  useTabs: false,
  tabSize: 2,
};

​
UI Settings

Additional settings that affect the editor UI:
​
layout
"responsive" | "horizontal" | "vertical" | undefined
default:"\"responsive\""
Controls the overall playground layout.
  • "responsive": Vertical on small screens (when height greater than width), otherwise horizontal
  • "horizontal": Always horizontal split
  • "vertical": Always vertical split
​
recoverUnsaved
boolean
default:"true"
Enable recovery of unsaved changes when reopening the app.
​
showSpacing
boolean
default:"false"
Show element spacing visualization in the result page.
const config = {
  layout: 'responsive',
  recoverUnsaved: true,
  showSpacing: false,
};

​
Runtime Configuration

You can change editor settings at runtime: 
const playground = await createPlayground('#container');

// Get current config
const currentConfig = await playground.getConfig();

// Update settings
await playground.setConfig({
  theme: 'light',
  fontSize: 16,
  editorTheme: 'github-light',
});

​
URL Parameters

Many editor settings can be configured via URL parameters: 
https://livecodes.io/
  ?theme=light
  &fontSize=16
  &useTabs=false
  &tabSize=4
  &lineNumbers=true
  &wordWrap=true

Configuration Object

Complete configuration reference

Themes

Browse available themes with examples

Code Editor

Learn about editor features

Code Formatting

Code formatting options

Build docs developers (and LLMs) love

Get started for freeTalk to us