Config Interface - LiveCodes

The Config interface represents the playground configuration object. It holds the configuration and state of the playground and is composed of three main parts: content configuration, app configuration, and user configuration.

Overview

interface Config extends ContentConfig, AppConfig, UserConfig {}

Content Configuration

Properties that define the content of the current project.

title

string

default:"Untitled Project"

Project title. Used as result page title and title meta tag. Also used in project search.

description

string

default:""

Project description. Used in project search and result page description meta tag.

head

string

Content added to the result page <head> element.

htmlAttrs

Record<string, string> | string

Attributes added to the result page <html> element. Can be an object or a string.

// Both of these become <html lang="en" class="dark">
{ lang: "en", class: "dark" }
'lang="en" class="dark"'

activeEditor

'markup' | 'style' | 'script' | undefined

Selects the active editor to show. Defaults to the last used editor for user, otherwise "markup".

languages

Array<Language | Processor> | undefined

List of enabled languages. Defaults to all supported languages in full app and only current editor languages in embeds.

markup

Editor

An object that configures the language and content of the markup editor.See Editor Configuration for details.

style

Editor

An object that configures the language and content of the style editor.See Editor Configuration for details.

script

Editor

An object that configures the language and content of the script editor.See Editor Configuration for details.

stylesheets

string[]

List of URLs for external stylesheets to add to the result page.

scripts

string[]

List of URLs for external scripts to add to the result page.

cssPreset

'' | 'normalize.css' | 'reset-css'

CSS Preset to use.

processors

Processor[]

customSettings

CustomSettings

Defines custom settings for the current project.See Custom Settings documentation for details.

imports

{ [key: string]: string }

Allows specifying custom import maps for module imports.

{
  "imports": {
    "moment": "https://cdn.jsdelivr.net/npm/[email protected]/dist/moment.js"
  }
}

This results in the following import map:

<script type="importmap">
  {
    "imports": {
      "moment": "https://cdn.jsdelivr.net/npm/[email protected]/dist/moment.js"
    }
  }
</script>

types

Types

Allows providing custom TypeScript type declarations for better editor intellisense.It is an object where each key represents module name and value represents the types.

{
  "types": {
    "my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts"
  }
}

Or with detailed configuration:

{
  "types": {
    "my-demo-lib": {
      "url": "https://my-custom-domain/types.d.ts",
      "autoload": true,
      "declareAsModule": true
    }
  }
}

tests

Partial<Editor> | undefined

Configures the language and content of tests.See Tests documentation for details.

version

string

Read-only property which specifies the current LiveCodes version.Version specified in exported projects allows automatically upgrading the project configuration when imported by an app with a newer version.

App Configuration

Properties that define how the app behaves.

readonly

boolean

default:false

If true, editors are loaded in read-only mode, where the user is not allowed to change the code.By default, when readonly is set to true, the light-weight code editor CodeJar is used. If you wish to use another editor, set the editor property.

allowLangChange

boolean

default:true

If false, the UI will not show the menu that allows changing editor language.

view

'split' | 'editor' | 'result'

default:"split"

Sets the default view for the playground.

mode

default:"full"

Sets the display mode.

tools

Partial<ToolsConfig>

Sets enabled and active tools and status of tools pane.See Tools Configuration for details.

{
  "tools": {
    "enabled": ["console", "compiled"],
    "active": "console",
    "status": "open"
  }
}

zoom

1 | 0.5 | 0.25

Sets result page zoom level.

User Configuration

User preferences and editor settings.

autoupdate

boolean

default:true

If true, the result page is automatically updated on code change, after time delay.

autosave

boolean

default:false

If true, the project is automatically saved on code change, after time delay.

autotest

boolean

default:false

If true, the project is watched for code changes which trigger tests to auto-run.

delay

number

default:1500

Time delay (in milliseconds) following code change, after which the result page is updated (if autoupdate is true) and/or the project is saved (if autosave is true).

formatOnsave

boolean

default:false

If true, the code is automatically formatted on saving the project.

layout

'responsive' | 'horizontal' | 'vertical' | undefined

default:"responsive"

Sets the app layout to horizontal or vertical.If set to "responsive" (the default) or undefined, the layout is vertical in small screens when the playground height is larger than its width, otherwise horizontal.

recoverUnsaved

boolean

default:true

Enables recovering last unsaved project when the app is reopened.

showSpacing

boolean

default:false

Enables showing element spacing in the result page.

welcome

boolean

If true, the welcome screen is displayed when the app loads.

appLanguage

AppLanguage | undefined

Sets the app UI language used.Available languages: "auto" | "ar" | "bn" | "de" | "en" | "es" | "fa" | "fr" | "hi" | "id" | "it" | "ja" | "nl" | "pt" | "tr" | "ru" | "ur" | "zh-CN"

Editor Settings

See Editor Configuration for detailed editor configuration options including:

editor - Code editor to use
theme - App theme (light/dark)
themeColor - App theme color
editorTheme - Code editor themes
fontFamily - Editor font family
fontSize - Editor font size
useTabs - Use tabs instead of spaces
tabSize - Spaces per indentation
lineNumbers - Show line numbers
wordWrap - Enable word wrap
foldRegions - Fold regions on load
closeBrackets - Auto-close brackets
minimap - Enable minimap
emmet - Enable Emmet
editorMode - Editor mode (vim/emacs)

Formatter Settings

semicolons

boolean

default:true

Configures Prettier code formatter to use semi-colons.

singleQuote

boolean

default:false

Configures Prettier code formatter to use single quotes instead of double quotes.

trailingComma

boolean

default:true

Configures Prettier code formatter to use trailing commas.

Type Definition

interface Config extends ContentConfig, AppConfig, UserConfig {}

interface ContentConfig {
  title: string;
  description: string;
  head: string;
  htmlAttrs: Record<string, string> | string;
  tags: string[];
  activeEditor: EditorId | undefined;
  languages: Array<Language | Processor> | undefined;
  markup: Editor;
  style: Editor;
  script: Editor;
  stylesheets: string[];
  scripts: string[];
  cssPreset: CssPresetId;
  processors: Processor[];
  customSettings: CustomSettings;
  imports: { [key: string]: string };
  types: Types;
  tests: Partial<Editor> | undefined;
  readonly version: string;
}

interface AppConfig {
  readonly: boolean;
  allowLangChange: boolean;
  view?: 'split' | 'editor' | 'result';
  mode: 'full' | 'focus' | 'lite' | 'simple' | 'editor' | 'codeblock' | 'result';
  tools: Partial<ToolsConfig>;
  zoom: 1 | 0.5 | 0.25;
}

interface UserConfig extends EditorConfig, FormatterConfig {
  autoupdate: boolean;
  autosave: boolean;
  autotest: boolean;
  delay: number;
  formatOnsave: boolean;
  layout: 'responsive' | 'horizontal' | 'vertical' | undefined;
  recoverUnsaved: boolean;
  showSpacing: boolean;
  welcome: boolean;
  appLanguage: AppLanguage | undefined;
}

Core API

Methods

Events

​Overview

​Content Configuration

​title

​description

​head

​htmlAttrs

​tags

​activeEditor

​languages

​markup

​style

​script

​stylesheets

​scripts

​cssPreset

​processors

​customSettings

​imports

​types

​tests

​version

​App Configuration

​readonly

​allowLangChange

​view

​mode

​tools

​zoom

​User Configuration

​autoupdate

​autosave

​autotest

​delay

​formatOnsave

​layout

​recoverUnsaved

​showSpacing

​welcome

​appLanguage

​Editor Settings

​Formatter Settings

​Type Definition

Build docs developers (and LLMs) love

Overview

Content Configuration

title

description

head

htmlAttrs

tags

activeEditor

languages

markup

style

script

stylesheets

scripts

cssPreset

processors

customSettings

imports

types

tests

version

App Configuration

readonly

allowLangChange

view

mode

tools

zoom

User Configuration

autoupdate

autosave

autotest

delay

formatOnsave

layout

recoverUnsaved

showSpacing

welcome

appLanguage

Editor Settings

Formatter Settings

Type Definition