Interface: Config
The playground configuration object.
It is an object that holds the configuration and state of the playground.
See docs for details.
Hierarchy
↳
Config
Properties
activeEditor
• activeEditor: undefined | EditorId
Selects the active editor to show.
Defaults to the last used editor for user, otherwise "markup"
Inherited from
Defined in
allowLangChange
• allowLangChange: boolean
If false, the UI will not show the menu that allows changing editor language.
Default
true
Inherited from
Defined in
autosave
• autosave: boolean
If true, the project is automatically saved on code change,
after time delay.
Default
false
Inherited from
Defined in
autotest
• autotest: boolean
If true, the project is watched for code changes which trigger tests to auto-run.
Default
false
Inherited from
Defined in
autoupdate
• autoupdate: boolean
If true, the result page is automatically updated on code change,
after time delay.
Default
true
Inherited from
Defined in
closeBrackets
• closeBrackets: boolean
Use auto-complete to close brackets and quotes.
Default
true
Inherited from
Defined in
cssPreset
• cssPreset: CssPresetId
CSS Preset to use.
Inherited from
Defined in
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
Defined in
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
Defined in
description
• description: string
Project description. Used in project search and result page description meta tag.
Default
""
Inherited from
Defined in
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
Defined in
editorMode
• editorMode: undefined | "vim" | "emacs"
Sets editor mode.
Inherited from
Defined in
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
Defined in
emmet
• emmet: boolean
Enables Emmet.
Default
true
Inherited from
Defined in
enableAI
• enableAI: boolean
If true, AI code assistant is enabled.
Default
false
Inherited from
Defined in
fontFamily
• fontFamily: undefined | string
Sets the code editor font family.
Inherited from
Defined in
fontSize
• fontSize: undefined | number
Sets the code editor 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
Defined in
formatOnsave
• formatOnsave: boolean
If true, the code is automatically formatted on saving the project.
Default
false
Inherited from
Defined in
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
Defined in
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
Defined in
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
Defined in
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
Defined in
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
Defined in
lineNumbers
• lineNumbers: boolean
Show line numbers in code editor.
Default
true
Inherited from
Defined in
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
Defined in
mode
• mode: "focus" | "full" | "result" | "editor" | "simple" | "codeblock"
Sets the display mode.
Default
"full"
Inherited from
Defined in
processors
• processors: Processor[]
List of enabled CSS processors.
For the list of available processors, see Processor
Inherited from
Defined in
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
Defined in
recoverUnsaved
• recoverUnsaved: boolean
Enables recovering last unsaved project when the app is reopened.
Default
true
Inherited from
Defined in
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
Defined in
scripts
• scripts: string[]
List of URLs for external scripts to add to the result page.
Inherited from
Defined in
semicolons
• semicolons: boolean
Configures Prettier code formatter to use semi-colons.
Default
true
Inherited from
Defined in
showSpacing
• showSpacing: boolean
Enables showing element spacing in the result page.
Default
false
Inherited from
Defined in
singleQuote
• singleQuote: boolean
Configures Prettier code formatter to use single quotes instead of double quotes.
Default
false
Inherited from
Defined in
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
Defined in
stylesheets
• stylesheets: string[]
List of URLs for external stylesheets to add to the result page.
Inherited from
Defined in
tabSize
• tabSize: number
The number of spaces per indentation-level.
Also used in code formatting.
Default
2
Inherited from
Defined in
tags
• tags: string[]
Project tags. Used in project filter and search.
Default
[]
Inherited from
Defined in
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
Defined in
theme
• theme: Theme
Sets the app theme to light/dark mode.
Default
"dark"
Inherited from
Defined in
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
Defined in
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
Defined in
trailingComma
• trailingComma: boolean
Configures Prettier code formatter to use trailing commas.
Default
true
Inherited from
Defined in
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
Defined in
useTabs
• useTabs: boolean
If true, lines are indented with tabs instead of spaces.
Also used in code formatting.
Default
false
Inherited from
Defined in
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
Defined in
welcome
• welcome: boolean
If true, the welcome screen is displayed when the app loads.
Inherited from
Defined in
wordWrap
• wordWrap: boolean
Enables word-wrap for long lines.
Default
false
Inherited from
Defined in
zoom
• zoom: 0.25 | 0.5 | 1
Sets result page zoom level.