Interface: EmbedOptions

An object that represents the playground embed options.

See docs for details.

Properties

appUrl

• Optional appUrl: string

Allows loading the playground from a custom URL (e.g. a self-hosted app or a permanent URL).

If supplied with an invalid URL, an error is thrown.

Default

'https://livecodes.io'

Defined in

models.ts:314

config

• Optional config: string | Partial<Config>

A configuration object or a URL to a JSON file representing a configuration object to load.

If supplied and is not an object or a valid URL, an error is thrown.

Default

{}

Defined in

models.ts:346

import

• Optional import: string

A resource to import (from any of the supported sources).

Defined in

models.ts:351

lite

• Optional lite: boolean

If true, the playground is loaded in lite mode.

Defined in

models.ts:356

loading

• Optional loading: "click" | "eager" | "lazy"

Sets how the playground loads:

"eager": The playground loads immediately.
"lazy": A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport.
"click": The playground does not load automatically. Instead, a "Click-to-load" screen is shown.

Default

"lazy"

Defined in

models.ts:367

params

• Optional params: Object

An object that represents the URL Query parameters, that can be used to configure the playground.

These 2 snippets produce similar output:

import { createPlayground } from 'livecodes';

// use config
createPlayground('#container', {
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
});

// use params
createPlayground('#container', { params: { md: '# Hello World!' } });

Type declaration

Name	Type	Description
`Binary`	`undefined` \| `string`	-
`Binary-selector`	`undefined` \| `string`	-
`C`	`undefined` \| `string`	-
`C-selector`	`undefined` \| `string`	-
`active?`	`0` \| `2` \| `1` \| `EditorId`	-
`activeEditor?`	`0` \| `2` \| `1` \| `EditorId`	-
`adoc`	`undefined` \| `string`	-
`adoc-selector`	`undefined` \| `string`	-
`allowLangChange?`	`boolean`	If `false`, the UI will not show the menu that allows changing editor language. `Default` `ts true`
`appUrl?`	`string`	Allows loading the playground from a custom URL (e.g. a self-hosted app or a permanent URL). If supplied with an invalid URL, an error is thrown. `Default` `ts 'https://livecodes.io'`
`art`	`undefined` \| `string`	-
`art-selector`	`undefined` \| `string`	-
`art-template`	`undefined` \| `string`	-
`art-template-selector`	`undefined` \| `string`	-
`as`	`undefined` \| `string`	-
`as-selector`	`undefined` \| `string`	-
`asc`	`undefined` \| `string`	-
`asc-selector`	`undefined` \| `string`	-
`asciidoc`	`undefined` \| `string`	-
`asciidoc-selector`	`undefined` \| `string`	-
`assemblyscript`	`undefined` \| `string`	-
`assemblyscript-selector`	`undefined` \| `string`	-
`astro`	`undefined` \| `string`	-
`astro-selector`	`undefined` \| `string`	-
`autosave?`	`boolean`	If `true`, the project is automatically saved on code change, after time delay. `Default` `ts false`
`autotest?`	`boolean`	If `true`, the project is watched for code changes which trigger tests to auto-run. `Default` `ts false`
`autoupdate?`	`boolean`	If `true`, the result page is automatically updated on code change, after time delay. `Default` `ts true`
`babel`	`undefined` \| `string`	-
`babel-selector`	`undefined` \| `string`	-
`bb`	`undefined` \| `string`	-
`bb-selector`	`undefined` \| `string`	-
`bbcode`	`undefined` \| `string`	-
`bbcode-selector`	`undefined` \| `string`	-
`blockly`	`undefined` \| `string`	-
`blockly-selector`	`undefined` \| `string`	-
`blockly.xml`	`undefined` \| `string`	-
`blockly.xml-selector`	`undefined` \| `string`	-
`c`	`undefined` \| `string`	-
`c++`	`undefined` \| `string`	-
`c++-selector`	`undefined` \| `string`	-
`c-selector`	`undefined` \| `string`	-
`civet`	`undefined` \| `string`	-
`civet-selector`	`undefined` \| `string`	-
`clang`	`undefined` \| `string`	-
`clang-selector`	`undefined` \| `string`	-
`clang.cpp`	`undefined` \| `string`	-
`clang.cpp-selector`	`undefined` \| `string`	-
`clio`	`undefined` \| `string`	-
`clio-selector`	`undefined` \| `string`	-
`clj`	`undefined` \| `string`	-
`clj-selector`	`undefined` \| `string`	-
`cljc`	`undefined` \| `string`	-
`cljc-selector`	`undefined` \| `string`	-
`cljs`	`undefined` \| `string`	-
`cljs-selector`	`undefined` \| `string`	-
`clojure`	`undefined` \| `string`	-
`clojure-selector`	`undefined` \| `string`	-
`clojurescript`	`undefined` \| `string`	-
`clojurescript-selector`	`undefined` \| `string`	-
`closeBrackets?`	`boolean`	Use auto-complete to close brackets and quotes. `Default` `ts true`
`coffee`	`undefined` \| `string`	-
`coffee-selector`	`undefined` \| `string`	-
`coffeescript`	`undefined` \| `string`	-
`coffeescript-selector`	`undefined` \| `string`	-
`common-lisp`	`undefined` \| `string`	-
`common-lisp-selector`	`undefined` \| `string`	-
`commonlisp`	`undefined` \| `string`	-
`commonlisp-selector`	`undefined` \| `string`	-
`compiled`	`undefined` \| `""` \| `"none"` \| `"closed"` \| `"open"` \| `"full"` \| `"true"`	-
`config?`	`string` \| `Partial`<`Config`> & `string`	A configuration object or a URL to a JSON file representing a configuration object to load. If supplied and is not an object or a valid URL, an error is thrown. `Default` `ts {}`
`console`	`undefined` \| `""` \| `"none"` \| `"closed"` \| `"open"` \| `"full"` \| `"true"`	-
`cp`	`undefined` \| `string`	-
`cp-selector`	`undefined` \| `string`	-
`cpp`	`undefined` \| `string`	-
`cpp-selector`	`undefined` \| `string`	-
`cpp-wasm`	`undefined` \| `string`	-
`cpp-wasm-selector`	`undefined` \| `string`	-
`cppm`	`undefined` \| `string`	-
`cppm-selector`	`undefined` \| `string`	-
`cppwasm`	`undefined` \| `string`	-
`cppwasm-selector`	`undefined` \| `string`	-
`csharp`	`undefined` \| `string`	-
`csharp-selector`	`undefined` \| `string`	-
`css`	`undefined` \| `string`	-
`css-selector`	`undefined` \| `string`	-
`cssPreset?`	`CssPresetId`	CSS Preset to use.
`customSettings?`	{ `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` } ; `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` }	Defines custom settings for the current project.
`customSettings.Binary`	`any`	-
`customSettings.C`	`any`	-
`customSettings.adoc`	`any`	-
`customSettings.art`	`any`	-
`customSettings.art-template`	`any`	-
`customSettings.as`	`any`	-
`customSettings.asc`	`any`	-
`customSettings.asciidoc`	`any`	-
`customSettings.assemblyscript`	`any`	-
`customSettings.astro`	`any`	-
`customSettings.autoprefixer`	`any`	-
`customSettings.babel`	`any`	-
`customSettings.bb`	`any`	-
`customSettings.bbcode`	`any`	-
`customSettings.blockly`	`any`	-
`customSettings.blockly.xml`	`any`	-
`customSettings.c`	`any`	-
`customSettings.c++`	`any`	-
`customSettings.civet`	`any`	-
`customSettings.clang`	`any`	-
`customSettings.clang.cpp`	`any`	-
`customSettings.clio`	`any`	-
`customSettings.clj`	`any`	-
`customSettings.cljc`	`any`	-
`customSettings.cljs`	`any`	-
`customSettings.clojure`	`any`	-
`customSettings.clojurescript`	`any`	-
`customSettings.coffee`	`any`	-
`customSettings.coffeescript`	`any`	-
`customSettings.common-lisp`	`any`	-
`customSettings.commonlisp`	`any`	-
`customSettings.convertCommonjs?`	`boolean`	-
`customSettings.cp`	`any`	-
`customSettings.cpp`	`any`	-
`customSettings.cpp-wasm`	`any`	-
`customSettings.cppm`	`any`	-
`customSettings.cppwasm`	`any`	-
`customSettings.csharp`	`any`	-
`customSettings.css`	`any`	-
`customSettings.cssmodules`	`any`	-
`customSettings.cssnano`	`any`	-
`customSettings.cwasm`	`any`	-
`customSettings.cxx`	`any`	-
`customSettings.defaultCDN?`	`CDN`	-
`customSettings.diagram`	`any`	-
`customSettings.diagrams`	`any`	-
`customSettings.dot`	`any`	-
`customSettings.edn`	`any`	-
`customSettings.ejs`	`any`	-
`customSettings.es`	`any`	-
`customSettings.eta`	`any`	-
`customSettings.fennel`	`any`	-
`customSettings.flow`	`any`	-
`customSettings.fnl`	`any`	-
`customSettings.gleam`	`any`	-
`customSettings.go`	`any`	-
`customSettings.golang`	`any`	-
`customSettings.graph`	`any`	-
`customSettings.h`	`any`	-
`customSettings.haml`	`any`	-
`customSettings.handlebars`	`any`	-
`customSettings.hbs`	`any`	-
`customSettings.hpp`	`any`	-
`customSettings.htm`	`any`	-
`customSettings.html`	`any`	-
`customSettings.ii`	`any`	-
`customSettings.imba`	`any`	-
`customSettings.imports?`	`Record`<`string`, `string`>	-
`customSettings.ixx`	`any`	-
`customSettings.jade`	`any`	-
`customSettings.javascript`	`any`	-
`customSettings.jl`	`any`	-
`customSettings.js`	`any`	-
`customSettings.json`	`any`	-
`customSettings.jsx`	`any`	-
`customSettings.julia`	`any`	-
`customSettings.less`	`any`	-
`customSettings.lightningcss`	`any`	-
`customSettings.liquid`	`any`	-
`customSettings.liquidjs`	`any`	-
`customSettings.lisp`	`any`	-
`customSettings.livescript`	`any`	-
`customSettings.ls`	`any`	-
`customSettings.lua`	`any`	-
`customSettings.lua-wasm`	`any`	-
`customSettings.luawasm`	`any`	-
`customSettings.malina`	`any`	-
`customSettings.malinajs`	`any`	-
`customSettings.mapImports?`	`boolean`	-
`customSettings.markdown`	`any`	-
`customSettings.md`	`any`	-
`customSettings.mdown`	`any`	-
`customSettings.mdx`	`any`	-
`customSettings.mjml`	`any`	-
`customSettings.mkdn`	`any`	-
`customSettings.ml`	`any`	-
`customSettings.mli`	`any`	-
`customSettings.mustache`	`any`	-
`customSettings.njk`	`any`	-
`customSettings.nunjucks`	`any`	-
`customSettings.ocaml`	`any`	-
`customSettings.perl`	`any`	-
`customSettings.pg`	`any`	-
`customSettings.pg.sql`	`any`	-
`customSettings.pglite`	`any`	-
`customSettings.pglite.sql`	`any`	-
`customSettings.pgsql`	`any`	-
`customSettings.pgsql.sql`	`any`	-
`customSettings.php`	`any`	-
`customSettings.php-wasm`	`any`	-
`customSettings.phpwasm`	`any`	-
`customSettings.pintora`	`any`	-
`customSettings.pl`	`any`	-
`customSettings.plt`	`any`	-
`customSettings.pm`	`any`	-
`customSettings.postcss`	`any`	-
`customSettings.postcssImportUrl`	`any`	-
`customSettings.postcssPresetEnv`	`any`	-
`customSettings.postgre.sql`	`any`	-
`customSettings.postgres`	`any`	-
`customSettings.postgresql`	`any`	-
`customSettings.postgresql.sql`	`any`	-
`customSettings.prolog`	`any`	-
`customSettings.prolog.pl`	`any`	-
`customSettings.pug`	`any`	-
`customSettings.purgecss`	`any`	-
`customSettings.py`	`any`	-
`customSettings.py-wasm`	`any`	-
`customSettings.py3`	`any`	-
`customSettings.pyodide`	`any`	-
`customSettings.python`	`any`	-
`customSettings.python-wasm`	`any`	-
`customSettings.pythonwasm`	`any`	-
`customSettings.pywasm`	`any`	-
`customSettings.r`	`any`	-
`customSettings.r-wasm`	`any`	-
`customSettings.rb`	`any`	-
`customSettings.re`	`any`	-
`customSettings.react-native`	`any`	-
`customSettings.react-native-tsx`	`any`	-
`customSettings.react-native.jsx`	`any`	-
`customSettings.react-native.tsx`	`any`	-
`customSettings.reason`	`any`	-
`customSettings.rei`	`any`	-
`customSettings.res`	`any`	-
`customSettings.rescript`	`any`	-
`customSettings.resi`	`any`	-
`customSettings.rich`	`any`	-
`customSettings.richtext`	`any`	-
`customSettings.riot`	`any`	-
`customSettings.riotjs`	`any`	-
`customSettings.rlang`	`any`	-
`customSettings.rstats`	`any`	-
`customSettings.rte`	`any`	-
`customSettings.rte.html`	`any`	-
`customSettings.ruby`	`any`	-
`customSettings.ruby-wasm`	`any`	-
`customSettings.rubywasm`	`any`	-
`customSettings.sass`	`any`	-
`customSettings.scheme`	`any`	-
`customSettings.scm`	`any`	-
`customSettings.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"`	-
`customSettings.scss`	`any`	-
`customSettings.solid`	`any`	-
`customSettings.solid.jsx`	`any`	-
`customSettings.solid.tsx`	`any`	-
`customSettings.sql`	`any`	-
`customSettings.sqlite`	`any`	-
`customSettings.sqlite3`	`any`	-
`customSettings.stencil`	`any`	-
`customSettings.stencil.tsx`	`any`	-
`customSettings.styl`	`any`	-
`customSettings.stylis`	`any`	-
`customSettings.stylus`	`any`	-
`customSettings.sucrase`	`any`	-
`customSettings.svelte`	`any`	-
`customSettings.tailwindcss`	`any`	-
`customSettings.tcl`	`any`	-
`customSettings.teal`	`any`	-
`customSettings.template?`	{ `data?`: `any` ; `prerender?`: `boolean` }	-
`customSettings.template.data?`	`any`	-
`customSettings.template.prerender?`	`boolean`	-
`customSettings.tl`	`any`	-
`customSettings.tokencss`	`any`	-
`customSettings.ts`	`any`	-
`customSettings.tsx`	`any`	-
`customSettings.twig`	`any`	-
`customSettings.types?`	`Types`	-
`customSettings.typescript`	`any`	-
`customSettings.unocss`	`any`	-
`customSettings.vento`	`any`	-
`customSettings.vto`	`any`	-
`customSettings.vue`	`any`	-
`customSettings.vue2`	`any`	-
`customSettings.vue3`	`any`	-
`customSettings.wasm`	`any`	-
`customSettings.wasm.cpp`	`any`	-
`customSettings.wasm.lua`	`any`	-
`customSettings.wasm.php`	`any`	-
`customSettings.wasm.py`	`any`	-
`customSettings.wasm.rb`	`any`	-
`customSettings.wast`	`any`	-
`customSettings.wat`	`any`	-
`customSettings.webassembly`	`any`	-
`customSettings.windicss`	`any`	-
`customSettings.xht`	`any`	-
`customSettings.xml`	`any`	-
`cwasm`	`undefined` \| `string`	-
`cwasm-selector`	`undefined` \| `string`	-
`cxx`	`undefined` \| `string`	-
`cxx-selector`	`undefined` \| `string`	-
`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` `ts 1500`
`description?`	`string`	Project description. Used in project search and result page description meta tag. `Default` `ts ""`
`diagram`	`undefined` \| `string`	-
`diagram-selector`	`undefined` \| `string`	-
`diagrams`	`undefined` \| `string`	-
`diagrams-selector`	`undefined` \| `string`	-
`disableAI?`	`boolean`	-
`dot`	`undefined` \| `string`	-
`dot-selector`	`undefined` \| `string`	-
`editor?`	`"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` `ts undefined`
`editorMode?`	`"vim"` \| `"emacs"`	Sets editor mode.
`editorTheme?`	`string` \| `EditorTheme`[]	Sets the code editor themes. See docs for editor themes for details. `Example` `ts "vs"` `Example` `ts "monaco:twilight, codemirror:one-dark"` `Example` `ts ["vs@light"]` `Example` `ts ["vs@light", "vs-dark@dark"]` `Example` `ts ["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]`
`edn`	`undefined` \| `string`	-
`edn-selector`	`undefined` \| `string`	-
`ejs`	`undefined` \| `string`	-
`ejs-selector`	`undefined` \| `string`	-
`embed?`	`boolean`	-
`emmet?`	`boolean`	Enables Emmet. `Default` `ts true`
`enableAI?`	`boolean`	If `true`, AI code assistant is enabled. `Default` `ts false`
`es`	`undefined` \| `string`	-
`es-selector`	`undefined` \| `string`	-
`eta`	`undefined` \| `string`	-
`eta-selector`	`undefined` \| `string`	-
`fennel`	`undefined` \| `string`	-
`fennel-selector`	`undefined` \| `string`	-
`files?`	`string`	-
`flow`	`undefined` \| `string`	-
`flow-selector`	`undefined` \| `string`	-
`fnl`	`undefined` \| `string`	-
`fnl-selector`	`undefined` \| `string`	-
`fontFamily?`	`string`	Sets the code editor font family.
`fontSize?`	`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` `ts undefined`
`formatOnsave?`	`boolean`	If `true`, the code is automatically formatted on saving the project. `Default` `ts false`
`gleam`	`undefined` \| `string`	-
`gleam-selector`	`undefined` \| `string`	-
`go`	`undefined` \| `string`	-
`go-selector`	`undefined` \| `string`	-
`golang`	`undefined` \| `string`	-
`golang-selector`	`undefined` \| `string`	-
`graph`	`undefined` \| `string`	-
`graph-selector`	`undefined` \| `string`	-
`h`	`undefined` \| `string`	-
`h-selector`	`undefined` \| `string`	-
`haml`	`undefined` \| `string`	-
`haml-selector`	`undefined` \| `string`	-
`handlebars`	`undefined` \| `string`	-
`handlebars-selector`	`undefined` \| `string`	-
`hbs`	`undefined` \| `string`	-
`hbs-selector`	`undefined` \| `string`	-
`head?`	`string`	Content added to the result page `<head>` element. `Default` `ts '<meta charset="UTF-8" />\n<meta name="viewport" content="width=device-width, initial-scale=1.0" />'`
`hpp`	`undefined` \| `string`	-
`hpp-selector`	`undefined` \| `string`	-
`htm`	`undefined` \| `string`	-
`htm-selector`	`undefined` \| `string`	-
`html`	`undefined` \| `string`	-
`html-selector`	`undefined` \| `string`	-
`htmlAttrs?`	`string` \| `Record`<`string`, `string`>	Attributes added to the result page `<html>` element. It can be an object or a string. `Example` `ts { lang: "en", class: "dark" } 'lang="en" class="dark"'`
`ii`	`undefined` \| `string`	-
`ii-selector`	`undefined` \| `string`	-
`imba`	`undefined` \| `string`	-
`imba-selector`	`undefined` \| `string`	-
`import?`	`string`	A resource to import (from any of the supported sources).
`imports?`	{ `[key: string]`: `string`; }	Allows specifying custom import maps for module imports. Example Setting `imports` like this: `js "imports": { "moment": "https://cdn.jsdelivr.net/npm/[email protected]/dist/moment.js" }` results in the following import map: `html <script type="importmap"> { "imports": { "moment": "https://cdn.jsdelivr.net/npm/[email protected]/dist/moment.js" } } </script>` See docs for Imports and Custom Module Resolution
`ixx`	`undefined` \| `string`	-
`ixx-selector`	`undefined` \| `string`	-
`jade`	`undefined` \| `string`	-
`jade-selector`	`undefined` \| `string`	-
`javascript`	`undefined` \| `string`	-
`javascript-selector`	`undefined` \| `string`	-
`jl`	`undefined` \| `string`	-
`jl-selector`	`undefined` \| `string`	-
`js`	`undefined` \| `string`	-
`js-selector`	`undefined` \| `string`	-
`json`	`undefined` \| `string`	-
`json-selector`	`undefined` \| `string`	-
`jsx`	`undefined` \| `string`	-
`jsx-selector`	`undefined` \| `string`	-
`julia`	`undefined` \| `string`	-
`julia-selector`	`undefined` \| `string`	-
`lang?`	`Language`	-
`language?`	`Language`	-
`languages?`	`string`	-
`layout?`	`"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` `ts "responsive"`
`less`	`undefined` \| `string`	-
`less-selector`	`undefined` \| `string`	-
`lineNumbers?`	`boolean`	Show line numbers in code editor. `Default` `ts true`
`liquid`	`undefined` \| `string`	-
`liquid-selector`	`undefined` \| `string`	-
`liquidjs`	`undefined` \| `string`	-
`liquidjs-selector`	`undefined` \| `string`	-
`lisp`	`undefined` \| `string`	-
`lisp-selector`	`undefined` \| `string`	-
`lite?`	`boolean`	If `true`, the playground is loaded in lite mode.
`livescript`	`undefined` \| `string`	-
`livescript-selector`	`undefined` \| `string`	-
`loading?`	`"click"` \| `"eager"` \| `"lazy"`	Sets how the playground loads: - `"eager"`: The playground loads immediately. - `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport. - `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown. `Default` `ts "lazy"`
`ls`	`undefined` \| `string`	-
`ls-selector`	`undefined` \| `string`	-
`lua`	`undefined` \| `string`	-
`lua-selector`	`undefined` \| `string`	-
`lua-wasm`	`undefined` \| `string`	-
`lua-wasm-selector`	`undefined` \| `string`	-
`luawasm`	`undefined` \| `string`	-
`luawasm-selector`	`undefined` \| `string`	-
`malina`	`undefined` \| `string`	-
`malina-selector`	`undefined` \| `string`	-
`malinajs`	`undefined` \| `string`	-
`malinajs-selector`	`undefined` \| `string`	-
`markdown`	`undefined` \| `string`	-
`markdown-selector`	`undefined` \| `string`	-
`markup?`	{ `content?`: `string` ; `contentUrl?`: `string` ; `hiddenContent?`: `string` ; `hiddenContentUrl?`: `string` ; `language`: `Language` ; `position?`: `EditorPosition` ; `selector?`: `string` ; `title?`: `string` }	An object that configures the language and content of the markup editor. See docs for details. `Default` `ts { language: "html", content: "" }`
`markup.content?`	`string`	The initial content of the code editor. `Default` `ts ""`
`markup.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.
`markup.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)
`markup.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.
`markup.language`	`Language`	A language name, extension or alias (as defined in language documentations). For the list of supported values, see Language
`markup.position?`	`EditorPosition`	The initial position of the cursor in the code editor. `Example` `ts {lineNumber: 5, column: 10}`
`markup.selector?`	`string`	A CSS selector to load content from DOM import.
`markup.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)"`).
`md`	`undefined` \| `string`	-
`md-selector`	`undefined` \| `string`	-
`mdown`	`undefined` \| `string`	-
`mdown-selector`	`undefined` \| `string`	-
`mdx`	`undefined` \| `string`	-
`mdx-selector`	`undefined` \| `string`	-
`mjml`	`undefined` \| `string`	-
`mjml-selector`	`undefined` \| `string`	-
`mkdn`	`undefined` \| `string`	-
`mkdn-selector`	`undefined` \| `string`	-
`ml`	`undefined` \| `string`	-
`ml-selector`	`undefined` \| `string`	-
`mli`	`undefined` \| `string`	-
`mli-selector`	`undefined` \| `string`	-
`mode?`	`"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"simple"` \| `"codeblock"`	Sets the display mode. `Default` `ts "full"`
`mustache`	`undefined` \| `string`	-
`mustache-selector`	`undefined` \| `string`	-
`new?`	`""`	-
`njk`	`undefined` \| `string`	-
`njk-selector`	`undefined` \| `string`	-
`no-defaults?`	`boolean`	-
`nunjucks`	`undefined` \| `string`	-
`nunjucks-selector`	`undefined` \| `string`	-
`ocaml`	`undefined` \| `string`	-
`ocaml-selector`	`undefined` \| `string`	-
`params?`	{ appUrl?: string \| undefined; params?: ... \| undefined; config?: string \| (Partial<Config> & string) \| undefined; import?: string \| undefined; lite?: boolean \| undefined; ... 440 more ...; compiled?: "" \| ... 5 more ... \| undefined; } \| undefined	An object that represents the URL Query parameters, that can be used to configure the playground. These 2 snippets produce similar output: `js import { createPlayground } from 'livecodes'; // use config createPlayground('#container', { config: { markup: { language: 'markdown', content: '# Hello World!', }, }, }); // use params createPlayground('#container', { params: { md: '# Hello World!' } });`
`perl`	`undefined` \| `string`	-
`perl-selector`	`undefined` \| `string`	-
`pg`	`undefined` \| `string`	-
`pg-selector`	`undefined` \| `string`	-
`pg.sql`	`undefined` \| `string`	-
`pg.sql-selector`	`undefined` \| `string`	-
`pglite`	`undefined` \| `string`	-
`pglite-selector`	`undefined` \| `string`	-
`pglite.sql`	`undefined` \| `string`	-
`pglite.sql-selector`	`undefined` \| `string`	-
`pgsql`	`undefined` \| `string`	-
`pgsql-selector`	`undefined` \| `string`	-
`pgsql.sql`	`undefined` \| `string`	-
`pgsql.sql-selector`	`undefined` \| `string`	-
`php`	`undefined` \| `string`	-
`php-selector`	`undefined` \| `string`	-
`php-wasm`	`undefined` \| `string`	-
`php-wasm-selector`	`undefined` \| `string`	-
`phpwasm`	`undefined` \| `string`	-
`phpwasm-selector`	`undefined` \| `string`	-
`pintora`	`undefined` \| `string`	-
`pintora-selector`	`undefined` \| `string`	-
`pl`	`undefined` \| `string`	-
`pl-selector`	`undefined` \| `string`	-
`plt`	`undefined` \| `string`	-
`plt-selector`	`undefined` \| `string`	-
`pm`	`undefined` \| `string`	-
`pm-selector`	`undefined` \| `string`	-
`postcss`	`undefined` \| `string`	-
`postcss-selector`	`undefined` \| `string`	-
`postgre.sql`	`undefined` \| `string`	-
`postgre.sql-selector`	`undefined` \| `string`	-
`postgres`	`undefined` \| `string`	-
`postgres-selector`	`undefined` \| `string`	-
`postgresql`	`undefined` \| `string`	-
`postgresql-selector`	`undefined` \| `string`	-
`postgresql.sql`	`undefined` \| `string`	-
`postgresql.sql-selector`	`undefined` \| `string`	-
`preview?`	`boolean`	-
`processors?`	`string`	-
`prolog`	`undefined` \| `string`	-
`prolog-selector`	`undefined` \| `string`	-
`prolog.pl`	`undefined` \| `string`	-
`prolog.pl-selector`	`undefined` \| `string`	-
`pug`	`undefined` \| `string`	-
`pug-selector`	`undefined` \| `string`	-
`py`	`undefined` \| `string`	-
`py-selector`	`undefined` \| `string`	-
`py-wasm`	`undefined` \| `string`	-
`py-wasm-selector`	`undefined` \| `string`	-
`py3`	`undefined` \| `string`	-
`py3-selector`	`undefined` \| `string`	-
`pyodide`	`undefined` \| `string`	-
`pyodide-selector`	`undefined` \| `string`	-
`python`	`undefined` \| `string`	-
`python-selector`	`undefined` \| `string`	-
`python-wasm`	`undefined` \| `string`	-
`python-wasm-selector`	`undefined` \| `string`	-
`pythonwasm`	`undefined` \| `string`	-
`pythonwasm-selector`	`undefined` \| `string`	-
`pywasm`	`undefined` \| `string`	-
`pywasm-selector`	`undefined` \| `string`	-
`r`	`undefined` \| `string`	-
`r-selector`	`undefined` \| `string`	-
`r-wasm`	`undefined` \| `string`	-
`r-wasm-selector`	`undefined` \| `string`	-
`raw?`	`Language`	-
`rb`	`undefined` \| `string`	-
`rb-selector`	`undefined` \| `string`	-
`re`	`undefined` \| `string`	-
`re-selector`	`undefined` \| `string`	-
`react-native`	`undefined` \| `string`	-
`react-native-selector`	`undefined` \| `string`	-
`react-native-tsx`	`undefined` \| `string`	-
`react-native-tsx-selector`	`undefined` \| `string`	-
`react-native.jsx`	`undefined` \| `string`	-
`react-native.jsx-selector`	`undefined` \| `string`	-
`react-native.tsx`	`undefined` \| `string`	-
`react-native.tsx-selector`	`undefined` \| `string`	-
`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` `ts false`
`reason`	`undefined` \| `string`	-
`reason-selector`	`undefined` \| `string`	-
`recoverUnsaved?`	`boolean`	Enables recovering last unsaved project when the app is reopened. `Default` `ts true`
`rei`	`undefined` \| `string`	-
`rei-selector`	`undefined` \| `string`	-
`res`	`undefined` \| `string`	-
`res-selector`	`undefined` \| `string`	-
`rescript`	`undefined` \| `string`	-
`rescript-selector`	`undefined` \| `string`	-
`resi`	`undefined` \| `string`	-
`resi-selector`	`undefined` \| `string`	-
`rich`	`undefined` \| `string`	-
`rich-selector`	`undefined` \| `string`	-
`richtext`	`undefined` \| `string`	-
`richtext-selector`	`undefined` \| `string`	-
`riot`	`undefined` \| `string`	-
`riot-selector`	`undefined` \| `string`	-
`riotjs`	`undefined` \| `string`	-
`riotjs-selector`	`undefined` \| `string`	-
`rlang`	`undefined` \| `string`	-
`rlang-selector`	`undefined` \| `string`	-
`rstats`	`undefined` \| `string`	-
`rstats-selector`	`undefined` \| `string`	-
`rte`	`undefined` \| `string`	-
`rte-selector`	`undefined` \| `string`	-
`rte.html`	`undefined` \| `string`	-
`rte.html-selector`	`undefined` \| `string`	-
`ruby`	`undefined` \| `string`	-
`ruby-selector`	`undefined` \| `string`	-
`ruby-wasm`	`undefined` \| `string`	-
`ruby-wasm-selector`	`undefined` \| `string`	-
`rubywasm`	`undefined` \| `string`	-
`rubywasm-selector`	`undefined` \| `string`	-
`sass`	`undefined` \| `string`	-
`sass-selector`	`undefined` \| `string`	-
`scheme`	`undefined` \| `string`	-
`scheme-selector`	`undefined` \| `string`	-
`scm`	`undefined` \| `string`	-
`scm-selector`	`undefined` \| `string`	-
`screen?`	`"new"` \| `"open"` \| `"embed"` \| `"sync"` \| `"about"` \| `"welcome"` \| `"add-snippet"` \| `"login"` \| `"info"` \| `"assets"` \| `"add-asset"` \| `"snippets"` \| `"import"` \| `"resources"` \| `"share"` \| `"deploy"` \| `"backup"` \| `"broadcast"` \| `"custom-settings"` \| `"editor-settings"` \| `"test-editor"`	-
`script?`	{ `content?`: `string` ; `contentUrl?`: `string` ; `hiddenContent?`: `string` ; `hiddenContentUrl?`: `string` ; `language`: `Language` ; `position?`: `EditorPosition` ; `selector?`: `string` ; `title?`: `string` }	An object that configures the language and content of the script editor. See docs for details. `Default` `ts { language: "javascript", content: "" }`
`script.content?`	`string`	The initial content of the code editor. `Default` `ts ""`
`script.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.
`script.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)
`script.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.
`script.language`	`Language`	A language name, extension or alias (as defined in language documentations). For the list of supported values, see Language
`script.position?`	`EditorPosition`	The initial position of the cursor in the code editor. `Example` `ts {lineNumber: 5, column: 10}`
`script.selector?`	`string`	A CSS selector to load content from DOM import.
`script.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)"`).
`scripts?`	`string`	-
`scrollPosition?`	`boolean`	-
`scss`	`undefined` \| `string`	-
`scss-selector`	`undefined` \| `string`	-
`semicolons?`	`boolean`	Configures Prettier code formatter to use semi-colons. `Default` `ts true`
`showSpacing?`	`boolean`	Enables showing element spacing in the result page. `Default` `ts false`
`singleQuote?`	`boolean`	Configures Prettier code formatter to use single quotes instead of double quotes. `Default` `ts false`
`solid`	`undefined` \| `string`	-
`solid-selector`	`undefined` \| `string`	-
`solid.jsx`	`undefined` \| `string`	-
`solid.jsx-selector`	`undefined` \| `string`	-
`solid.tsx`	`undefined` \| `string`	-
`solid.tsx-selector`	`undefined` \| `string`	-
`sql`	`undefined` \| `string`	-
`sql-selector`	`undefined` \| `string`	-
`sqlite`	`undefined` \| `string`	-
`sqlite-selector`	`undefined` \| `string`	-
`sqlite3`	`undefined` \| `string`	-
`sqlite3-selector`	`undefined` \| `string`	-
`stencil`	`undefined` \| `string`	-
`stencil-selector`	`undefined` \| `string`	-
`stencil.tsx`	`undefined` \| `string`	-
`stencil.tsx-selector`	`undefined` \| `string`	-
`styl`	`undefined` \| `string`	-
`styl-selector`	`undefined` \| `string`	-
`style?`	{ `content?`: `string` ; `contentUrl?`: `string` ; `hiddenContent?`: `string` ; `hiddenContentUrl?`: `string` ; `language`: `Language` ; `position?`: `EditorPosition` ; `selector?`: `string` ; `title?`: `string` }	An object that configures the language and content of the style editor. See docs for details. `Default` `ts { language: "css", content: "" }`
`style.content?`	`string`	The initial content of the code editor. `Default` `ts ""`
`style.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.
`style.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)
`style.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.
`style.language`	`Language`	A language name, extension or alias (as defined in language documentations). For the list of supported values, see Language
`style.position?`	`EditorPosition`	The initial position of the cursor in the code editor. `Example` `ts {lineNumber: 5, column: 10}`
`style.selector?`	`string`	A CSS selector to load content from DOM import.
`style.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)"`).
`stylesheets?`	`string`	-
`stylis`	`undefined` \| `string`	-
`stylis-selector`	`undefined` \| `string`	-
`stylus`	`undefined` \| `string`	-
`stylus-selector`	`undefined` \| `string`	-
`sucrase`	`undefined` \| `string`	-
`sucrase-selector`	`undefined` \| `string`	-
`svelte`	`undefined` \| `string`	-
`svelte-selector`	`undefined` \| `string`	-
`tabSize?`	`number`	The number of spaces per indentation-level. Also used in code formatting. `Default` `ts 2`
`tags?`	`string` \| `string`[]	-
`tcl`	`undefined` \| `string`	-
`tcl-selector`	`undefined` \| `string`	-
`teal`	`undefined` \| `string`	-
`teal-selector`	`undefined` \| `string`	-
`template?`	`TemplateName`	A starter template to load. Allowed valued can be found here.
`tests?`	({ language?: Language \| undefined; title?: string \| undefined; content?: string \| undefined; contentUrl?: string \| undefined; hiddenContent?: string \| undefined; hiddenContentUrl?: string \| undefined; selector?: string \| undefined; position?: EditorPosition \| undefined; } \| undefined) & ("" \| ... 4 more ... \| "true")	Configures the language and content of tests.
`theme?`	`Theme`	Sets the app theme to light/dark mode. `Default` `ts "dark"`
`title?`	`string`	Project title. This is used as result page title and title meta tag. Also used in project search. `Default` `ts "Untitled Project"`
`tl`	`undefined` \| `string`	-
`tl-selector`	`undefined` \| `string`	-
`tools?`	`"none"` \| `"closed"` \| `"open"` \| `"full"` \| `"console"` \| `"compiled"` \| `"tests"` \| `"console\\|undefined"` \| `"console\\|"` \| `"console\\|none"` \| `"console\\|closed"` \| `"console\\|open"` \| `"console\\|full"` \| `"compiled\\|undefined"` \| `"compiled\\|"` \| `"compiled\\|none"` \| `"compiled\\|closed"` \| `"compiled\\|open"` \| `"compiled\\|full"` \| `"tests\\|undefined"` \| `"tests\\|"` \| `"tests\\|none"` \| `"tests\\|closed"` \| `"tests\\|open"` \| `"tests\\|full"` \| `"console,console\\|undefined"` \| `"console,console\\|"` \| `"console,console\\|none"` \| `"console,console\\|closed"` \| `"console,console\\|open"` \| `"console,console\\|full"` \| `"console,compiled\\|undefined"` \| `"console,compiled\\|"` \| `"console,compiled\\|none"` \| `"console,compiled\\|closed"` \| `"console,compiled\\|open"` \| `"console,compiled\\|full"` \| `"console,tests\\|undefined"` \| `"console,tests\\|"` \| `"console,tests\\|none"` \| `"console,tests\\|closed"` \| `"console,tests\\|open"` \| `"console,tests\\|full"` \| `"compiled,console\\|undefined"` \| `"compiled,console\\|"` \| `"compiled,console\\|none"` \| `"compiled,console\\|closed"` \| `"compiled,console\\|open"` \| `"compiled,console\\|full"` \| `"compiled,compiled\\|undefined"` \| `"compiled,compiled\\|"` \| `"compiled,compiled\\|none"` \| `"compiled,compiled\\|closed"` \| `"compiled,compiled\\|open"` \| `"compiled,compiled\\|full"` \| `"compiled,tests\\|undefined"` \| `"compiled,tests\\|"` \| `"compiled,tests\\|none"` \| `"compiled,tests\\|closed"` \| `"compiled,tests\\|open"` \| `"compiled,tests\\|full"` \| `"tests,console\\|undefined"` \| `"tests,console\\|"` \| `"tests,console\\|none"` \| `"tests,console\\|closed"` \| `"tests,console\\|open"` \| `"tests,console\\|full"` \| `"tests,compiled\\|undefined"` \| `"tests,compiled\\|"` \| `"tests,compiled\\|none"` \| `"tests,compiled\\|closed"` \| `"tests,compiled\\|open"` \| `"tests,compiled\\|full"` \| `"tests,tests\\|undefined"` \| `"tests,tests\\|"` \| `"tests,tests\\|none"` \| `"tests,tests\\|closed"` \| `"tests,tests\\|open"` \| `"tests,tests\\|full"` \| `"console,console,console\\|undefined"` \| `"console,console,console\\|"` \| `"console,console,console\\|none"` \| `"console,console,console\\|closed"` \| `"console,console,console\\|open"` \| `"console,console,console\\|full"` \| `"console,console,compiled\\|undefined"` \| `"console,console,compiled\\|"` \| `"console,console,compiled\\|none"` \| `"console,console,compiled\\|closed"` \| `"console,console,compiled\\|open"` \| `"console,console,compiled\\|full"` \| `"console,console,tests\\|undefined"` \| `"console,console,tests\\|"` \| `"console,console,tests\\|none"` \| `"console,console,tests\\|closed"` \| `"console,console,tests\\|open"` \| `"console,console,tests\\|full"` \| `"console,compiled,console\\|undefined"` \| `"console,compiled,console\\|"` \| `"console,compiled,console\\|none"` \| `"console,compiled,console\\|closed"` \| `"console,compiled,console\\|open"` \| `"console,compiled,console\\|full"` \| `"console,compiled,compiled\\|undefined"` \| `"console,compiled,compiled\\|"` \| `"console,compiled,compiled\\|none"` \| `"console,compiled,compiled\\|closed"` \| `"console,compiled,compiled\\|open"` \| `"console,compiled,compiled\\|full"` \| `"console,compiled,tests\\|undefined"` \| `"console,compiled,tests\\|"` \| `"console,compiled,tests\\|none"` \| `"console,compiled,tests\\|closed"` \| `"console,compiled,tests\\|open"` \| `"console,compiled,tests\\|full"` \| `"console,tests,console\\|undefined"` \| `"console,tests,console\\|"` \| `"console,tests,console\\|none"` \| `"console,tests,console\\|closed"` \| `"console,tests,console\\|open"` \| `"console,tests,console\\|full"` \| `"console,tests,compiled\\|undefined"` \| `"console,tests,compiled\\|"` \| `"console,tests,compiled\\|none"` \| `"console,tests,compiled\\|closed"` \| `"console,tests,compiled\\|open"` \| `"console,tests,compiled\\|full"` \| `"console,tests,tests\\|undefined"` \| `"console,tests,tests\\|"` \| `"console,tests,tests\\|none"` \| `"console,tests,tests\\|closed"` \| `"console,tests,tests\\|open"` \| `"console,tests,tests\\|full"` \| `"compiled,console,console\\|undefined"` \| `"compiled,console,console\\|"` \| `"compiled,console,console\\|none"` \| `"compiled,console,console\\|closed"` \| `"compiled,console,console\\|open"` \| `"compiled,console,console\\|full"` \| `"compiled,console,compiled\\|undefined"` \| `"compiled,console,compiled\\|"` \| `"compiled,console,compiled\\|none"` \| `"compiled,console,compiled\\|closed"` \| `"compiled,console,compiled\\|open"` \| `"compiled,console,compiled\\|full"` \| `"compiled,console,tests\\|undefined"` \| `"compiled,console,tests\\|"` \| `"compiled,console,tests\\|none"` \| `"compiled,console,tests\\|closed"` \| `"compiled,console,tests\\|open"` \| `"compiled,console,tests\\|full"` \| `"compiled,compiled,console\\|undefined"` \| `"compiled,compiled,console\\|"` \| `"compiled,compiled,console\\|none"` \| `"compiled,compiled,console\\|closed"` \| `"compiled,compiled,console\\|open"` \| `"compiled,compiled,console\\|full"` \| `"compiled,compiled,compiled\\|undefined"` \| `"compiled,compiled,compiled\\|"` \| `"compiled,compiled,compiled\\|none"` \| `"compiled,compiled,compiled\\|closed"` \| `"compiled,compiled,compiled\\|open"` \| `"compiled,compiled,compiled\\|full"` \| `"compiled,compiled,tests\\|undefined"` \| `"compiled,compiled,tests\\|"` \| `"compiled,compiled,tests\\|none"` \| `"compiled,compiled,tests\\|closed"` \| `"compiled,compiled,tests\\|open"` \| `"compiled,compiled,tests\\|full"` \| `"compiled,tests,console\\|undefined"` \| `"compiled,tests,console\\|"` \| `"compiled,tests,console\\|none"` \| `"compiled,tests,console\\|closed"` \| `"compiled,tests,console\\|open"` \| `"compiled,tests,console\\|full"` \| `"compiled,tests,compiled\\|undefined"` \| `"compiled,tests,compiled\\|"` \| `"compiled,tests,compiled\\|none"` \| `"compiled,tests,compiled\\|closed"` \| `"compiled,tests,compiled\\|open"` \| `"compiled,tests,compiled\\|full"` \| `"compiled,tests,tests\\|undefined"` \| `"compiled,tests,tests\\|"` \| `"compiled,tests,tests\\|none"` \| `"compiled,tests,tests\\|closed"` \| `"compiled,tests,tests\\|open"` \| `"compiled,tests,tests\\|full"` \| `"tests,console,console\\|undefined"` \| `"tests,console,console\\|"` \| `"tests,console,console\\|none"` \| `"tests,console,console\\|closed"` \| `"tests,console,console\\|open"` \| `"tests,console,console\\|full"` \| `"tests,console,compiled\\|undefined"` \| `"tests,console,compiled\\|"` \| `"tests,console,compiled\\|none"` \| `"tests,console,compiled\\|closed"` \| `"tests,console,compiled\\|open"` \| `"tests,console,compiled\\|full"` \| `"tests,console,tests\\|undefined"` \| `"tests,console,tests\\|"` \| `"tests,console,tests\\|none"` \| `"tests,console,tests\\|closed"` \| `"tests,console,tests\\|open"` \| `"tests,console,tests\\|full"` \| `"tests,compiled,console\\|undefined"` \| `"tests,compiled,console\\|"` \| `"tests,compiled,console\\|none"` \| `"tests,compiled,console\\|closed"` \| `"tests,compiled,console\\|open"` \| `"tests,compiled,console\\|full"` \| `"tests,compiled,compiled\\|undefined"` \| `"tests,compiled,compiled\\|"` \| `"tests,compiled,compiled\\|none"` \| `"tests,compiled,compiled\\|closed"` \| `"tests,compiled,compiled\\|open"` \| `"tests,compiled,compiled\\|full"` \| `"tests,compiled,tests\\|undefined"` \| `"tests,compiled,tests\\|"` \| `"tests,compiled,tests\\|none"` \| `"tests,compiled,tests\\|closed"` \| `"tests,compiled,tests\\|open"` \| `"tests,compiled,tests\\|full"` \| `"tests,tests,console\\|undefined"` \| `"tests,tests,console\\|"` \| `"tests,tests,console\\|none"` \| `"tests,tests,console\\|closed"` \| `"tests,tests,console\\|open"` \| `"tests,tests,console\\|full"` \| `"tests,tests,compiled\\|undefined"` \| `"tests,tests,compiled\\|"` \| `"tests,tests,compiled\\|none"` \| `"tests,tests,compiled\\|closed"` \| `"tests,tests,compiled\\|open"` \| `"tests,tests,compiled\\|full"` \| `"tests,tests,tests\\|undefined"` \| `"tests,tests,tests\\|"` \| `"tests,tests,tests\\|none"` \| `"tests,tests,tests\\|closed"` \| `"tests,tests,tests\\|open"` \| `"tests,tests,tests\\|full"`	-
`trailingComma?`	`boolean`	Configures Prettier code formatter to use trailing commas. `Default` `ts true`
`ts`	`undefined` \| `string`	-
`ts-selector`	`undefined` \| `string`	-
`tsx`	`undefined` \| `string`	-
`tsx-selector`	`undefined` \| `string`	-
`twig`	`undefined` \| `string`	-
`twig-selector`	`undefined` \| `string`	-
`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. See docs for Types and Custom Types `Example` `js { "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 } }`
`typescript`	`undefined` \| `string`	-
`typescript-selector`	`undefined` \| `string`	-
`useTabs?`	`boolean`	If `true`, lines are indented with tabs instead of spaces. Also used in code formatting. `Default` `ts false`
`vento`	`undefined` \| `string`	-
`vento-selector`	`undefined` \| `string`	-
`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.
`view?`	`"split"` \| `"result"` \| `"editor"` \| `"headless"`	The default view for the playground. When set to `"headless"`, the playground is loaded in headless mode.
`vto`	`undefined` \| `string`	-
`vto-selector`	`undefined` \| `string`	-
`vue`	`undefined` \| `string`	-
`vue-selector`	`undefined` \| `string`	-
`vue2`	`undefined` \| `string`	-
`vue2-selector`	`undefined` \| `string`	-
`vue3`	`undefined` \| `string`	-
`vue3-selector`	`undefined` \| `string`	-
`wasm`	`undefined` \| `string`	-
`wasm-selector`	`undefined` \| `string`	-
`wasm.cpp`	`undefined` \| `string`	-
`wasm.cpp-selector`	`undefined` \| `string`	-
`wasm.lua`	`undefined` \| `string`	-
`wasm.lua-selector`	`undefined` \| `string`	-
`wasm.php`	`undefined` \| `string`	-
`wasm.php-selector`	`undefined` \| `string`	-
`wasm.py`	`undefined` \| `string`	-
`wasm.py-selector`	`undefined` \| `string`	-
`wasm.rb`	`undefined` \| `string`	-
`wasm.rb-selector`	`undefined` \| `string`	-
`wast`	`undefined` \| `string`	-
`wast-selector`	`undefined` \| `string`	-
`wat`	`undefined` \| `string`	-
`wat-selector`	`undefined` \| `string`	-
`webassembly`	`undefined` \| `string`	-
`webassembly-selector`	`undefined` \| `string`	-
`welcome?`	`boolean`	If `true`, the welcome screen is displayed when the app loads.
`wordWrap?`	`boolean`	Enables word-wrap for long lines. `Default` `ts false`
`x?`	`string`	-
`xht`	`undefined` \| `string`	-
`xht-selector`	`undefined` \| `string`	-
`xml`	`undefined` \| `string`	-
`xml-selector`	`undefined` \| `string`	-
`zoom?`	`1` \| `0.5` \| `0.25`	Sets result page zoom level.

Defined in

models.ts:338

template

• Optional template: TemplateName

A starter template to load. Allowed valued can be found here.

Defined in

models.ts:373

view

• Optional view: "split" | "result" | "editor" | "headless"

The default view for the playground.

When set to "headless", the playground is loaded in headless mode.

Defined in

models.ts:380

Properties​

appUrl​

Defined in​

config​

Defined in​

import​

Defined in​

lite​

Defined in​

loading​

Defined in​

params​

Type declaration​

Defined in​

template​

Defined in​

view​

Defined in​

Properties

appUrl

Defined in

config

Defined in

import

Defined in

lite

Defined in

loading

Defined in

params

Type declaration

Defined in

template

Defined in

view

Defined in