# Interface: EmbedOptions

An object that represents the playground embed options.

See [docs](https://livecodes.io/docs/sdk/js-ts/#embed-options) for details.

## Properties

### appUrl?

> `optional` **appUrl**: `string`

Allows loading the playground from a custom URL
(e.g. a [self-hosted app](https://livecodes.io/docs/features/self-hosting) or a [permanent URL](https://livecodes.io/docs/features/permanent-url)).

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

#### Default

```ts
'https://livecodes.io'
```

#### Defined in

[models.ts:314](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L314)

***

### config?

> `optional` **config**: `string` \| `Partial`\<[`Config`](Config.md)\>

A [configuration object](https://livecodes.io/docs/configuration/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
{}
```

#### Defined in

[models.ts:346](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L346)

***

### headless?

> `optional` **headless**: `boolean`

If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless).

#### Default

```ts
false
```

#### Defined in

[models.ts:352](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L352)

***

### import?

> `optional` **import**: `string`

A resource to [import](https://livecodes.io/docs/features/import) (from any of the supported [sources](https://livecodes.io/docs/features/import#sources)).

#### Defined in

[models.ts:357](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L357)

***

### ~~lite?~~

> `optional` **lite**: `boolean`

#### Deprecated

Use `{ config: { mode: "lite" } }` instead

If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite).

#### Default

```ts
false
```

#### Defined in

[models.ts:367](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L367)

***

### 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

```ts
"lazy"
```

#### Defined in

[models.ts:377](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L377)

***

### params?

> `optional` **params**: `object`

An object that represents the [URL Query parameters](https://livecodes.io/docs/configuration/query-params), 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!' } });
```

#### active?

> `optional` **active**: `0` \| `2` \| `1` \| [`EditorId`](../internal/type-aliases/EditorId.md)

#### activeEditor?

> `optional` **activeEditor**: `0` \| `2` \| `1` \| [`EditorId`](../internal/type-aliases/EditorId.md)

#### adoc

> **adoc**: `undefined` \| `string`

#### adoc-selector

> **adoc-selector**: `undefined` \| `string`

#### allowLangChange?

> `optional` **allowLangChange**: `boolean`

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

##### Default

```ts
true
```

#### app.svelte

> **svelte**: `undefined` \| `string`

#### app.svelte-selector

> **svelte-selector**: `undefined` \| `string`

#### app.vue

> **vue**: `undefined` \| `string`

#### app.vue-selector

> **vue-selector**: `undefined` \| `string`

#### appLanguage?

> `optional` **appLanguage**: [`AppLanguage`](../internal/type-aliases/AppLanguage.md)

Sets the app UI language used.

#### appUrl?

> `optional` **appUrl**: `string`

Allows loading the playground from a custom URL
(e.g. a [self-hosted app](https://livecodes.io/docs/features/self-hosting) or a [permanent URL](https://livecodes.io/docs/features/permanent-url)).

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

##### Default

```ts
'https://livecodes.io'
```

#### art

> **art**: `undefined` \| `string`

#### art-selector

> **art-selector**: `undefined` \| `string`

#### art-template

> **art-template**: `undefined` \| `string`

#### art-template-selector

> **art-template-selector**: `undefined` \| `string`

#### as

> **as**: `undefined` \| `string`

#### as-selector

> **as-selector**: `undefined` \| `string`

#### asc

> **asc**: `undefined` \| `string`

#### asc-selector

> **asc-selector**: `undefined` \| `string`

#### asciidoc

> **asciidoc**: `undefined` \| `string`

#### asciidoc-selector

> **asciidoc-selector**: `undefined` \| `string`

#### assemblyscript

> **assemblyscript**: `undefined` \| `string`

#### assemblyscript-selector

> **assemblyscript-selector**: `undefined` \| `string`

#### astro

> **astro**: `undefined` \| `string`

#### astro-selector

> **astro-selector**: `undefined` \| `string`

#### autosave?

> `optional` **autosave**: `boolean`

If `true`, the project is automatically saved on code change,
after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay).

##### Default

```ts
false
```

#### autotest?

> `optional` **autotest**: `boolean`

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

##### Default

```ts
false
```

#### autoupdate?

> `optional` **autoupdate**: `boolean`

If `true`, the result page is automatically updated on code change,
after time [delay](https://livecodes.io/docs/configuration/configuration-object#delay).

##### Default

```ts
true
```

#### babel

> **babel**: `undefined` \| `string`

#### babel-selector

> **babel-selector**: `undefined` \| `string`

#### bb

> **bb**: `undefined` \| `string`

#### bb-selector

> **bb-selector**: `undefined` \| `string`

#### bbcode

> **bbcode**: `undefined` \| `string`

#### bbcode-selector

> **bbcode-selector**: `undefined` \| `string`

#### Binary

> **Binary**: `undefined` \| `string`

#### Binary-selector

> **Binary-selector**: `undefined` \| `string`

#### blockly

> **blockly**: `undefined` \| `string`

#### blockly-selector

> **blockly-selector**: `undefined` \| `string`

#### blockly.xml

> **xml**: `undefined` \| `string`

#### blockly.xml-selector

> **xml-selector**: `undefined` \| `string`

#### c

> **c**: `undefined` \| `string`

#### C

> **C**: `undefined` \| `string`

#### c-selector

> **c-selector**: `undefined` \| `string`

#### C-selector

> **C-selector**: `undefined` \| `string`

#### c++

> **c++**: `undefined` \| `string`

#### c++-selector

> **c++-selector**: `undefined` \| `string`

#### civet

> **civet**: `undefined` \| `string`

#### civet-selector

> **civet-selector**: `undefined` \| `string`

#### clang

> **clang**: `undefined` \| `string`

#### clang-selector

> **clang-selector**: `undefined` \| `string`

#### clang.cpp

> **cpp**: `undefined` \| `string`

#### clang.cpp-selector

> **cpp-selector**: `undefined` \| `string`

#### clio

> **clio**: `undefined` \| `string`

#### clio-selector

> **clio-selector**: `undefined` \| `string`

#### clj

> **clj**: `undefined` \| `string`

#### clj-selector

> **clj-selector**: `undefined` \| `string`

#### cljc

> **cljc**: `undefined` \| `string`

#### cljc-selector

> **cljc-selector**: `undefined` \| `string`

#### cljs

> **cljs**: `undefined` \| `string`

#### cljs-selector

> **cljs-selector**: `undefined` \| `string`

#### clojure

> **clojure**: `undefined` \| `string`

#### clojure-selector

> **clojure-selector**: `undefined` \| `string`

#### clojurescript

> **clojurescript**: `undefined` \| `string`

#### clojurescript-selector

> **clojurescript-selector**: `undefined` \| `string`

#### closeBrackets?

> `optional` **closeBrackets**: `boolean`

Use auto-complete to close brackets and quotes.

##### Default

```ts
true
```

#### coffee

> **coffee**: `undefined` \| `string`

#### coffee-selector

> **coffee-selector**: `undefined` \| `string`

#### coffeescript

> **coffeescript**: `undefined` \| `string`

#### coffeescript-selector

> **coffeescript-selector**: `undefined` \| `string`

#### common-lisp

> **common-lisp**: `undefined` \| `string`

#### common-lisp-selector

> **common-lisp-selector**: `undefined` \| `string`

#### commonlisp

> **commonlisp**: `undefined` \| `string`

#### commonlisp-selector

> **commonlisp-selector**: `undefined` \| `string`

#### compiled

> **compiled**: `undefined` \| `""` \| `"true"` \| `"none"` \| `"closed"` \| `"open"` \| `"full"`

#### config?

> `optional` **config**: `string` \| `Partial`\<[`Config`](Config.md)\> & `string`

A [configuration object](https://livecodes.io/docs/configuration/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

> **console**: `undefined` \| `""` \| `"true"` \| `"none"` \| `"closed"` \| `"open"` \| `"full"`

#### cp

> **cp**: `undefined` \| `string`

#### cp-selector

> **cp-selector**: `undefined` \| `string`

#### cpp

> **cpp**: `undefined` \| `string`

#### cpp-selector

> **cpp-selector**: `undefined` \| `string`

#### cpp-wasm

> **cpp-wasm**: `undefined` \| `string`

#### cpp-wasm-selector

> **cpp-wasm-selector**: `undefined` \| `string`

#### cppm

> **cppm**: `undefined` \| `string`

#### cppm-selector

> **cppm-selector**: `undefined` \| `string`

#### cppwasm

> **cppwasm**: `undefined` \| `string`

#### cppwasm-selector

> **cppwasm-selector**: `undefined` \| `string`

#### cs

> **cs**: `undefined` \| `string`

#### cs-selector

> **cs-selector**: `undefined` \| `string`

#### cs-wasm

> **cs-wasm**: `undefined` \| `string`

#### cs-wasm-selector

> **cs-wasm-selector**: `undefined` \| `string`

#### csharp

> **csharp**: `undefined` \| `string`

#### csharp-selector

> **csharp-selector**: `undefined` \| `string`

#### csharp-wasm

> **csharp-wasm**: `undefined` \| `string`

#### csharp-wasm-selector

> **csharp-wasm-selector**: `undefined` \| `string`

#### css

> **css**: `undefined` \| `string`

#### css-selector

> **css-selector**: `undefined` \| `string`

#### cssPreset?

> `optional` **cssPreset**: [`CssPresetId`](../internal/type-aliases/CssPresetId.md)

[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use.

#### customSettings?

> `optional` **customSettings**: `object`

Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project.

#### customSettings.adoc

> **adoc**: `any`

#### customSettings.app.svelte

> **svelte**: `any`

#### customSettings.app.vue

> **vue**: `any`

#### customSettings.art

> **art**: `any`

#### customSettings.art-template

> **art-template**: `any`

#### customSettings.as

> **as**: `any`

#### customSettings.asc

> **asc**: `any`

#### customSettings.asciidoc

> **asciidoc**: `any`

#### customSettings.assemblyscript

> **assemblyscript**: `any`

#### customSettings.astro

> **astro**: `any`

#### customSettings.autoprefixer

> **autoprefixer**: `any`

#### customSettings.babel

> **babel**: `any`

#### customSettings.bb

> **bb**: `any`

#### customSettings.bbcode

> **bbcode**: `any`

#### customSettings.Binary

> **Binary**: `any`

#### customSettings.blockly

> **blockly**: `any`

#### customSettings.blockly.xml

> **xml**: `any`

#### customSettings.c

> **c**: `any`

#### customSettings.C

> **C**: `any`

#### customSettings.c++

> **c++**: `any`

#### customSettings.civet

> **civet**: `any`

#### customSettings.clang

> **clang**: `any`

#### customSettings.clang.cpp

> **cpp**: `any`

#### customSettings.clio

> **clio**: `any`

#### customSettings.clj

> **clj**: `any`

#### customSettings.cljc

> **cljc**: `any`

#### customSettings.cljs

> **cljs**: `any`

#### customSettings.clojure

> **clojure**: `any`

#### customSettings.clojurescript

> **clojurescript**: `any`

#### customSettings.coffee

> **coffee**: `any`

#### customSettings.coffeescript

> **coffeescript**: `any`

#### customSettings.common-lisp

> **common-lisp**: `any`

#### customSettings.commonlisp

> **commonlisp**: `any`

#### customSettings.convertCommonjs?

> `optional` **convertCommonjs**: `boolean`

#### customSettings.cp

> **cp**: `any`

#### customSettings.cpp

> **cpp**: `any`

#### customSettings.cpp-wasm

> **cpp-wasm**: `any`

#### customSettings.cppm

> **cppm**: `any`

#### customSettings.cppwasm

> **cppwasm**: `any`

#### customSettings.cs

> **cs**: `any`

#### customSettings.cs-wasm

> **cs-wasm**: `any`

#### customSettings.csharp

> **csharp**: `any`

#### customSettings.csharp-wasm

> **csharp-wasm**: `any`

#### customSettings.css

> **css**: `any`

#### customSettings.cssmodules

> **cssmodules**: `any`

#### customSettings.cssnano

> **cssnano**: `any`

#### customSettings.cwasm

> **cwasm**: `any`

#### customSettings.cxx

> **cxx**: `any`

#### customSettings.defaultCDN?

> `optional` **defaultCDN**: [`CDN`](../internal/type-aliases/CDN.md)

#### customSettings.diagram

> **diagram**: `any`

#### customSettings.diagrams

> **diagrams**: `any`

#### customSettings.dot

> **dot**: `any`

#### customSettings.edn

> **edn**: `any`

#### customSettings.ejs

> **ejs**: `any`

#### customSettings.es

> **es**: `any`

#### customSettings.eta

> **eta**: `any`

#### customSettings.fennel

> **fennel**: `any`

#### customSettings.flow

> **flow**: `any`

#### customSettings.fnl

> **fnl**: `any`

#### customSettings.gleam

> **gleam**: `any`

#### customSettings.go

> **go**: `any`

#### customSettings.golang

> **golang**: `any`

#### customSettings.graph

> **graph**: `any`

#### customSettings.h

> **h**: `any`

#### customSettings.haml

> **haml**: `any`

#### customSettings.handlebars

> **handlebars**: `any`

#### customSettings.hbs

> **hbs**: `any`

#### customSettings.hpp

> **hpp**: `any`

#### customSettings.htm

> **htm**: `any`

#### customSettings.html

> **html**: `any`

#### customSettings.ii

> **ii**: `any`

#### customSettings.imba

> **imba**: `any`

#### customSettings.imports?

> `optional` **imports**: `Record`\<`string`, `string`\>

#### customSettings.ixx

> **ixx**: `any`

#### customSettings.jade

> **jade**: `any`

#### customSettings.java

> **java**: `any`

#### customSettings.javascript

> **javascript**: `any`

#### customSettings.jinja

> **jinja**: `any`

#### customSettings.jl

> **jl**: `any`

#### customSettings.js

> **js**: `any`

#### customSettings.json

> **json**: `any`

#### customSettings.jsx

> **jsx**: `any`

#### customSettings.julia

> **julia**: `any`

#### customSettings.less

> **less**: `any`

#### customSettings.lightningcss

> **lightningcss**: `any`

#### customSettings.liquid

> **liquid**: `any`

#### customSettings.liquidjs

> **liquidjs**: `any`

#### customSettings.lisp

> **lisp**: `any`

#### customSettings.livescript

> **livescript**: `any`

#### customSettings.ls

> **ls**: `any`

#### customSettings.lua

> **lua**: `any`

#### customSettings.lua-wasm

> **lua-wasm**: `any`

#### customSettings.luawasm

> **luawasm**: `any`

#### customSettings.malina

> **malina**: `any`

#### customSettings.malinajs

> **malinajs**: `any`

#### customSettings.mapImports?

> `optional` **mapImports**: `boolean`

#### customSettings.markdown

> **markdown**: `any`

#### customSettings.md

> **md**: `any`

#### customSettings.mdown

> **mdown**: `any`

#### customSettings.html.md)

> **mdx**: `any`

#### customSettings.mjml

> **mjml**: `any`

#### customSettings.mkdn

> **mkdn**: `any`

#### customSettings.ml

> **ml**: `any`

#### customSettings.mli

> **mli**: `any`

#### customSettings.mustache

> **mustache**: `any`

#### customSettings.njk

> **njk**: `any`

#### customSettings.nunjucks

> **nunjucks**: `any`

#### customSettings.ocaml

> **ocaml**: `any`

#### customSettings.perl

> **perl**: `any`

#### customSettings.pg

> **pg**: `any`

#### customSettings.pg.sql

> **sql**: `any`

#### customSettings.pglite

> **pglite**: `any`

#### customSettings.pglite.sql

> **sql**: `any`

#### customSettings.pgsql

> **pgsql**: `any`

#### customSettings.pgsql.sql

> **sql**: `any`

#### customSettings.php

> **php**: `any`

#### customSettings.php-wasm

> **php-wasm**: `any`

#### customSettings.phpwasm

> **phpwasm**: `any`

#### customSettings.pintora

> **pintora**: `any`

#### customSettings.pl

> **pl**: `any`

#### customSettings.plt

> **plt**: `any`

#### customSettings.pm

> **pm**: `any`

#### customSettings.postcss

> **postcss**: `any`

#### customSettings.postcssImportUrl

> **postcssImportUrl**: `any`

#### customSettings.postcssPresetEnv

> **postcssPresetEnv**: `any`

#### customSettings.postgre.sql

> **sql**: `any`

#### customSettings.postgres

> **postgres**: `any`

#### customSettings.postgresql

> **postgresql**: `any`

#### customSettings.postgresql.sql

> **sql**: `any`

#### customSettings.prolog

> **prolog**: `any`

#### customSettings.prolog.pl

> **pl**: `any`

#### customSettings.pug

> **pug**: `any`

#### customSettings.purgecss

> **purgecss**: `any`

#### customSettings.py

> **py**: `any`

#### customSettings.py-wasm

> **py-wasm**: `any`

#### customSettings.py3

> **py3**: `any`

#### customSettings.pyodide

> **pyodide**: `any`

#### customSettings.python

> **python**: `any`

#### customSettings.python-wasm

> **python-wasm**: `any`

#### customSettings.pythonwasm

> **pythonwasm**: `any`

#### customSettings.pywasm

> **pywasm**: `any`

#### customSettings.r

> **r**: `any`

#### customSettings.r-wasm

> **r-wasm**: `any`

#### customSettings.rb

> **rb**: `any`

#### customSettings.re

> **re**: `any`

#### customSettings.react

> **react**: `any`

#### customSettings.react-jsx

> **react-jsx**: `any`

#### customSettings.react-native

> **react-native**: `any`

#### customSettings.react-native-tsx

> **react-native-tsx**: `any`

#### customSettings.react-native.jsx

> **jsx**: `any`

#### customSettings.react-native.tsx

> **tsx**: `any`

#### customSettings.react-tsx

> **react-tsx**: `any`

#### customSettings.react.jsx

> **jsx**: `any`

#### customSettings.react.tsx

> **tsx**: `any`

#### customSettings.reason

> **reason**: `any`

#### customSettings.rei

> **rei**: `any`

#### customSettings.res

> **res**: `any`

#### customSettings.rescript

> **rescript**: `any`

#### customSettings.resi

> **resi**: `any`

#### customSettings.rich

> **rich**: `any`

#### customSettings.richtext

> **richtext**: `any`

#### customSettings.riot

> **riot**: `any`

#### customSettings.riotjs

> **riotjs**: `any`

#### customSettings.rlang

> **rlang**: `any`

#### customSettings.rstats

> **rstats**: `any`

#### customSettings.rte

> **rte**: `any`

#### customSettings.rte.html

> **html**: `any`

#### customSettings.ruby

> **ruby**: `any`

#### customSettings.ruby-wasm

> **ruby-wasm**: `any`

#### customSettings.rubywasm

> **rubywasm**: `any`

#### customSettings.sass

> **sass**: `any`

#### customSettings.scheme

> **scheme**: `any`

#### customSettings.scm

> **scm**: `any`

#### customSettings.scriptType?

> `optional` **scriptType**: `""` \| `"module"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"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

> **scss**: `any`

#### customSettings.solid

> **solid**: `any`

#### customSettings.solid.jsx

> **jsx**: `any`

#### customSettings.solid.tsx

> **tsx**: `any`

#### customSettings.sql

> **sql**: `any`

#### customSettings.sqlite

> **sqlite**: `any`

#### customSettings.sqlite3

> **sqlite3**: `any`

#### customSettings.stencil

> **stencil**: `any`

#### customSettings.stencil.tsx

> **tsx**: `any`

#### customSettings.styl

> **styl**: `any`

#### customSettings.stylis

> **stylis**: `any`

#### customSettings.stylus

> **stylus**: `any`

#### customSettings.sucrase

> **sucrase**: `any`

#### customSettings.svelte

> **svelte**: `any`

#### customSettings.svelte-app

> **svelte-app**: `any`

#### customSettings.tailwindcss

> **tailwindcss**: `any`

#### customSettings.tcl

> **tcl**: `any`

#### customSettings.teal

> **teal**: `any`

#### customSettings.template?

> `optional` **template**: `object`

#### customSettings.template.data?

> `optional` **data**: `any`

#### customSettings.template.prerender?

> `optional` **prerender**: `boolean`

#### customSettings.tl

> **tl**: `any`

#### customSettings.tokencss

> **tokencss**: `any`

#### customSettings.ts

> **ts**: `any`

#### customSettings.tsx

> **tsx**: `any`

#### customSettings.twig

> **twig**: `any`

#### customSettings.types?

> `optional` **types**: [`Types`](../internal/interfaces/Types.md)

#### customSettings.typescript

> **typescript**: `any`

#### customSettings.unocss

> **unocss**: `any`

#### customSettings.vento

> **vento**: `any`

#### customSettings.vto

> **vto**: `any`

#### customSettings.vue

> **vue**: `any`

#### customSettings.vue-app

> **vue-app**: `any`

#### customSettings.vue2

> **vue2**: `any`

#### customSettings.vue3

> **vue3**: `any`

#### customSettings.wasm

> **wasm**: `any`

#### customSettings.wasm.cpp

> **cpp**: `any`

#### customSettings.wasm.cs

> **cs**: `any`

#### customSettings.wasm.lua

> **lua**: `any`

#### customSettings.wasm.php

> **php**: `any`

#### customSettings.wasm.py

> **py**: `any`

#### customSettings.wasm.rb

> **rb**: `any`

#### customSettings.wast

> **wast**: `any`

#### customSettings.wat

> **wat**: `any`

#### customSettings.webassembly

> **webassembly**: `any`

#### customSettings.windicss

> **windicss**: `any`

#### customSettings.xht

> **xht**: `any`

#### customSettings.xml

> **xml**: `any`

#### cwasm

> **cwasm**: `undefined` \| `string`

#### cwasm-selector

> **cwasm-selector**: `undefined` \| `string`

#### cxx

> **cxx**: `undefined` \| `string`

#### cxx-selector

> **cxx-selector**: `undefined` \| `string`

#### delay?

> `optional` **delay**: `number`

Time delay (in milliseconds) following code change,
after which the result page is updated (if [`autoupdate`](https://livecodes.io/docs/configuration/configuration-object#autoupdate) is `true`)
and/or the project is saved (if [`autosave`](https://livecodes.io/docs/configuration/configuration-object#autosave) is `true`).

##### Default

```ts
1500
```

#### description?

> `optional` **description**: `string`

Project description. Used in [project](https://livecodes.io/docs/features/projects) search
and [result page](https://livecodes.io/docs/features/result) description meta tag.

##### Default

```ts
""
```

#### diagram

> **diagram**: `undefined` \| `string`

#### diagram-selector

> **diagram-selector**: `undefined` \| `string`

#### diagrams

> **diagrams**: `undefined` \| `string`

#### diagrams-selector

> **diagrams-selector**: `undefined` \| `string`

#### disableAI?

> `optional` **disableAI**: `boolean`

#### dot

> **dot**: `undefined` \| `string`

#### dot-selector

> **dot-selector**: `undefined` \| `string`

#### editor?

> `optional` **editor**: `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"`

Selects the [code editor](https://livecodes.io/docs/features/editor-settings#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

```ts
undefined
```

#### editorMode?

> `optional` **editorMode**: `"vim"` \| `"emacs"`

Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes).

#### editorTheme?

> `optional` **editorTheme**: `string` \| [`EditorTheme`](../internal/type-aliases/EditorTheme.md)[]

Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes.

See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details.

##### Examples

```ts
"vs"
```

```ts
"monaco:twilight, codemirror:one-dark"
```

```ts
["vs@light"]
```

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

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

#### edn

> **edn**: `undefined` \| `string`

#### edn-selector

> **edn-selector**: `undefined` \| `string`

#### ejs

> **ejs**: `undefined` \| `string`

#### ejs-selector

> **ejs-selector**: `undefined` \| `string`

#### embed?

> `optional` **embed**: `boolean`

#### emmet?

> `optional` **emmet**: `boolean`

Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet).

##### Default

```ts
true
```

#### enableAI?

> `optional` **enableAI**: `boolean`

If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled.

##### Default

```ts
false
```

#### es

> **es**: `undefined` \| `string`

#### es-selector

> **es-selector**: `undefined` \| `string`

#### eta

> **eta**: `undefined` \| `string`

#### eta-selector

> **eta-selector**: `undefined` \| `string`

#### fennel

> **fennel**: `undefined` \| `string`

#### fennel-selector

> **fennel-selector**: `undefined` \| `string`

#### files?

> `optional` **files**: `string`

#### flow

> **flow**: `undefined` \| `string`

#### flow-selector

> **flow-selector**: `undefined` \| `string`

#### fnl

> **fnl**: `undefined` \| `string`

#### fnl-selector

> **fnl-selector**: `undefined` \| `string`

#### foldRegions?

> `optional` **foldRegions**: `boolean`

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

##### Default

```ts
false
```

#### fontFamily?

> `optional` **fontFamily**: `string`

Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family.

#### fontSize?

> `optional` **fontSize**: `number`

Sets the font size.

If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds).

##### Default

```ts
undefined
```

#### formatOnsave?

> `optional` **formatOnsave**: `boolean`

If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project.

##### Default

```ts
false
```

#### gleam

> **gleam**: `undefined` \| `string`

#### gleam-selector

> **gleam-selector**: `undefined` \| `string`

#### go

> **go**: `undefined` \| `string`

#### go-selector

> **go-selector**: `undefined` \| `string`

#### golang

> **golang**: `undefined` \| `string`

#### golang-selector

> **golang-selector**: `undefined` \| `string`

#### graph

> **graph**: `undefined` \| `string`

#### graph-selector

> **graph-selector**: `undefined` \| `string`

#### h

> **h**: `undefined` \| `string`

#### h-selector

> **h-selector**: `undefined` \| `string`

#### haml

> **haml**: `undefined` \| `string`

#### haml-selector

> **haml-selector**: `undefined` \| `string`

#### handlebars

> **handlebars**: `undefined` \| `string`

#### handlebars-selector

> **handlebars-selector**: `undefined` \| `string`

#### hbs

> **hbs**: `undefined` \| `string`

#### hbs-selector

> **hbs-selector**: `undefined` \| `string`

#### head?

> `optional` **head**: `string`

Content added to the [result page](https://livecodes.io/docs/features/result) `<head>` element.

##### Default

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

#### headless?

> `optional` **headless**: `boolean`

If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless).

##### Default

```ts
false
```

#### hpp

> **hpp**: `undefined` \| `string`

#### hpp-selector

> **hpp-selector**: `undefined` \| `string`

#### htm

> **htm**: `undefined` \| `string`

#### htm-selector

> **htm-selector**: `undefined` \| `string`

#### html

> **html**: `undefined` \| `string`

#### html-selector

> **html-selector**: `undefined` \| `string`

#### htmlAttrs?

> `optional` **htmlAttrs**: `string` \| `Record`\<`string`, `string`\>

Attributes added to the [result page](https://livecodes.io/docs/features/result) `<html>` element.
It can be an object or a string.

##### Example

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

#### ii

> **ii**: `undefined` \| `string`

#### ii-selector

> **ii-selector**: `undefined` \| `string`

#### imba

> **imba**: `undefined` \| `string`

#### imba-selector

> **imba-selector**: `undefined` \| `string`

#### import?

> `optional` **import**: `string`

A resource to [import](https://livecodes.io/docs/features/import) (from any of the supported [sources](https://livecodes.io/docs/features/import#sources)).

#### imports?

> `optional` **imports**: `object`

Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution).

**Example**

Setting `imports` like this:
```js
"imports": {
  "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
}
```
results in the following import map:
```html
<script type="importmap">
  {
    "imports": {
      "moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
    }
  }
</script>
```
See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports)
and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution)

##### Index Signature

 \[`key`: `string`\]: `string`

#### ixx

> **ixx**: `undefined` \| `string`

#### ixx-selector

> **ixx-selector**: `undefined` \| `string`

#### jade

> **jade**: `undefined` \| `string`

#### jade-selector

> **jade-selector**: `undefined` \| `string`

#### java

> **java**: `undefined` \| `string`

#### java-selector

> **java-selector**: `undefined` \| `string`

#### javascript

> **javascript**: `undefined` \| `string`

#### javascript-selector

> **javascript-selector**: `undefined` \| `string`

#### jinja

> **jinja**: `undefined` \| `string`

#### jinja-selector

> **jinja-selector**: `undefined` \| `string`

#### jl

> **jl**: `undefined` \| `string`

#### jl-selector

> **jl-selector**: `undefined` \| `string`

#### js

> **js**: `undefined` \| `string`

#### js-selector

> **js-selector**: `undefined` \| `string`

#### json

> **json**: `undefined` \| `string`

#### json-selector

> **json-selector**: `undefined` \| `string`

#### jsx

> **jsx**: `undefined` \| `string`

#### jsx-selector

> **jsx-selector**: `undefined` \| `string`

#### julia

> **julia**: `undefined` \| `string`

#### julia-selector

> **julia-selector**: `undefined` \| `string`

#### lang?

> `optional` **lang**: [`Language`](../type-aliases/Language.md)

#### language?

> `optional` **language**: [`Language`](../type-aliases/Language.md)

#### languages?

> `optional` **languages**: `string`

#### layout?

> `optional` **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

> **less**: `undefined` \| `string`

#### less-selector

> **less-selector**: `undefined` \| `string`

#### lineNumbers?

> `optional` **lineNumbers**: `boolean` \| `"relative"`

Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings).

##### Default

```ts
true
```

#### liquid

> **liquid**: `undefined` \| `string`

#### liquid-selector

> **liquid-selector**: `undefined` \| `string`

#### liquidjs

> **liquidjs**: `undefined` \| `string`

#### liquidjs-selector

> **liquidjs-selector**: `undefined` \| `string`

#### lisp

> **lisp**: `undefined` \| `string`

#### lisp-selector

> **lisp-selector**: `undefined` \| `string`

#### ~~lite?~~

> `optional` **lite**: `boolean`

##### Deprecated

Use `{ config: { mode: "lite" } }` instead

If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite).

##### Default

```ts
false
```

#### livescript

> **livescript**: `undefined` \| `string`

#### livescript-selector

> **livescript-selector**: `undefined` \| `string`

#### 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

```ts
"lazy"
```

#### ls

> **ls**: `undefined` \| `string`

#### ls-selector

> **ls-selector**: `undefined` \| `string`

#### lua

> **lua**: `undefined` \| `string`

#### lua-selector

> **lua-selector**: `undefined` \| `string`

#### lua-wasm

> **lua-wasm**: `undefined` \| `string`

#### lua-wasm-selector

> **lua-wasm-selector**: `undefined` \| `string`

#### luawasm

> **luawasm**: `undefined` \| `string`

#### luawasm-selector

> **luawasm-selector**: `undefined` \| `string`

#### malina

> **malina**: `undefined` \| `string`

#### malina-selector

> **malina-selector**: `undefined` \| `string`

#### malinajs

> **malinajs**: `undefined` \| `string`

#### malinajs-selector

> **malinajs-selector**: `undefined` \| `string`

#### markdown

> **markdown**: `undefined` \| `string`

#### markdown-selector

> **markdown-selector**: `undefined` \| `string`

#### markup?

> `optional` **markup**: `object`

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

See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.

##### Default

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

#### markup.content?

> `optional` **content**: `string`

The initial content of the code editor.

##### Default

```ts
""
```

#### markup.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.

#### markup.foldedLines?

> `optional` **foldedLines**: `object`[]

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```

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

#### markup.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.

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

#### markup.language

> **language**: [`Language`](../type-aliases/Language.md)

A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).

For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)

#### markup.order?

> `optional` **order**: `number`

The order of the editor in the UI.

##### Default

```ts
0
```

#### markup.position?

> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)

The initial position of the cursor in the code editor.

##### Example

```ts
{lineNumber: 5, column: 10}
```

#### markup.selector?

> `optional` **selector**: `string`

A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).

#### markup.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)"`).

#### md

> **md**: `undefined` \| `string`

#### md-selector

> **md-selector**: `undefined` \| `string`

#### mdown

> **mdown**: `undefined` \| `string`

#### mdown-selector

> **mdown-selector**: `undefined` \| `string`

#### mdx

> **mdx**: `undefined` \| `string`

#### mdx-selector

> **mdx-selector**: `undefined` \| `string`

#### mjml

> **mjml**: `undefined` \| `string`

#### mjml-selector

> **mjml-selector**: `undefined` \| `string`

#### mkdn

> **mkdn**: `undefined` \| `string`

#### mkdn-selector

> **mkdn-selector**: `undefined` \| `string`

#### ml

> **ml**: `undefined` \| `string`

#### ml-selector

> **ml-selector**: `undefined` \| `string`

#### mli

> **mli**: `undefined` \| `string`

#### mli-selector

> **mli-selector**: `undefined` \| `string`

#### mode?

> `optional` **mode**: `"focus"` \| `"full"` \| `"result"` \| `"editor"` \| `"lite"` \| `"simple"` \| `"codeblock"`

Sets the [display mode](https://livecodes.io/docs/features/display-modes).

##### Default

```ts
"full"
```

#### mustache

> **mustache**: `undefined` \| `string`

#### mustache-selector

> **mustache-selector**: `undefined` \| `string`

#### new?

> `optional` **new**: `""`

#### njk

> **njk**: `undefined` \| `string`

#### njk-selector

> **njk-selector**: `undefined` \| `string`

#### no-defaults?

> `optional` **no-defaults**: `boolean`

#### nunjucks

> **nunjucks**: `undefined` \| `string`

#### nunjucks-selector

> **nunjucks-selector**: `undefined` \| `string`

#### ocaml

> **ocaml**: `undefined` \| `string`

#### ocaml-selector

> **ocaml-selector**: `undefined` \| `string`

#### params?

> `optional` **params**: \{ appUrl?: string \| undefined; params?: ... \| undefined; config?: string \| (Partial\<Config\> & string) \| undefined; headless?: boolean \| undefined; import?: string \| undefined; ... 475 more ...; compiled?: "" \| ... 5 more ... \| undefined; \} \| undefined

An object that represents the [URL Query parameters](https://livecodes.io/docs/configuration/query-params), 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

> **perl**: `undefined` \| `string`

#### perl-selector

> **perl-selector**: `undefined` \| `string`

#### pg

> **pg**: `undefined` \| `string`

#### pg-selector

> **pg-selector**: `undefined` \| `string`

#### pg.sql

> **sql**: `undefined` \| `string`

#### pg.sql-selector

> **sql-selector**: `undefined` \| `string`

#### pglite

> **pglite**: `undefined` \| `string`

#### pglite-selector

> **pglite-selector**: `undefined` \| `string`

#### pglite.sql

> **sql**: `undefined` \| `string`

#### pglite.sql-selector

> **sql-selector**: `undefined` \| `string`

#### pgsql

> **pgsql**: `undefined` \| `string`

#### pgsql-selector

> **pgsql-selector**: `undefined` \| `string`

#### pgsql.sql

> **sql**: `undefined` \| `string`

#### pgsql.sql-selector

> **sql-selector**: `undefined` \| `string`

#### php

> **php**: `undefined` \| `string`

#### php-selector

> **php-selector**: `undefined` \| `string`

#### php-wasm

> **php-wasm**: `undefined` \| `string`

#### php-wasm-selector

> **php-wasm-selector**: `undefined` \| `string`

#### phpwasm

> **phpwasm**: `undefined` \| `string`

#### phpwasm-selector

> **phpwasm-selector**: `undefined` \| `string`

#### pintora

> **pintora**: `undefined` \| `string`

#### pintora-selector

> **pintora-selector**: `undefined` \| `string`

#### pl

> **pl**: `undefined` \| `string`

#### pl-selector

> **pl-selector**: `undefined` \| `string`

#### plt

> **plt**: `undefined` \| `string`

#### plt-selector

> **plt-selector**: `undefined` \| `string`

#### pm

> **pm**: `undefined` \| `string`

#### pm-selector

> **pm-selector**: `undefined` \| `string`

#### postcss

> **postcss**: `undefined` \| `string`

#### postcss-selector

> **postcss-selector**: `undefined` \| `string`

#### postgre.sql

> **sql**: `undefined` \| `string`

#### postgre.sql-selector

> **sql-selector**: `undefined` \| `string`

#### postgres

> **postgres**: `undefined` \| `string`

#### postgres-selector

> **postgres-selector**: `undefined` \| `string`

#### postgresql

> **postgresql**: `undefined` \| `string`

#### postgresql-selector

> **postgresql-selector**: `undefined` \| `string`

#### postgresql.sql

> **sql**: `undefined` \| `string`

#### postgresql.sql-selector

> **sql-selector**: `undefined` \| `string`

#### preview?

> `optional` **preview**: `boolean`

#### processors?

> `optional` **processors**: `string`

#### prolog

> **prolog**: `undefined` \| `string`

#### prolog-selector

> **prolog-selector**: `undefined` \| `string`

#### prolog.pl

> **pl**: `undefined` \| `string`

#### prolog.pl-selector

> **pl-selector**: `undefined` \| `string`

#### pug

> **pug**: `undefined` \| `string`

#### pug-selector

> **pug-selector**: `undefined` \| `string`

#### py

> **py**: `undefined` \| `string`

#### py-selector

> **py-selector**: `undefined` \| `string`

#### py-wasm

> **py-wasm**: `undefined` \| `string`

#### py-wasm-selector

> **py-wasm-selector**: `undefined` \| `string`

#### py3

> **py3**: `undefined` \| `string`

#### py3-selector

> **py3-selector**: `undefined` \| `string`

#### pyodide

> **pyodide**: `undefined` \| `string`

#### pyodide-selector

> **pyodide-selector**: `undefined` \| `string`

#### python

> **python**: `undefined` \| `string`

#### python-selector

> **python-selector**: `undefined` \| `string`

#### python-wasm

> **python-wasm**: `undefined` \| `string`

#### python-wasm-selector

> **python-wasm-selector**: `undefined` \| `string`

#### pythonwasm

> **pythonwasm**: `undefined` \| `string`

#### pythonwasm-selector

> **pythonwasm-selector**: `undefined` \| `string`

#### pywasm

> **pywasm**: `undefined` \| `string`

#### pywasm-selector

> **pywasm-selector**: `undefined` \| `string`

#### r

> **r**: `undefined` \| `string`

#### r-selector

> **r-selector**: `undefined` \| `string`

#### r-wasm

> **r-wasm**: `undefined` \| `string`

#### r-wasm-selector

> **r-wasm-selector**: `undefined` \| `string`

#### raw?

> `optional` **raw**: [`Language`](../type-aliases/Language.md)

#### rb

> **rb**: `undefined` \| `string`

#### rb-selector

> **rb-selector**: `undefined` \| `string`

#### re

> **re**: `undefined` \| `string`

#### re-selector

> **re-selector**: `undefined` \| `string`

#### react

> **react**: `undefined` \| `string`

#### react-jsx

> **react-jsx**: `undefined` \| `string`

#### react-jsx-selector

> **react-jsx-selector**: `undefined` \| `string`

#### react-native

> **react-native**: `undefined` \| `string`

#### react-native-selector

> **react-native-selector**: `undefined` \| `string`

#### react-native-tsx

> **react-native-tsx**: `undefined` \| `string`

#### react-native-tsx-selector

> **react-native-tsx-selector**: `undefined` \| `string`

#### react-native.jsx

> **jsx**: `undefined` \| `string`

#### react-native.jsx-selector

> **jsx-selector**: `undefined` \| `string`

#### react-native.tsx

> **tsx**: `undefined` \| `string`

#### react-native.tsx-selector

> **tsx-selector**: `undefined` \| `string`

#### react-selector

> **react-selector**: `undefined` \| `string`

#### react-tsx

> **react-tsx**: `undefined` \| `string`

#### react-tsx-selector

> **react-tsx-selector**: `undefined` \| `string`

#### react.jsx

> **jsx**: `undefined` \| `string`

#### react.jsx-selector

> **jsx-selector**: `undefined` \| `string`

#### react.tsx

> **tsx**: `undefined` \| `string`

#### react.tsx-selector

> **tsx-selector**: `undefined` \| `string`

#### readonly?

> `optional` **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](https://livecodes.io/docs/features/editor-settings#code-editor) is used.
If you wish to use another editor, set the [editor](https://livecodes.io/docs/configuration/configuration-object#editor) property.

##### Default

```ts
false
```

#### reason

> **reason**: `undefined` \| `string`

#### reason-selector

> **reason-selector**: `undefined` \| `string`

#### recoverUnsaved?

> `optional` **recoverUnsaved**: `boolean`

Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened.

##### Default

```ts
true
```

#### rei

> **rei**: `undefined` \| `string`

#### rei-selector

> **rei-selector**: `undefined` \| `string`

#### res

> **res**: `undefined` \| `string`

#### res-selector

> **res-selector**: `undefined` \| `string`

#### rescript

> **rescript**: `undefined` \| `string`

#### rescript-selector

> **rescript-selector**: `undefined` \| `string`

#### resi

> **resi**: `undefined` \| `string`

#### resi-selector

> **resi-selector**: `undefined` \| `string`

#### rich

> **rich**: `undefined` \| `string`

#### rich-selector

> **rich-selector**: `undefined` \| `string`

#### richtext

> **richtext**: `undefined` \| `string`

#### richtext-selector

> **richtext-selector**: `undefined` \| `string`

#### riot

> **riot**: `undefined` \| `string`

#### riot-selector

> **riot-selector**: `undefined` \| `string`

#### riotjs

> **riotjs**: `undefined` \| `string`

#### riotjs-selector

> **riotjs-selector**: `undefined` \| `string`

#### rlang

> **rlang**: `undefined` \| `string`

#### rlang-selector

> **rlang-selector**: `undefined` \| `string`

#### rstats

> **rstats**: `undefined` \| `string`

#### rstats-selector

> **rstats-selector**: `undefined` \| `string`

#### rte

> **rte**: `undefined` \| `string`

#### rte-selector

> **rte-selector**: `undefined` \| `string`

#### rte.html

> **html**: `undefined` \| `string`

#### rte.html-selector

> **html-selector**: `undefined` \| `string`

#### ruby

> **ruby**: `undefined` \| `string`

#### ruby-selector

> **ruby-selector**: `undefined` \| `string`

#### ruby-wasm

> **ruby-wasm**: `undefined` \| `string`

#### ruby-wasm-selector

> **ruby-wasm-selector**: `undefined` \| `string`

#### rubywasm

> **rubywasm**: `undefined` \| `string`

#### rubywasm-selector

> **rubywasm-selector**: `undefined` \| `string`

#### sass

> **sass**: `undefined` \| `string`

#### sass-selector

> **sass-selector**: `undefined` \| `string`

#### scheme

> **scheme**: `undefined` \| `string`

#### scheme-selector

> **scheme-selector**: `undefined` \| `string`

#### scm

> **scm**: `undefined` \| `string`

#### scm-selector

> **scm-selector**: `undefined` \| `string`

#### screen?

> `optional` **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"` \| `"code-to-image"` \| `"test-editor"` \| `"keyboard-shortcuts"`

#### script?

> `optional` **script**: `object`

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

See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.

##### Default

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

#### script.content?

> `optional` **content**: `string`

The initial content of the code editor.

##### Default

```ts
""
```

#### script.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.

#### script.foldedLines?

> `optional` **foldedLines**: `object`[]

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```

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

#### script.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.

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

#### script.language

> **language**: [`Language`](../type-aliases/Language.md)

A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).

For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)

#### script.order?

> `optional` **order**: `number`

The order of the editor in the UI.

##### Default

```ts
0
```

#### script.position?

> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)

The initial position of the cursor in the code editor.

##### Example

```ts
{lineNumber: 5, column: 10}
```

#### script.selector?

> `optional` **selector**: `string`

A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).

#### script.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)"`).

#### scripts?

> `optional` **scripts**: `string`

#### scrollPosition?

> `optional` **scrollPosition**: `boolean`

#### scss

> **scss**: `undefined` \| `string`

#### scss-selector

> **scss-selector**: `undefined` \| `string`

#### sdkVersion?

> `optional` **sdkVersion**: `string`

#### semicolons?

> `optional` **semicolons**: `boolean`

Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons.

##### Default

```ts
true
```

#### showSpacing?

> `optional` **showSpacing**: `boolean`

Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page.

##### Default

```ts
false
```

#### singleQuote?

> `optional` **singleQuote**: `boolean`

Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes.

##### Default

```ts
false
```

#### solid

> **solid**: `undefined` \| `string`

#### solid-selector

> **solid-selector**: `undefined` \| `string`

#### solid.jsx

> **jsx**: `undefined` \| `string`

#### solid.jsx-selector

> **jsx-selector**: `undefined` \| `string`

#### solid.tsx

> **tsx**: `undefined` \| `string`

#### solid.tsx-selector

> **tsx-selector**: `undefined` \| `string`

#### sql

> **sql**: `undefined` \| `string`

#### sql-selector

> **sql-selector**: `undefined` \| `string`

#### sqlite

> **sqlite**: `undefined` \| `string`

#### sqlite-selector

> **sqlite-selector**: `undefined` \| `string`

#### sqlite3

> **sqlite3**: `undefined` \| `string`

#### sqlite3-selector

> **sqlite3-selector**: `undefined` \| `string`

#### stencil

> **stencil**: `undefined` \| `string`

#### stencil-selector

> **stencil-selector**: `undefined` \| `string`

#### stencil.tsx

> **tsx**: `undefined` \| `string`

#### stencil.tsx-selector

> **tsx-selector**: `undefined` \| `string`

#### styl

> **styl**: `undefined` \| `string`

#### styl-selector

> **styl-selector**: `undefined` \| `string`

#### style?

> `optional` **style**: `object`

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

See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.

##### Default

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

#### style.content?

> `optional` **content**: `string`

The initial content of the code editor.

##### Default

```ts
""
```

#### style.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.

#### style.foldedLines?

> `optional` **foldedLines**: `object`[]

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```

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

#### style.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.

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

#### style.language

> **language**: [`Language`](../type-aliases/Language.md)

A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).

For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)

#### style.order?

> `optional` **order**: `number`

The order of the editor in the UI.

##### Default

```ts
0
```

#### style.position?

> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)

The initial position of the cursor in the code editor.

##### Example

```ts
{lineNumber: 5, column: 10}
```

#### style.selector?

> `optional` **selector**: `string`

A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).

#### style.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)"`).

#### stylesheets?

> `optional` **stylesheets**: `string`

#### stylis

> **stylis**: `undefined` \| `string`

#### stylis-selector

> **stylis-selector**: `undefined` \| `string`

#### stylus

> **stylus**: `undefined` \| `string`

#### stylus-selector

> **stylus-selector**: `undefined` \| `string`

#### sucrase

> **sucrase**: `undefined` \| `string`

#### sucrase-selector

> **sucrase-selector**: `undefined` \| `string`

#### svelte

> **svelte**: `undefined` \| `string`

#### svelte-app

> **svelte-app**: `undefined` \| `string`

#### svelte-app-selector

> **svelte-app-selector**: `undefined` \| `string`

#### svelte-selector

> **svelte-selector**: `undefined` \| `string`

#### tabSize?

> `optional` **tabSize**: `number`

The number of spaces per indentation-level.

Also used in [code formatting](https://livecodes.io/docs/features/code-format).

##### Default

```ts
2
```

#### tags?

> `optional` **tags**: `string` \| `string`[]

#### tcl

> **tcl**: `undefined` \| `string`

#### tcl-selector

> **tcl-selector**: `undefined` \| `string`

#### teal

> **teal**: `undefined` \| `string`

#### teal-selector

> **teal-selector**: `undefined` \| `string`

#### template?

> `optional` **template**: [`TemplateName`](../internal/type-aliases/TemplateName.md)

A [starter template](https://livecodes.io/docs/features/templates) to load.
Allowed valued can be found [here](https://livecodes.io/docs/api/internal/type-aliases/TemplateName).

#### tests?

> `optional` **tests**: (\{ language?: Language \| undefined; content?: string \| undefined; contentUrl?: string \| undefined; hiddenContent?: string \| undefined; hiddenContentUrl?: string \| undefined; ... 5 more ...; position?: EditorPosition \| undefined; \} \| undefined) & ("" \| ... 4 more ... \| "full")

Configures the [language](https://livecodes.io/docs/features/tests#supported-languages)
and content of [tests](https://livecodes.io/docs/features/tests).

#### theme?

> `optional` **theme**: [`Theme`](../internal/type-aliases/Theme.md)

Sets the app [theme](https://livecodes.io/docs/features/themes) to light/dark mode.

##### Default

```ts
"dark"
```

#### themeColor?

> `optional` **themeColor**: `string`

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

##### Default

```ts
undefined
```

#### title?

> `optional` **title**: `string`

Project title.
This is used as [result page](https://livecodes.io/docs/features/result) title and title meta tag.
Also used in project search.

##### Default

```ts
"Untitled Project"
```

#### tl

> **tl**: `undefined` \| `string`

#### tl-selector

> **tl-selector**: `undefined` \| `string`

#### tools?

> `optional` **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?

> `optional` **trailingComma**: `boolean`

Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas).

##### Default

```ts
true
```

#### ts

> **ts**: `undefined` \| `string`

#### ts-selector

> **ts-selector**: `undefined` \| `string`

#### tsx

> **tsx**: `undefined` \| `string`

#### tsx-selector

> **tsx-selector**: `undefined` \| `string`

#### twig

> **twig**: `undefined` \| `string`

#### twig-selector

> **twig-selector**: `undefined` \| `string`

#### types?

> `optional` **types**: `object`

Allows providing custom TypeScript type declarations for better [editor intellisense](https://livecodes.io/docs/features/intellisense).

It is an object where each key represents module name and value represents the types.

See docs for [Types](https://livecodes.io/docs/configuration/configuration-object#types)
and [Custom Types](https://livecodes.io/docs/features/intellisense#custom-types)

##### Examples

```js
{
  "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
    }
}
```

#### typescript

> **typescript**: `undefined` \| `string`

#### typescript-selector

> **typescript-selector**: `undefined` \| `string`

#### useTabs?

> `optional` **useTabs**: `boolean`

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

Also used in [code formatting](https://livecodes.io/docs/features/code-format).

##### Default

```ts
false
```

#### vento

> **vento**: `undefined` \| `string`

#### vento-selector

> **vento-selector**: `undefined` \| `string`

#### version?

> `readonly` `optional` **version**: `string`

This is a read-only property which specifies the current LiveCodes version.

Version specified in [exported](https://livecodes.io/docs/features/export) projects allows automatically upgrading the project configuration when imported by an app with a newer version.

#### ~~view?~~

> `optional` **view**: `"split"` \| `"result"` \| `"editor"`

##### Deprecated

The `view` option has been moved to `config.view`.
For headless mode use `headless: true`.

The [default view](https://livecodes.io/docs/features/default-view) for the playground.

When set to `"headless"`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless).

##### Default

```ts
"split"
```

#### vto

> **vto**: `undefined` \| `string`

#### vto-selector

> **vto-selector**: `undefined` \| `string`

#### vue

> **vue**: `undefined` \| `string`

#### vue-app

> **vue-app**: `undefined` \| `string`

#### vue-app-selector

> **vue-app-selector**: `undefined` \| `string`

#### vue-selector

> **vue-selector**: `undefined` \| `string`

#### vue2

> **vue2**: `undefined` \| `string`

#### vue2-selector

> **vue2-selector**: `undefined` \| `string`

#### vue3

> **vue3**: `undefined` \| `string`

#### vue3-selector

> **vue3-selector**: `undefined` \| `string`

#### wasm

> **wasm**: `undefined` \| `string`

#### wasm-selector

> **wasm-selector**: `undefined` \| `string`

#### wasm.cpp

> **cpp**: `undefined` \| `string`

#### wasm.cpp-selector

> **cpp-selector**: `undefined` \| `string`

#### wasm.cs

> **cs**: `undefined` \| `string`

#### wasm.cs-selector

> **cs-selector**: `undefined` \| `string`

#### wasm.lua

> **lua**: `undefined` \| `string`

#### wasm.lua-selector

> **lua-selector**: `undefined` \| `string`

#### wasm.php

> **php**: `undefined` \| `string`

#### wasm.php-selector

> **php-selector**: `undefined` \| `string`

#### wasm.py

> **py**: `undefined` \| `string`

#### wasm.py-selector

> **py-selector**: `undefined` \| `string`

#### wasm.rb

> **rb**: `undefined` \| `string`

#### wasm.rb-selector

> **rb-selector**: `undefined` \| `string`

#### wast

> **wast**: `undefined` \| `string`

#### wast-selector

> **wast-selector**: `undefined` \| `string`

#### wat

> **wat**: `undefined` \| `string`

#### wat-selector

> **wat-selector**: `undefined` \| `string`

#### webassembly

> **webassembly**: `undefined` \| `string`

#### webassembly-selector

> **webassembly-selector**: `undefined` \| `string`

#### welcome?

> `optional` **welcome**: `boolean`

If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads.

#### wordWrap?

> `optional` **wordWrap**: `boolean`

Enables word-wrap for long lines.

##### Default

```ts
false
```

#### x?

> `optional` **x**: `string`

#### xht

> **xht**: `undefined` \| `string`

#### xht-selector

> **xht-selector**: `undefined` \| `string`

#### xml

> **xml**: `undefined` \| `string`

#### xml-selector

> **xml-selector**: `undefined` \| `string`

#### zoom?

> `optional` **zoom**: `1` \| `0.5` \| `0.25`

Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom).

#### Defined in

[models.ts:338](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L338)

***

### template?

> `optional` **template**: [`TemplateName`](../internal/type-aliases/TemplateName.md)

A [starter template](https://livecodes.io/docs/features/templates) to load.
Allowed valued can be found [here](https://livecodes.io/docs/api/internal/type-aliases/TemplateName).

#### Defined in

[models.ts:383](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L383)

***

### ~~view?~~

> `optional` **view**: `"split"` \| `"result"` \| `"editor"` \| `"headless"`

#### Deprecated

The `view` option has been moved to `config.view`.
For headless mode use `headless: true`.

The [default view](https://livecodes.io/docs/features/default-view) for the playground.

When set to `"headless"`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless).

#### Default

```ts
"split"
```

#### Defined in

[models.ts:396](https://github.com/live-codes/livecodes/blob/7617d5c8be5a2a8be8133f973d9e69eb9f86434d/src/sdk/models.ts#L396)