Editor Configuration

The Editor interface defines the configuration for individual code editors (markup, style, script) in LiveCodes.

Editor Interface

interface Editor {
  language: Language;
  content?: string;
  contentUrl?: string;
  hiddenContent?: string;
  hiddenContentUrl?: string;
  foldedLines?: Array<{ from: number; to: number }>;
  title?: string;
  hideTitle?: boolean;
  order?: number;
  selector?: string;
  position?: EditorPosition;
}

Properties

language

Language

required

A language name, extension or alias.See Language Configuration for the list of supported values.

{
  markup: {
    language: "html",
  },
  style: {
    language: "scss",
  },
  script: {
    language: "typescript",
  },
}

content

string

default:""

The initial content of the code editor.

{
  markup: {
    language: "html",
    content: "<h1>Hello World!</h1>",
  },
}

contentUrl

string

A URL to load content from. It has to be a valid URL that is CORS-enabled.The URL is only fetched if content property had no value.

{
  script: {
    language: "javascript",
    contentUrl: "https://example.com/script.js",
  },
}

hiddenContent

string

Hidden content that gets evaluated without being visible in the code editor.This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests).

{
  script: {
    language: "javascript",
    content: "greet('World');",
    hiddenContent: "function greet(name) { console.log('Hello ' + name); }",
  },
}

hiddenContentUrl

string

A URL to load hiddenContent from. It has to be a valid URL that is CORS-enabled.The URL is only fetched if hiddenContent property had no value.

{
  script: {
    language: "javascript",
    hiddenContentUrl: "https://example.com/helpers.js",
  },
}

foldedLines

Array<{ from: number; to: number }>

Lines that get folded when the editor loads.This can be used for less relevant content.

{
  script: {
    language: "javascript",
    content: `// Main code
const app = {};

// Boilerplate (folded)
function setup() {
  // ...
}

// More main code
app.init();`,
    foldedLines: [
      { from: 5, to: 8 },
      { from: 15, to: 20 },
    ],
  },
}

title

string

If set, this is used as the title of the editor in the UI, overriding the default title set to the language name.For example, "Python" can be used instead of "Py (Wasm)".

{
  script: {
    language: "python-wasm",
    title: "Python",
  },
}

hideTitle

boolean

If true, the title of the code editor is hidden, however its code is still evaluated.This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

{
  script: {
    language: "javascript",
    content: "// This code runs but title is hidden",
    hideTitle: true,
  },
}

order

number

default:0

The order of the editor in the UI.

{
  markup: {
    language: "html",
    order: 1,
  },
  style: {
    language: "css",
    order: 3,
  },
  script: {
    language: "javascript",
    order: 2,
  },
}

selector

string

A CSS selector to load content from DOM import.See DOM Import documentation for details.

{
  script: {
    language: "javascript",
    selector: "#my-code",
  },
}

position

EditorPosition

The initial position of the cursor in the code editor.

interface EditorPosition {
  lineNumber: number;
  column?: number;
}

{
  script: {
    language: "javascript",
    content: "// Line 1\n// Line 2\n// Line 3\n// Line 4\n// Line 5",
    position: { lineNumber: 5, column: 10 },
  },
}

EditorConfig Interface

Additional configuration for the code editor itself:

interface EditorConfig {
  editor: 'monaco' | 'codemirror' | 'codejar' | 'auto' | undefined;
  theme: Theme;
  themeColor: string | undefined;
  editorTheme: EditorTheme[] | string | undefined;
  fontFamily: string | undefined;
  fontSize: number | undefined;
  useTabs: boolean;
  tabSize: number;
  lineNumbers: boolean | 'relative';
  wordWrap: boolean;
  foldRegions: boolean;
  closeBrackets: boolean;
  minimap: boolean;
  emmet: boolean;
  editorMode: 'vim' | 'emacs' | undefined;
}

editor

'monaco' | 'codemirror' | 'codejar' | 'auto' | undefined

Selects the code editor to use.

undefined (default): Monaco on desktop, CodeMirror on mobile, CodeJar in codeblock mode and readonly playgrounds
"auto": Monaco on desktop, CodeMirror on mobile regardless of other settings
"monaco": Force Monaco editor
"codemirror": Force CodeMirror editor
"codejar": Force CodeJar editor

theme

'light' | 'dark'

default:"dark"

Sets the app theme to light/dark mode.

themeColor

string

default:"hsl(214, 40%, 50%)"

Sets the app theme color.

editorTheme

EditorTheme[] | string | undefined

Sets the code editor themes.Can be a single theme name or an array of themes with mode indicators.

// Single theme
{ editorTheme: "vs" }

// Multiple themes as string
{ editorTheme: "monaco:twilight, codemirror:one-dark" }

// Array with mode indicator
{ editorTheme: ["vs@light"] }
{ editorTheme: ["vs@light", "vs-dark@dark"] }

// Editor-specific themes
{ editorTheme: ["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"] }

fontFamily

string

Sets the code editor font family.

useTabs

boolean

default:false

If true, lines are indented with tabs instead of spaces.Also used in code formatting.

tabSize

number

default:2

The number of spaces per indentation-level.Also used in code formatting.

lineNumbers

boolean | 'relative'

default:true

Show line numbers in code editor.Can be true, false, or "relative" for relative line numbers.

wordWrap

boolean

default:false

Enables word-wrap for long lines.

foldRegions

boolean

default:false

When set to true, regions marked by #region and #endregion comments are folded when the project is loaded.

closeBrackets

boolean

default:true

Use auto-complete to close brackets and quotes.

minimap

boolean

default:false

Enables minimap in code editor.

emmet

boolean

default:true

Enables Emmet.

editorMode

'vim' | 'emacs' | undefined

Sets editor mode (Vim or Emacs keybindings).

Usage Examples

Basic Editor Configuration

import { createPlayground } from "livecodes";

createPlayground("#container", {
  config: {
    markup: {
      language: "html",
      content: "<h1>Hello World!</h1>",
    },
    style: {
      language: "scss",
      content: "$color: blue;\nh1 { color: $color; }",
    },
    script: {
      language: "typescript",
      content: 'const greeting: string = "Hello";\nconsole.log(greeting);',
    },
  },
});

With Hidden Content

import { createPlayground } from "livecodes";

createPlayground("#container", {
  config: {
    script: {
      language: "javascript",
      content: `// User can see and edit this
greet('World');`,
      hiddenContent: `// User cannot see this
function greet(name) {
  console.log('Hello ' + name);
}`,
    },
  },
});

Custom Editor Settings

import { createPlayground } from "livecodes";

createPlayground("#container", {
  config: {
    editor: "monaco",
    theme: "light",
    editorTheme: ["github-light@light", "github-dark@dark"],
    fontFamily: "'Fira Code', monospace",
    fontSize: 16,
    useTabs: false,
    tabSize: 2,
    lineNumbers: true,
    wordWrap: true,
    emmet: true,
    script: {
      language: "javascript",
      content: "console.log('Hello');",
    },
  },
});

Loading from URL

import { createPlayground } from "livecodes";

createPlayground("#container", {
  config: {
    script: {
      language: "javascript",
      contentUrl: "https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js",
    },
  },
});

Core API

Methods

Events

Editor Configuration

Editor Interface

Properties

language

content

contentUrl

hiddenContent

hiddenContentUrl

foldedLines

title

hideTitle

order

selector

position

EditorConfig Interface

editor

theme

themeColor

editorTheme

fontFamily

fontSize

useTabs

tabSize

lineNumbers

wordWrap

foldRegions

closeBrackets

minimap

emmet

editorMode

Usage Examples

Basic Editor Configuration

With Hidden Content

Custom Editor Settings

Loading from URL

Build docs developers (and LLMs) love

Core API

Methods

Events

​Editor Interface

​Properties

​language

​content

​contentUrl

​hiddenContent

​hiddenContentUrl

​foldedLines

​title

​hideTitle

​order

​selector

​position

​EditorConfig Interface

​editor

​theme

​themeColor

​editorTheme

​fontFamily

​fontSize

​useTabs

​tabSize

​lineNumbers

​wordWrap

​foldRegions

​closeBrackets

​minimap

​emmet

​editorMode

​Usage Examples

​Basic Editor Configuration

​With Hidden Content

​Custom Editor Settings

​Loading from URL

Build docs developers (and LLMs) love

Editor Interface

Properties

language

content

contentUrl

hiddenContent

hiddenContentUrl

foldedLines

title

hideTitle

order

selector

position

EditorConfig Interface

editor

theme

themeColor

editorTheme

fontFamily

fontSize

useTabs

tabSize

lineNumbers

wordWrap

foldRegions

closeBrackets

minimap

emmet

editorMode

Usage Examples

Basic Editor Configuration

With Hidden Content

Custom Editor Settings

Loading from URL