Skip to main content

Interface: Config

The playground configuration interface combining content, app, and user settings.

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​

src/sdk/models.ts:1178

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​

src/sdk/models.ts:1084

appLanguage​

appLanguage: undefined | AppLanguage

Sets the app UI language used.

Inherited from​

UserConfig.appLanguage

Defined in​

src/sdk/models.ts:1064

autosave​

autosave: boolean

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

Default​

false

Inherited from​

UserConfig.autosave

Defined in​

src/sdk/models.ts:1013

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​

src/sdk/models.ts:1019

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​

src/sdk/models.ts:1006

closeBrackets​

closeBrackets: boolean

Use auto-complete to close brackets and quotes.

Default​

true

Inherited from​

UserConfig.closeBrackets

Defined in​

src/sdk/models.ts:977

cssPreset​

cssPreset: CssPresetId

CSS Preset to use.

Inherited from​

ContentConfig.cssPreset

Defined in​

src/sdk/models.ts:1225

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

cc​

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

cs​

cs: any

cs-wasm​

cs-wasm: any

csharp​

csharp: any

csharp-wasm​

csharp-wasm: 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

dzn​

dzn: any

edn​

edn: any

ejs​

ejs: any

elm​

elm: any

es​

es: any

eta​

eta: any

fennel​

fennel: any

flow​

flow: any

fnl​

fnl: any

fs​

fs: any

fs-wasm​

fs-wasm: any

fsharp​

fsharp: any

fsharp-wasm​

fsharp-wasm: any

fsx​

fsx: any

gleam​

gleam: any

go​

go: any

go-wasm​

go-wasm: any

golang​

golang: any

gowasm​

gowasm: any

graph​

graph: any

h​

h: any

haml​

haml: any

handlebars​

handlebars: any

haskell​

haskell: any

haskell-wasm​

haskell-wasm: any

hbs​

hbs: any

hpp​

hpp: any

hs​

hs: any

hs-wasm​

hs-wasm: any

hswasm​

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

java​

java: any

javascript​

javascript: any

jinja​

jinja: any

jl​

jl: any

js​

js: any

json​

json: any

jsx​

jsx: any

julia​

julia: any

less​

less: any

lhs​

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

minizinc​

minizinc: any

mjml​

mjml: any

mjs​

mjs: any

mkdn​

mkdn: any

ml​

ml: any

mli​

mli: any

mts​

mts: any

mustache​

mustache: any

mzn​

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

ripple​

ripple: any

ripplejs​

ripplejs: any

rlang​

rlang: any

rs​

rs: any

rs-wasm​

rs-wasm: any

rstats​

rstats: any

rte​

rte: any

rte.html​

html: any

ruby​

ruby: any

ruby-wasm​

ruby-wasm: any

rubywasm​

rubywasm: any

rust​

rust: any

rust-wasm​

rust-wasm: any

sass​

sass: any

scheme​

scheme: any

scm​

scm: any

scriptType?​

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

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

swift​

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

vb​

vb: any

vb-wasm​

vb-wasm: any

vbnet​

vbnet: 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.cs​

cs: any

wasm.fs​

fs: any

wasm.fsx​

fsx: any

wasm.go​

go: any

wasm.hs​

hs: any

wasm.lua​

lua: any

wasm.php​

php: any

wasm.py​

py: any

wasm.rb​

rb: any

wasm.rs​

rs: any

wasm.vb​

vb: any

wast​

wast: any

wat​

wat: any

webassembly​

webassembly: any

windicss​

windicss: any

xht​

xht: any

xml​

xml: any

zig​

zig: any

zig-wasm​

zig-wasm: any

Inherited from​

ContentConfig.customSettings

Defined in​

src/sdk/models.ts:1237

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​

src/sdk/models.ts:1027

description​

description: string

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

Default​

""

Inherited from​

ContentConfig.description

Defined in​

src/sdk/models.ts:1148

disableHomeLink: boolean

If true, the link on LiveCodes logo ("Edit on LiveCodes") is disabled in embeds.

Default​

false

Inherited from​

AppConfig.disableHomeLink

Defined in​

src/sdk/models.ts:1128

editor​

editor: undefined | "auto" | "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 in simple mode, while CodeJar is used in codeblock mode, in lite mode and in readonly playgrounds.

If set to auto, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.

Default​

undefined

Inherited from​

UserConfig.editor

Defined in​

src/sdk/models.ts:898

editorMode​

editorMode: undefined | "vim" | "emacs"

Sets editor mode.

Inherited from​

UserConfig.editorMode

Defined in​

src/sdk/models.ts:994

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​

src/sdk/models.ts:924

emmet​

emmet: boolean

Enables Emmet.

Default​

true

Inherited from​

UserConfig.emmet

Defined in​

src/sdk/models.ts:989

foldRegions​

foldRegions: boolean

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

Default​

false

Inherited from​

UserConfig.foldRegions

Defined in​

src/sdk/models.ts:971

fontFamily​

fontFamily: undefined | string

Sets the code editor font family.

Inherited from​

UserConfig.fontFamily

Defined in​

src/sdk/models.ts:929

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​

src/sdk/models.ts:937

formatOnsave​

formatOnsave: boolean

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

Default​

false

Inherited from​

UserConfig.formatOnsave

Defined in​

src/sdk/models.ts:1033

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​

src/sdk/models.ts:1154

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​

src/sdk/models.ts:1163

imports​

imports: object

Allows specifying custom import maps for module imports.

Example

Setting imports like this:

"imports": {
  "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
}

results in the following import map:

<script type="importmap">
  {
    "imports": {
      "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
    }
  }
</script>

See docs for Imports and Custom Module Resolution

Index Signature​

[key: string]: string

Inherited from​

ContentConfig.imports

Defined in​

src/sdk/models.ts:1263

languages​

languages: undefined | ("html" | "htm" | "markdown" | "md" | "mdown" | "mkdn" | "mdx" | "astro" | "pug" | "jade" | "haml" | "asciidoc" | "adoc" | "asc" | "mustache" | "handlebars" | "hbs" | "ejs" | "eta" | "nunjucks" | "njk" | "liquid" | "liquidjs" | "dot" | "twig" | "vento" | "vto" | "art-template" | "art" | "jinja" | "bbcode" | "bb" | "mjml" | "diagrams" | "diagram" | "graph" | "plt" | "richtext" | "rte" | "rich" | "rte.html" | "css" | "scss" | "sass" | "less" | "stylus" | "styl" | "stylis" | "postcss" | "javascript" | "js" | "mjs" | "json" | "babel" | "es" | "sucrase" | "typescript" | "flow" | "ts" | "mts" | "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" | "solid.jsx" | "solid.tsx" | "riot" | "riotjs" | "malina" | "malinajs" | "ripple" | "ripplejs" | "xht" | "coffeescript" | "coffee" | "livescript" | "ls" | "civet" | "clio" | "imba" | "elm" | "assemblyscript" | "as" | "python" | "py" | "pyodide" | "python-wasm" | "py-wasm" | "pythonwasm" | "pywasm" | "py3" | "wasm.py" | "r" | "rlang" | "rstats" | "r-wasm" | "ruby" | "rb" | "ruby-wasm" | "wasm.rb" | "rubywasm" | "go" | "golang" | "go-wasm" | "wasm.go" | "gowasm" | "php" | "php-wasm" | "phpwasm" | "wasm.php" | "cpp" | "cc" | "c" | "C" | "cp" | "cxx" | "c++" | "cppm" | "ixx" | "ii" | "hpp" | "h" | "cpp-wasm" | "cppwasm" | "cwasm" | "wasm.cpp" | "clang" | "clang.cpp" | "java" | "csharp" | "csharp-wasm" | "cs" | "cs-wasm" | "wasm.cs" | "vb" | "vb-wasm" | "vbnet" | "wasm.vb" | "fsharp" | "fs" | "fsx" | "fsharp-wasm" | "fs-wasm" | "wasm.fs" | "wasm.fsx" | "rust" | "rs" | "rust-wasm" | "rs-wasm" | "wasm.rs" | "perl" | "pl" | "pm" | "lua" | "lua-wasm" | "luawasm" | "wasm.lua" | "teal" | "tl" | "fennel" | "fnl" | "julia" | "jl" | "haskell" | "hs" | "lhs" | "haskell-wasm" | "hs-wasm" | "wasm.hs" | "hswasm" | "scheme" | "scm" | "commonlisp" | "common-lisp" | "lisp" | "clojurescript" | "clojure" | "cljs" | "clj" | "cljc" | "edn" | "gleam" | "swift" | "zig" | "zig-wasm" | "rescript" | "res" | "resi" | "reason" | "re" | "rei" | "ocaml" | "ml" | "mli" | "tcl" | "wat" | "wast" | "webassembly" | "wasm" | "Binary" | "sql" | "sqlite" | "sqlite3" | "pg.sql" | "pgsql.sql" | "pgsql" | "pg" | "pglite" | "pglite.sql" | "postgresql" | "postgres" | "postgre.sql" | "postgresql.sql" | "prolog.pl" | "prolog" | "minizinc" | "mzn" | "dzn" | "blockly" | "blockly.xml" | "xml" | "pintora" | "postcssImportUrl" | "tailwindcss" | "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​

src/sdk/models.ts:1185

layout​

layout: undefined | "responsive" | "horizontal" | "vertical"

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​

src/sdk/models.ts:1042

lineNumbers​

lineNumbers: boolean | "relative"

Show line numbers in code editor.

Default​

true

Inherited from​

UserConfig.lineNumbers

Defined in​

src/sdk/models.ts:959

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.

foldedLines?​

optional foldedLines: object[]

Lines that get folded when the editor loads.

This can be used for less relevant content.

Example​
[{ from: 5, to: 8 }, { from: 15, to: 20 }]

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

order?​

optional order: number

The order of the editor in the UI.

Default​
0

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​

src/sdk/models.ts:1193

minimap​

minimap: boolean

Enables minimap in code editor.

Default​

false

Inherited from​

UserConfig.minimap

Defined in​

src/sdk/models.ts:983

mode​

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

Sets the display mode.

Default​

"full"

Inherited from​

AppConfig.mode

Defined in​

src/sdk/models.ts:1096

processors​

processors: Processor[]

List of enabled CSS processors.

For the list of available processors, see Processor

Inherited from​

ContentConfig.processors

Defined in​

src/sdk/models.ts:1232

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​

src/sdk/models.ts:1078

recoverUnsaved​

recoverUnsaved: boolean

Enables recovering last unsaved project when the app is reopened.

Default​

true

Inherited from​

UserConfig.recoverUnsaved

Defined in​

src/sdk/models.ts:1048

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.

foldedLines?​

optional foldedLines: object[]

Lines that get folded when the editor loads.

This can be used for less relevant content.

Example​
[{ from: 5, to: 8 }, { from: 15, to: 20 }]

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

order?​

optional order: number

The order of the editor in the UI.

Default​
0

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​

src/sdk/models.ts:1209

scripts​

scripts: string[]

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

Inherited from​

ContentConfig.scripts

Defined in​

src/sdk/models.ts:1219

semicolons​

semicolons: boolean

Configures Prettier code formatter to use semi-colons.

Default​

true

Inherited from​

UserConfig.semicolons

Defined in​

src/sdk/models.ts:869

showSpacing​

showSpacing: boolean

Enables showing element spacing in the result page.

Default​

false

Inherited from​

UserConfig.showSpacing

Defined in​

src/sdk/models.ts:1054

singleQuote​

singleQuote: boolean

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

Default​

false

Inherited from​

UserConfig.singleQuote

Defined in​

src/sdk/models.ts:874

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.

foldedLines?​

optional foldedLines: object[]

Lines that get folded when the editor loads.

This can be used for less relevant content.

Example​
[{ from: 5, to: 8 }, { from: 15, to: 20 }]

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

order?​

optional order: number

The order of the editor in the UI.

Default​
0

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​

src/sdk/models.ts:1201

stylesheets​

stylesheets: string[]

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

Inherited from​

ContentConfig.stylesheets

Defined in​

src/sdk/models.ts:1214

tabSize​

tabSize: number

The number of spaces per indentation-level.

Also used in code formatting.

Default​

2

Inherited from​

UserConfig.tabSize

Defined in​

src/sdk/models.ts:953

tags​

tags: string[]

Project tags. Used in project filter and search.

Default​

[]

Inherited from​

ContentConfig.tags

Defined in​

src/sdk/models.ts:1170

tests​

tests: undefined | object

Configures the language and content of tests.

Inherited from​

ContentConfig.tests

Defined in​

src/sdk/models.ts:1299

theme​

theme: Theme

Sets the app theme to light/dark mode.

Default​

"dark"

Inherited from​

UserConfig.theme

Defined in​

src/sdk/models.ts:904

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​

src/sdk/models.ts:911

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​

src/sdk/models.ts:1141

tools​

tools: Partial<object>

Sets enabled and active tools and status of tools pane.

Type declaration​

active​

active: "" | ToolName

enabled​

enabled: (ToolName | "zoom")[] | "all"

status​

status: ToolsPaneStatus

Default​

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

Example​

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

Inherited from​

AppConfig.tools

Defined in​

src/sdk/models.ts:1112

trailingComma​

trailingComma: boolean

Configures Prettier code formatter to use trailing commas.

Default​

true

Inherited from​

UserConfig.trailingComma

Defined in​

src/sdk/models.ts:880

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​

src/sdk/models.ts:1293

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​

src/sdk/models.ts:945

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​

src/sdk/models.ts:1306

view?​

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

Sets the default view for the playground.

Default​

"split"

Inherited from​

AppConfig.view

Defined in​

src/sdk/models.ts:1090

welcome​

welcome: boolean

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

Inherited from​

UserConfig.welcome

Defined in​

src/sdk/models.ts:1059

wordWrap​

wordWrap: boolean

Enables word-wrap for long lines.

Default​

false

Inherited from​

UserConfig.wordWrap

Defined in​

src/sdk/models.ts:965

zoom​

zoom: 0.25 | 0.5 | 1

Sets result page zoom level.

Inherited from​

AppConfig.zoom

Defined in​

src/sdk/models.ts:1121

Sponsors