Interface: Config

The playground configuration object.

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

See docs for details.

Hierarchy

• ContentConfig

• AppConfig

• UserConfig

  ↳ Config

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:439

---

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:587

---

appLanguage

• appLanguage: undefined | AppLanguage

Sets the app UI language used.

Inherited from

UserConfig.appLanguage

Defined in

models.ts:685

---

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:634

---

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:640

---

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:627

---

closeBrackets

• closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default

true

Inherited from

UserConfig.closeBrackets

Defined in

models.ts:769

---

cssPreset

• cssPreset: CssPresetId

CSS Preset to use.

Inherited from

ContentConfig.cssPreset

Defined in

models.ts:486

---

customSettings

• customSettings: Object

Defines custom settings for the current project.

Type declaration

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

Inherited from

ContentConfig.customSettings

Defined in

models.ts:498

---

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:648

---

description

• description: string

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

Default

""

Inherited from

ContentConfig.description

Defined in

models.ts:409

---

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:696

---

editorMode

• editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from

UserConfig.editorMode

Defined in

models.ts:780

---

editorTheme

• editorTheme: undefined | string | EditorTheme[]

Sets the code editor themes.

See docs for editor themes for details.

Example

"vs"

Example

"monaco:twilight, codemirror:one-dark"

Example

["vs@light"]

Example

["vs@light", "vs-dark@dark"]

Example

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

Inherited from

UserConfig.editorTheme

Defined in

models.ts:722

---

emmet

• emmet: boolean

Enables Emmet.

Default

true

Inherited from

UserConfig.emmet

Defined in

models.ts:775

---

enableAI

• enableAI: boolean

If true, AI code assistant is enabled.

Default

false

Inherited from

UserConfig.enableAI

Defined in

models.ts:786

---

fontFamily

• fontFamily: undefined | string

Sets the code editor font family.

Inherited from

UserConfig.fontFamily

Defined in

models.ts:727

---

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:735

---

formatOnsave

• formatOnsave: boolean

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

Default

false

Inherited from

UserConfig.formatOnsave

Defined in

models.ts:654

---

head

• 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:415

---

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:424

---

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:524

---

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-native" | "react-native.jsx" | "react-native-tsx" | "react-native.tsx" | "vue" | "vue3" | "vue2" | "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:446

---

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:663

---

lineNumbers

• lineNumbers: boolean

Show line numbers in code editor.

Default

true

Inherited from

UserConfig.lineNumbers

Defined in

models.ts:757

---

markup

• markup: Object

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

See docs for details.

Default

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

Type declaration

Name	Type	Description
content?	string	The initial content of the code editor. Default ts ""
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?	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?	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.
language	Language	A language name, extension or alias (as defined in language documentations). For the list of supported values, see Language
position?	EditorPosition	The initial position of the cursor in the code editor. Example ts {lineNumber: 5, column: 10}
selector?	string	A CSS selector to load content from DOM import.
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)").

Inherited from

ContentConfig.markup

Defined in

models.ts:454

---

mode

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

Sets the display mode.

Default

"full"

Inherited from

AppConfig.mode

Defined in

models.ts:593

---

processors

• processors: Processor[]

List of enabled CSS processors.

For the list of available processors, see Processor

Inherited from

ContentConfig.processors

Defined in

models.ts:493

---

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:581

---

recoverUnsaved

• recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default

true

Inherited from

UserConfig.recoverUnsaved

Defined in

models.ts:669

---

script

• script: Object

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

See docs for details.

Default

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

Type declaration

Name	Type	Description
content?	string	The initial content of the code editor. Default ts ""
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?	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?	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.
language	Language	A language name, extension or alias (as defined in language documentations). For the list of supported values, see Language
position?	EditorPosition	The initial position of the cursor in the code editor. Example ts {lineNumber: 5, column: 10}
selector?	string	A CSS selector to load content from DOM import.
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)").

Inherited from

ContentConfig.script

Defined in

models.ts:470

---

scripts

• scripts: string[]

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

Inherited from

ContentConfig.scripts

Defined in

models.ts:480

---

semicolons

• semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default

true

Inherited from

UserConfig.semicolons

Defined in

models.ts:806

---

showSpacing

• showSpacing: boolean

Enables showing element spacing in the result page.

Default

false

Inherited from

UserConfig.showSpacing

Defined in

models.ts:675

---

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:811

---

style

• style: Object

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

See docs for details.

Default

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

Type declaration

Name	Type	Description
content?	string	The initial content of the code editor. Default ts ""
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?	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?	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.
language	Language	A language name, extension or alias (as defined in language documentations). For the list of supported values, see Language
position?	EditorPosition	The initial position of the cursor in the code editor. Example ts {lineNumber: 5, column: 10}
selector?	string	A CSS selector to load content from DOM import.
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)").

Inherited from

ContentConfig.style

Defined in

models.ts:462

---

stylesheets

• stylesheets: string[]

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

Inherited from

ContentConfig.stylesheets

Defined in

models.ts:475

---

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:751

---

tags

• tags: string[]

Project tags. Used in project filter and search.

Default

[]

Inherited from

ContentConfig.tags

Defined in

models.ts:431

---

tests

• tests: undefined | { content?: string ; contentUrl?: string ; hiddenContent?: string ; hiddenContentUrl?: string ; language?: Language ; position?: EditorPosition ; selector?: string ; title?: string }

Configures the language and content of tests.

Inherited from

ContentConfig.tests

Defined in

models.ts:560

---

theme

• theme: Theme

Sets the app theme to light/dark mode.

Default

"dark"

Inherited from

UserConfig.theme

Defined in

models.ts:702

---

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:709

---

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:402

---

tools

• tools: Partial<{ active: "" | "console" | "compiled" | "tests" ; enabled: "all" | ("console" | "compiled" | "tests")[] ; status: ToolsPaneStatus }>

Sets enabled and active tools and status of tools pane.

Default

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

Example

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

Inherited from

AppConfig.tools

Defined in

models.ts:609

---

trailingComma

• trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default

true

Inherited from

UserConfig.trailingComma

Defined in

models.ts:817

---

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

Example

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

Example

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

Inherited from

ContentConfig.types

Defined in

models.ts:554

---

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:743

---

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:567

---

welcome

• welcome: boolean

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

Inherited from

UserConfig.welcome

Defined in

models.ts:680

---

wordWrap

• wordWrap: boolean

Enables word-wrap for long lines.

Default

false

Inherited from

UserConfig.wordWrap

Defined in

models.ts:763

---

zoom

• zoom: 0.25 | 0.5 | 1

Sets result page zoom level.

Inherited from

AppConfig.zoom

Defined in

models.ts:618