Skip to main content

Interface: Config

The playground configuration object.

It is an object that holds the configuration and state of the playground.

See docs for details.

Extends​

Properties​

activeEditor​

activeEditor: undefined | EditorId

Selects the active editor to show.

Defaults to the last used editor for user, otherwise "markup"

Inherited from​

ContentConfig.activeEditor

Defined in​

models.ts:455

allowLangChange​

allowLangChange: boolean

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

Default​

true

Inherited from​

AppConfig.allowLangChange

Defined in​

models.ts:603

appLanguage​

appLanguage: undefined | AppLanguage

Sets the app UI language used.

Inherited from​

UserConfig.appLanguage

Defined in​

models.ts:707

autosave​

autosave: boolean

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

Default​

false

Inherited from​

UserConfig.autosave

Defined in​

models.ts:656

autotest​

autotest: boolean

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

Default​

false

Inherited from​

UserConfig.autotest

Defined in​

models.ts:662

autoupdate​

autoupdate: boolean

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

Default​

true

Inherited from​

UserConfig.autoupdate

Defined in​

models.ts:649

closeBrackets​

closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default​

true

Inherited from​

UserConfig.closeBrackets

Defined in​

models.ts:791

cssPreset​

cssPreset: CssPresetId

CSS Preset to use.

Inherited from​

ContentConfig.cssPreset

Defined in​

models.ts:502

customSettings​

customSettings: object

Defines custom settings for the current project.

adoc​

adoc: any

app.svelte​

svelte: any

app.vue​

vue: any

art​

art: any

art-template​

art-template: any

as​

as: any

asc​

asc: any

asciidoc​

asciidoc: any

assemblyscript​

assemblyscript: any

astro​

astro: any

autoprefixer​

autoprefixer: any

babel​

babel: any

bb​

bb: any

bbcode​

bbcode: any

Binary​

Binary: any

blockly​

blockly: any

blockly.xml​

xml: any

c​

c: any

C​

C: any

c++​

c++: any

civet​

civet: any

clang​

clang: any

clang.cpp​

cpp: any

clio​

clio: any

clj​

clj: any

cljc​

cljc: any

cljs​

cljs: any

clojure​

clojure: any

clojurescript​

clojurescript: any

coffee​

coffee: any

coffeescript​

coffeescript: any

common-lisp​

common-lisp: any

commonlisp​

commonlisp: any

convertCommonjs?​

optional convertCommonjs: boolean

cp​

cp: any

cpp​

cpp: any

cpp-wasm​

cpp-wasm: any

cppm​

cppm: any

cppwasm​

cppwasm: any

csharp​

csharp: any

css​

css: any

cssmodules​

cssmodules: any

cssnano​

cssnano: any

cwasm​

cwasm: any

cxx​

cxx: any

defaultCDN?​

optional defaultCDN: CDN

diagram​

diagram: any

diagrams​

diagrams: any

dot​

dot: any

edn​

edn: any

ejs​

ejs: any

es​

es: any

eta​

eta: any

fennel​

fennel: any

flow​

flow: any

fnl​

fnl: any

gleam​

gleam: any

go​

go: any

golang​

golang: any

graph​

graph: any

h​

h: any

haml​

haml: any

handlebars​

handlebars: any

hbs​

hbs: any

hpp​

hpp: any

htm​

htm: any

html​

html: any

ii​

ii: any

imba​

imba: any

imports?​

optional imports: Record<string, string>

ixx​

ixx: any

jade​

jade: any

javascript​

javascript: any

jl​

jl: any

js​

js: any

json​

json: any

jsx​

jsx: any

julia​

julia: any

less​

less: any

lightningcss​

lightningcss: any

liquid​

liquid: any

liquidjs​

liquidjs: any

lisp​

lisp: any

livescript​

livescript: any

ls​

ls: any

lua​

lua: any

lua-wasm​

lua-wasm: any

luawasm​

luawasm: any

malina​

malina: any

malinajs​

malinajs: any

mapImports?​

optional mapImports: boolean

markdown​

markdown: any

md​

md: any

mdown​

mdown: any

mdx​

mdx: any

mjml​

mjml: any

mkdn​

mkdn: any

ml​

ml: any

mli​

mli: any

mustache​

mustache: any

njk​

njk: any

nunjucks​

nunjucks: any

ocaml​

ocaml: any

perl​

perl: any

pg​

pg: any

pg.sql​

sql: any

pglite​

pglite: any

pglite.sql​

sql: any

pgsql​

pgsql: any

pgsql.sql​

sql: any

php​

php: any

php-wasm​

php-wasm: any

phpwasm​

phpwasm: any

pintora​

pintora: any

pl​

pl: any

plt​

plt: any

pm​

pm: any

postcss​

postcss: any

postcssImportUrl​

postcssImportUrl: any

postcssPresetEnv​

postcssPresetEnv: any

postgre.sql​

sql: any

postgres​

postgres: any

postgresql​

postgresql: any

postgresql.sql​

sql: any

prolog​

prolog: any

prolog.pl​

pl: any

pug​

pug: any

purgecss​

purgecss: any

py​

py: any

py-wasm​

py-wasm: any

py3​

py3: any

pyodide​

pyodide: any

python​

python: any

python-wasm​

python-wasm: any

pythonwasm​

pythonwasm: any

pywasm​

pywasm: any

r​

r: any

r-wasm​

r-wasm: any

rb​

rb: any

re​

re: any

react​

react: any

react-jsx​

react-jsx: any

react-native​

react-native: any

react-native-tsx​

react-native-tsx: any

react-native.jsx​

jsx: any

react-native.tsx​

tsx: any

react-tsx​

react-tsx: any

react.jsx​

jsx: any

react.tsx​

tsx: any

reason​

reason: any

rei​

rei: any

res​

res: any

rescript​

rescript: any

resi​

resi: any

rich​

rich: any

richtext​

richtext: any

riot​

riot: any

riotjs​

riotjs: any

rlang​

rlang: any

rstats​

rstats: any

rte​

rte: any

rte.html​

html: any

ruby​

ruby: any

ruby-wasm​

ruby-wasm: any

rubywasm​

rubywasm: any

sass​

sass: any

scheme​

scheme: any

scm​

scm: any

scriptType?​

optional scriptType: "" | "module" | "text/liquid" | "text/python" | "text/r" | "text/ruby-wasm" | "text/x-uniter-php" | "text/php-wasm" | "text/cpp" | "text/perl" | "text/julia" | "text/biwascheme" | "text/commonlisp" | "text/tcl" | "text/prolog" | "application/json" | "application/lua" | "text/fennel" | "application/wasm-uint8" | "application/javascript" | "application/ecmascript" | "text/javascript" | "text/ecmascript"

scss​

scss: any

solid​

solid: any

solid.jsx​

jsx: any

solid.tsx​

tsx: any

sql​

sql: any

sqlite​

sqlite: any

sqlite3​

sqlite3: any

stencil​

stencil: any

stencil.tsx​

tsx: any

styl​

styl: any

stylis​

stylis: any

stylus​

stylus: any

sucrase​

sucrase: any

svelte​

svelte: any

svelte-app​

svelte-app: any

tailwindcss​

tailwindcss: any

tcl​

tcl: any

teal​

teal: any

template?​

optional template: object

template.data?​

optional data: any

template.prerender?​

optional prerender: boolean

tl​

tl: any

tokencss​

tokencss: any

ts​

ts: any

tsx​

tsx: any

twig​

twig: any

types?​

optional types: Types

typescript​

typescript: any

unocss​

unocss: any

vento​

vento: any

vto​

vto: any

vue​

vue: any

vue-app​

vue-app: any

vue2​

vue2: any

vue3​

vue3: any

wasm​

wasm: any

wasm.cpp​

cpp: any

wasm.lua​

lua: any

wasm.php​

php: any

wasm.py​

py: any

wasm.rb​

rb: any

wast​

wast: any

wat​

wat: any

webassembly​

webassembly: any

windicss​

windicss: any

xht​

xht: any

xml​

xml: any

Inherited from​

ContentConfig.customSettings

Defined in​

models.ts:514

delay​

delay: number

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).

Default​

1500

Inherited from​

UserConfig.delay

Defined in​

models.ts:670

description​

description: string

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

Default​

""

Inherited from​

ContentConfig.description

Defined in​

models.ts:425

editor​

editor: undefined | "monaco" | "codemirror" | "codejar"

Selects the code editor to use.

If undefined (the default), Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in codeblocks, in lite mode and in readonly playgrounds.

Default​

undefined

Inherited from​

UserConfig.editor

Defined in​

models.ts:718

editorMode​

editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from​

UserConfig.editorMode

Defined in​

models.ts:802

editorTheme​

editorTheme: undefined | string | EditorTheme[]

Sets the code editor themes.

See docs for editor themes for details.

Examples​

"vs"
"monaco:twilight, codemirror:one-dark"
["vs@light"]
["vs@light", "vs-dark@dark"]
["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]

Inherited from​

UserConfig.editorTheme

Defined in​

models.ts:744

emmet​

emmet: boolean

Enables Emmet.

Default​

true

Inherited from​

UserConfig.emmet

Defined in​

models.ts:797

enableAI​

enableAI: boolean

If true, AI code assistant is enabled.

Default​

false

Inherited from​

UserConfig.enableAI

Defined in​

models.ts:808

fontFamily​

fontFamily: undefined | string

Sets the code editor font family.

Inherited from​

UserConfig.fontFamily

Defined in​

models.ts:749

fontSize​

fontSize: undefined | number

Sets the font size.

If undefined (the default), the font size is set to 14 for the full app and 12 for embeds.

Default​

undefined

Inherited from​

UserConfig.fontSize

Defined in​

models.ts:757

formatOnsave​

formatOnsave: boolean

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

Default​

false

Inherited from​

UserConfig.formatOnsave

Defined in​

models.ts:676

head: string

Content added to the result page <head> element.

Default​

'<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'

Inherited from​

ContentConfig.head

Defined in​

models.ts:431

htmlAttrs​

htmlAttrs: string | Record<string, string>

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

Example​

{ lang: "en", class: "dark" }
'lang="en" class="dark"'

Inherited from​

ContentConfig.htmlAttrs

Defined in​

models.ts:440

imports​

imports: object

Allows specifying custom import maps for module imports.

Example

Setting imports like this:

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

results in the following import map:

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

See docs for Imports and Custom Module Resolution

Index Signature​

[key: string]: string

Inherited from​

ContentConfig.imports

Defined in​

models.ts:540

languages​

languages: undefined | ("reason" | "stylus" | "r" | "html" | "ruby" | "rb" | "json" | "teal" | "solid" | "flow" | "dot" | "as" | "go" | "htm" | "markdown" | "md" | "mdown" | "mkdn" | "mdx" | "astro" | "pug" | "jade" | "haml" | "asciidoc" | "adoc" | "asc" | "mustache" | "handlebars" | "hbs" | "ejs" | "eta" | "nunjucks" | "njk" | "liquid" | "liquidjs" | "twig" | "vento" | "vto" | "art-template" | "art" | "bbcode" | "bb" | "mjml" | "diagrams" | "diagram" | "graph" | "plt" | "richtext" | "rte" | "rich" | "rte.html" | "css" | "scss" | "sass" | "less" | "styl" | "stylis" | "postcss" | "javascript" | "js" | "babel" | "es" | "sucrase" | "typescript" | "ts" | "jsx" | "tsx" | "react" | "react-jsx" | "react.jsx" | "react-tsx" | "react.tsx" | "react-native" | "react-native.jsx" | "react-native-tsx" | "react-native.tsx" | "vue" | "vue3" | "vue2" | "vue-app" | "app.vue" | "svelte" | "svelte-app" | "app.svelte" | "stencil" | "stencil.tsx" | "solid.jsx" | "solid.tsx" | "riot" | "riotjs" | "malina" | "malinajs" | "xht" | "coffeescript" | "coffee" | "livescript" | "ls" | "civet" | "clio" | "imba" | "assemblyscript" | "python" | "py" | "pyodide" | "python-wasm" | "py-wasm" | "pythonwasm" | "pywasm" | "py3" | "wasm.py" | "rlang" | "rstats" | "r-wasm" | "ruby-wasm" | "wasm.rb" | "rubywasm" | "golang" | "php" | "php-wasm" | "phpwasm" | "wasm.php" | "cpp" | "c" | "C" | "cp" | "cxx" | "c++" | "cppm" | "ixx" | "ii" | "hpp" | "h" | "cpp-wasm" | "cppwasm" | "cwasm" | "wasm.cpp" | "clang" | "clang.cpp" | "perl" | "pl" | "pm" | "lua" | "lua-wasm" | "luawasm" | "wasm.lua" | "tl" | "fennel" | "fnl" | "julia" | "jl" | "scheme" | "scm" | "commonlisp" | "common-lisp" | "lisp" | "clojurescript" | "clojure" | "cljs" | "clj" | "cljc" | "edn" | "gleam" | "rescript" | "res" | "resi" | "re" | "rei" | "ocaml" | "ml" | "mli" | "tcl" | "wat" | "wast" | "webassembly" | "wasm" | "Binary" | "csharp" | "sql" | "sqlite" | "sqlite3" | "pg.sql" | "pgsql.sql" | "pgsql" | "pg" | "pglite" | "pglite.sql" | "postgresql" | "postgres" | "postgre.sql" | "postgresql.sql" | "prolog.pl" | "prolog" | "blockly" | "blockly.xml" | "xml" | "pintora" | "tailwindcss" | "postcssImportUrl" | "windicss" | "unocss" | "tokencss" | "lightningcss" | "autoprefixer" | "postcssPresetEnv" | "cssmodules" | "purgecss" | "cssnano")[]

List of enabled languages.

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

Inherited from​

ContentConfig.languages

Defined in​

models.ts:462

layout​

layout: undefined | "horizontal" | "vertical" | "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.

Default​

"responsive"

Inherited from​

UserConfig.layout

Defined in​

models.ts:685

lineNumbers​

lineNumbers: boolean | "relative"

Show line numbers in code editor.

Default​

true

Inherited from​

UserConfig.lineNumbers

Defined in​

models.ts:779

markup​

markup: object

An object that configures the language and content of the markup editor.

See docs for details.

content?​

optional content: string

The initial content of the code editor.

Default​
""

contentUrl?​

optional 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.

hiddenContent?​

optional 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)

hiddenContentUrl?​

optional 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.

hideTitle?​

optional 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).

language​

language: Language

A language name, extension or alias (as defined in language documentations).

For the list of supported values, see Language

position?​

optional position: EditorPosition

The initial position of the cursor in the code editor.

Example​
{lineNumber: 5, column: 10}

selector?​

optional selector: string

A CSS selector to load content from DOM import.

title?​

optional 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 (e.g. "Python" can be used instead of "Py (Wasm)").

Default​

{ language: "html", content: "" }

Inherited from​

ContentConfig.markup

Defined in​

models.ts:470

mode​

mode: "focus" | "full" | "result" | "editor" | "lite" | "simple" | "codeblock"

Sets the display mode.

Default​

"full"

Inherited from​

AppConfig.mode

Defined in​

models.ts:615

processors​

processors: Processor[]

List of enabled CSS processors.

For the list of available processors, see Processor

Inherited from​

ContentConfig.processors

Defined in​

models.ts:509

readonly​

readonly: boolean

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.

Default​

false

Inherited from​

AppConfig.readonly

Defined in​

models.ts:597

recoverUnsaved​

recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default​

true

Inherited from​

UserConfig.recoverUnsaved

Defined in​

models.ts:691

script​

script: object

An object that configures the language and content of the script editor.

See docs for details.

content?​

optional content: string

The initial content of the code editor.

Default​
""

contentUrl?​

optional 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.

hiddenContent?​

optional 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)

hiddenContentUrl?​

optional 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.

hideTitle?​

optional 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).

language​

language: Language

A language name, extension or alias (as defined in language documentations).

For the list of supported values, see Language

position?​

optional position: EditorPosition

The initial position of the cursor in the code editor.

Example​
{lineNumber: 5, column: 10}

selector?​

optional selector: string

A CSS selector to load content from DOM import.

title?​

optional 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 (e.g. "Python" can be used instead of "Py (Wasm)").

Default​

{ language: "javascript", content: "" }

Inherited from​

ContentConfig.script

Defined in​

models.ts:486

scripts​

scripts: string[]

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

Inherited from​

ContentConfig.scripts

Defined in​

models.ts:496

semicolons​

semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default​

true

Inherited from​

UserConfig.semicolons

Defined in​

models.ts:828

showSpacing​

showSpacing: boolean

Enables showing element spacing in the result page.

Default​

false

Inherited from​

UserConfig.showSpacing

Defined in​

models.ts:697

singleQuote​

singleQuote: boolean

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

Default​

false

Inherited from​

UserConfig.singleQuote

Defined in​

models.ts:833

style​

style: object

An object that configures the language and content of the style editor.

See docs for details.

content?​

optional content: string

The initial content of the code editor.

Default​
""

contentUrl?​

optional 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.

hiddenContent?​

optional 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)

hiddenContentUrl?​

optional 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.

hideTitle?​

optional 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).

language​

language: Language

A language name, extension or alias (as defined in language documentations).

For the list of supported values, see Language

position?​

optional position: EditorPosition

The initial position of the cursor in the code editor.

Example​
{lineNumber: 5, column: 10}

selector?​

optional selector: string

A CSS selector to load content from DOM import.

title?​

optional 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 (e.g. "Python" can be used instead of "Py (Wasm)").

Default​

{ language: "css", content: "" }

Inherited from​

ContentConfig.style

Defined in​

models.ts:478

stylesheets​

stylesheets: string[]

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

Inherited from​

ContentConfig.stylesheets

Defined in​

models.ts:491

tabSize​

tabSize: number

The number of spaces per indentation-level.

Also used in code formatting.

Default​

2

Inherited from​

UserConfig.tabSize

Defined in​

models.ts:773

tags​

tags: string[]

Project tags. Used in project filter and search.

Default​

[]

Inherited from​

ContentConfig.tags

Defined in​

models.ts:447

tests​

tests: undefined | object

Configures the language and content of tests.

Inherited from​

ContentConfig.tests

Defined in​

models.ts:576

theme​

theme: Theme

Sets the app theme to light/dark mode.

Default​

"dark"

Inherited from​

UserConfig.theme

Defined in​

models.ts:724

themeColor​

themeColor: undefined | string

Sets the app theme color. If undefined, it is set to "hsl(214, 40%, 50%)".

Default​

undefined

Inherited from​

UserConfig.themeColor

Defined in​

models.ts:731

title​

title: string

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

Default​

"Untitled Project"

Inherited from​

ContentConfig.title

Defined in​

models.ts:418

tools​

tools: Partial<object>

Sets enabled and active tools and status of tools pane.

Type declaration​

active​

active: "" | "console" | "compiled" | "tests"

enabled​

enabled: "all" | ("console" | "compiled" | "tests")[]

status​

status: ToolsPaneStatus

Default​

{ enabled: "all", active: "", status: "" }

Example​

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

Inherited from​

AppConfig.tools

Defined in​

models.ts:631

trailingComma​

trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default​

true

Inherited from​

UserConfig.trailingComma

Defined in​

models.ts:839

types​

types: object

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.

See docs for Types and Custom Types

Examples​

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

Inherited from​

ContentConfig.types

Defined in​

models.ts:570

useTabs​

useTabs: boolean

If true, lines are indented with tabs instead of spaces.

Also used in code formatting.

Default​

false

Inherited from​

UserConfig.useTabs

Defined in​

models.ts:765

version​

readonly version: string

This is a 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.

Inherited from​

ContentConfig.version

Defined in​

models.ts:583

view?​

optional view: "split" | "result" | "editor"

Sets the default view for the playground.

Default​

"split"

Inherited from​

AppConfig.view

Defined in​

models.ts:609

welcome​

welcome: boolean

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

Inherited from​

UserConfig.welcome

Defined in​

models.ts:702

wordWrap​

wordWrap: boolean

Enables word-wrap for long lines.

Default​

false

Inherited from​

UserConfig.wordWrap

Defined in​

models.ts:785

zoom​

zoom: 0.25 | 0.5 | 1

Sets result page zoom level.

Inherited from​

AppConfig.zoom

Defined in​

models.ts:640

Sponsors