{ Config.title }*

Edit in LiveCodes`, }} />
or manually create a new bookmark in your browser and add this code as its URL: ```js javascript:(()=>{window.open("https://livecodes.io/?x="+encodeURIComponent(location.href),"_blank");})(); ``` ## Example Usage After adding the bookmarklet to your browser (see above), open this GitHub directory: https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards Then click on the bookmarklet. LiveCodes playground should open in a new window and [import](./features/import.html.md) the directory files (each file in the appropriate editor). It just works! --- # GitHub Action ⚡ The [Preview in LiveCodes](https://github.com/live-codes/preview-in-livecodes) GitHub Action generates preview links to playgrounds for code changes in pull requests and posts them as pull request comments. Once added to a repo, it runs when a pull request is created or updated. The new code is optionally built. The action posts in a pull request comment links to playgrounds that can use the new code. **Screenshot:** ![Screenshot of the action](../static/img/screenshots/preview-in-livecodes-gh-action.png) For usage and more information, see the [action docs](https://github.com/live-codes/preview-in-livecodes) on GitHub. Also check the [example repo](https://github.com/hatemhosny/preview-in-livecodes-demo) for a working demo. --- # Markdown to LiveCodes Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds. The playgrounds can run any of the supported [languages](./languages/index.html.md) in LiveCodes, and can be customized to any of the [configuration options](./configuration/index.html.md). A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the `livecodes` parameter to the code block language meta. This is provided as [plugins](#packages) for [markdown-it](https://github.com/markdown-it/markdown-it), [marked](https://github.com/markedjs/marked) and [remark](https://github.com/remarkjs/remark). These plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "[Using with Frameworks](#using-with-frameworks)" for getting started. ## Demo This is an example code block: ````md ```jsx import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ``` ```` The above code block is normally rendered like this: ```jsx import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ```
The code block can instead be rendered as an interactive playground by adding the `livecodes` parameter to the code block language meta: ````md {1} ```jsx livecodes import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ``` ```` to be displayed like this: ```jsx livecodes import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ```

The playground can be customized by setting [options](#options) that are applied to all code blocks or by [meta parameters](#meta-parameters) that are applied to individual code blocks. Alternatively, the code block can be kept as it is, and a button or a link (**Edit in LiveCodes**) is appended, below the code block, that opens the code in a LiveCodes playground. This is achieved by adding the `render=button` or `render=link` parameter to the code block language meta. This displays a button: ````md {1} ```jsx livecodes render=button import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ``` ```` ```jsx livecodes render=button import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ```

While this displays a link: ````md {1} ```jsx livecodes render=link import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ``` ```` ```jsx livecodes render=link import { useState } from "react"; function App() { const [count, setCount] = useState(0); return (
You clicked {count} times.
); } export default App; ``` ## Packages All the functionality described here can be achieved using *any* of the following packages: - [`markdown-it-livecodes`](https://www.npmjs.com/package/markdown-it-livecodes): A [markdown-it](https://github.com/markdown-it/markdown-it) plugin. - [`marked-livecodes`](https://www.npmjs.com/package/marked-livecodes): A [marked](https://github.com/markedjs/marked) plugin. - [`remark-livecodes`](https://www.npmjs.com/package/remark-livecodes): A [remark](https://github.com/remarkjs/remark) plugin. - [`gatsby-remark-livecodes`](https://www.npmjs.com/package/gatsby-remark-livecodes): A [gatsby](https://github.com/gatsbyjs/gatsby) plugin. See the section "[Using with Frameworks](#using-with-frameworks)" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. ## Usage ### markdown-it-livecodes To use the `markdown-it-livecodes` plugin, first install it: ```bash npm install markdown-it markdown-it-livecodes ``` Then it can be used like this: ````js import markdownIt from "markdown-it"; import markdownItLivecodes from "markdown-it-livecodes"; const input = "```js livecodes \nconsole.log('Hello World!');\n```"; const output = markdownIt() .use(markdownItLivecodes, { /* options */ }) .render(input); console.log(output); // ```` ### marked-livecodes To use the `marked-livecodes` plugin, first install it: ```bash npm install marked marked-livecodes ``` Then it can be used like this: ````js import marked from "marked"; import markedLivecodes from "marked-livecodes"; const input = "```js livecodes \nconsole.log('Hello World!');\n```"; const output = await marked .use(markedLivecodes, { /* options */ }) .parse(input); console.log(output); // ```` ### remark-livecodes To use the `remark-livecodes` plugin, first install it: ```bash npm install remark remark-livecodes ``` Then it can be used like this: ````js import { remark } from "remark"; import remarkLivecodes from "remark-livecodes"; const input = "```js livecodes \nconsole.log('Hello World!');\n```"; const output = await remark() .use(remarkLivecodes, { /* options */ }) .process(input); console.log(String(output)); // ```` ### gatsby-remark-livecodes See usage with [Gatsby](#gatsby). ## Options Options can be passed to the plugins. These options apply to all code blocks. These options include LiveCodes SDK [embed options](./sdk/js-ts.html.md)#embed-options) (except `headless`). Example: ````js const output = await remark() .use(remarkLivecodes, { // highlight-start loading: "click", params: { console: "open" theme: "light", } // highlight-end }) .process(input); ```` In addition, the following options are also available: - `render`: The render mode for the LiveCodes playgrounds. This can be one of the following: - `playground` (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, [`"simple"` mode](./features/display-modes.html.md) is used, but this can be changed in [options](#options) or [meta parameters](#meta-parameters). - `link`: Keeps the code block as it is, and appends a link (**Edit in LiveCodes**), below the code block, that opens the code in a LiveCodes playground. - `button`: Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.
- `meta`: Keeps the code block as it is, and adds the URL of the playground to the `data-livecodes-url` attribute of the `
` element. In addition, in `remark-livecodes` the URL is added to the AST (`node.data.livecodesUrl` and `node.data.hProperties.dataLivecodesUrl`). In `markdown-it-livecodes` the URL is added to `env.livecodesUrl`.
    This can be used by other plugins (e.g. to display a custom run button overlying the code block).
- `height`: The height of the playground iframe.
- `className`: The class name to be applied to the iframe, link or button.
  Note: If the class name of the button contains `"dark"` (e.g. `"dark-btn"`), the dark button will be used.

  
- `auto`: When set to `true`, it automatically enables the `livecodes` parameter for all code blocks without having to explicitly add it.
  This is useful when you have a large number of code blocks and don't want to add the `livecodes` parameter to each code block.
  To disable this for a specific code block, add the `livecodes=false` [meta parameter](#meta-parameters) to the code block.

## Meta Parameters

Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name.

Meta parameters of code blocks override the [options](#options) passed to the plugin.

Example:

````markdown {1}
```jsx livecodes render=button className=dark-btn console=open
import { useState, useEffect } from "react";

export default () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    console.log("count:", count);
  }, [count]);

  return (
    
      You clicked {count} times.
      
    
  );
};
```
````

All LiveCodes [configuration query parameters](./configuration/query-params.html.md) can be used as code block meta parameters (e.g. ` ```js livecodes console=open theme=light`). See the [LiveCodes configuration docs](./configuration/configuration-object.html.md) for more information.

In addition, the following meta parameters are available:

- `livecodes`: Enables the LiveCodes playground for the code block. This can be omitted if the `auto` option is set to `true`. When `livecodes` is set to `false`, the code block is not handled by the plugin.
- `render`: The render mode. See the [Options](#options) section for more information.
- `height`: The height of the playground iframe.
- `className`: The class name for the playground iframe, link or button.
- `lang`: This overrides the language of the code block (e.g. ` ```jsx livecodes lang=react` or ` ```py livecodes lang=py-wasm`). See the [Languages](./languages/index.html.md) docs for more language information.

## Using with Frameworks

This guide shows how to use the suitable plugin in different frameworks.

### Astro

([demo](https://markdown-to-livecodes-astro.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-astro))

This is an example for adding the `remark-livecodes` plugin to `astro.config.mjs` file:

```js title="astro.config.js"
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import remarkLivecodes from "remark-livecodes";

export default defineConfig({
  // ...
  integrations: [mdx()],
  markdown: {
    remarkPlugins: [
      [
        remarkLivecodes,
        {
          /* options */
        },
      ],
    ],
  },
});
```

### Docusaurus

([demo](https://markdown-to-livecodes-docusaurus.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-docusaurus))

This is an example for adding the `remark-livecodes` plugin to `docusaurus.config.js` file:

```js title="docusaurus.config.js"
export default {
  presets: [
    [
      'classic',
      {
        docs: {
          // ...
          remarkPlugins: [
            [require('remark-livecodes'), { /* options */ }],
          ],
        },
      },
    ],
  ],
  // ...
};
```

### Gatsby

([demo](https://markdown-to-livecodes-gatsby.pages.dev/markdown-to-livecodes/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-gatsby))

This is an example for adding the `gatsby-remark-livecodes` plugin to `gatsby-config.js` file:

```js title="gatsby-config.js"
module.exports = {
  // ...
  plugins: [
    // ...
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-livecodes',
            options: { /* options */ },
          },
        ],
      },
    },
  ],
};
```

### Next.js

([demo](https://markdown-to-livecodes-nextjs.pages.dev/mdx-page) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-nextjs))

See [Next.js docs](https://nextjs.org/docs/app/guides/mdx) for using markdown and MDX in Next.js.

This is an example for adding the `remark-livecodes` plugin to `next.config.js` file:

```js title="next.config.js"
import createMDX from "@next/mdx";

const nextConfig = {
  // ...
  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};

const withMDX = createMDX({
  options: {
    remarkPlugins: [
      ['remark-livecodes', { /* other options */ }],
    ],
  },
});

export default withMDX(nextConfig);
```

When using Turbopack for local development, check the guide for [using plugins with Turbopack](https://nextjs.org/docs/app/guides/mdx#using-plugins-with-turbopack).

### react-markdown

`react-markdown` is a React component to render markdown.

This is an example for using the `remark-livecodes` plugin with `react-markdown`:

```jsx title="App.jsx" livecodes render=button
import Markdown from 'react-markdown';
import remarkLivecodes from 'remark-livecodes';

const markdown =
  '```jsx livecodes\nexport default () => Hello World\n```';

export default () => (
  {markdown}
);
```


### Storybook

([demo](https://markdown-to-livecodes-storybook.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-storybook))

This is an example for adding the `remark-livecodes` plugin to `storybook/main.js` file:

```js title="storybook/main.js"
import remarkLivecodes from "remark-livecodes";

export default {
  // ...
  addons: [
    // ...
    {
      name: "@storybook/addon-docs",
      options: {
        mdxPluginOptions: {
          mdxCompileOptions: {
            remarkPlugins: [
              [remarkLivecodes, { /* options */ }],
            ],
          },
        },
      },
    },
  ],
};
```

### VitePress

([demo](https://markdown-to-livecodes-vitepress.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-vitepress))

This is an example for adding the `markdown-it-livecodes` plugin to `vitepress.config.js` file:

```js title=".vitepress/config.js"
import { defineConfig } from "vitepress";
import markDownItLivecodes from "markdown-it-livecodes";

export default defineConfig({
  // ...
  markdown: {
    config: (md) => {
      md.use(markDownItLivecodes);
    },
  },
});
```

---



# Contribution

Contributions are always welcome, no matter how large or small. Before contributing,
please read the [code of conduct](https://github.com/live-codes/livecodes/blob/HEAD/CODE_OF_CONDUCT.html.md).

For code contribution, please refer to the [contribution guide](https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.html.md)
.

For financial and in-kind contributions, please refer to the [sponsor page](./sponsor.html.md).

You can always support the project by [giving feedback](https://github.com/live-codes/livecodes/discussions), [reporting issues, suggesting features](https://github.com/live-codes/livecodes/issues) and spreading the word.

Thank you :)

---



# Credits

## Services

LiveCodes uses services that are generously provided by:


  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  
  
    
      
    
  


## Third Party Packages

Packages used by LiveCodes and their licenses are [listed here](https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.html.md).

## Prior Art

Many of LiveCodes features/ideas were inspired by:

- [CodePen](https://codepen.io/)
- [JSFiddle](https://jsfiddle.net/)
- [JS Bin](https://jsbin.com/)
- [CodeSandbox](https://codesandbox.io/)
- [Replit](https://replit.com/)
- [VS Code](https://code.visualstudio.com/)
- [Monacode](https://github.com/lukejacksonn/monacode/)

Thank you ❤️

---



# License

LiveCodes is released under the permissive [MIT License](https://github.com/live-codes/livecodes/blob/develop/LICENSE) © [Hatem Hosny](https://github.com/hatemhosny).

Third party packages used in LiveCodes and their licenses are [listed here](https://github.com/live-codes/livecodes/blob/develop/vendor-licenses.html.md).

The source code is available on [GitHub](https://github.com/live-codes/livecodes).

Please consider [sponsoring LiveCodes](./sponsor.html.md) to support its maintenance and continued development.

---



import MailLink from '../src/components/MailLink.tsx';

# Sponsor LiveCodes

Thank you for considering becoming a sponsor of LiveCodes! 💚

LiveCodes is a feature-rich, open source code playground with a wide range of language support. With LiveCodes, learning, prototyping, experimenting, documenting, teaching, and sharing code is easier and more enjoyable than ever.

LiveCodes is free, with no limits for use, no ads and no account required. The MIT license allows anyone to use (including commercial use), modify, and distribute.

As a sponsor of LiveCodes, you will be supporting the ongoing development and maintenance of the project, as well as helping to ensure that it remains a valuable resource for the developer community. In return, you will receive recognition as a sponsor on the documentation website, GitHub repo and social media channels, as well as the opportunity to engage with our community of users and contributors.

There are several ways to support LiveCodes as a sponsor:

### Financial Contributions

LiveCodes relies on the support of sponsors like you to fund its ongoing development and maintenance. Your financial contribution will help to ensure that the project remains sustainable in the long term.

Payments can be done via:

- [GitHub Sponsors](https://github.com/sponsors/live-codes/)
- [PayPal](https://paypal.me/hatemhosni)
- [Ko-fi](https://ko-fi.com/hatemhosny)

Both monthly-recurring sponsorships and one-time donations are accepted. Recurring sponsorships are entitled to logo placements as specified in [Sponsorship Benefits](#sponsorship-benefits).

If you have questions, please reach out to .

### In-kind Contributions

Do you have a service or product that could be useful to the LiveCodes community? We welcome in-kind contributions that can help to support the project and its users.

In-kind contributors are recognized (logo and name) in the [credits](./credits.html.md) page and in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).

### Marketing and Promotion

Help us to spread the word about LiveCodes by sharing our content on your social media channels, writing blog posts about LiveCodes or by providing us with promotional opportunities.

### Sponsorship Benefits

#### ☕️ Backers (USD$5/mo):

- Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
- Thank you 💚
  Your support is really appreciated.

#### 🍹 Generous Backers (USD$25/mo):

- Name listed in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
- Priority in feature requests.

#### 🥉 Bronze Sponsors (USD$100/mo):

- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md).
- Small logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
- Small logo placement in [this page](#livecodes-sponsors).
- Small logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
- Priority in feature requests.

#### 🥈 Silver Sponsors (USD$250/mo):

- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md).
- Medium logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
- Logo placement in sidebar of all content pages.
- Medium logo placement in [this page](#livecodes-sponsors).
- Medium logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
- Priority in feature requests.

#### 🥇 Gold Sponsors (USD$500/mo):

- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md).
- Large logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
- Logo placement in sidebar of all content pages.
- Large logo placement in [this page](#livecodes-sponsors).
- Large logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
- Priority in feature requests.

#### 🏆 Platinum Sponsors (USD$1,000/mo):

- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md).
- Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
- Prominent logo placement in sidebar of all content pages.
- Prominent logo placement at the top of [this page](#).
- Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
- Priority in feature requests.

#### 💎 Diamond Sponsors (USD$2,000/mo):

- **Custom build** of the playground with your **logo and brand**. The custom build is maintained and receives new updates.
- Access to a hosted (always-on) [broadcast API](./features/broadcast.html.md) and [custom services](./advanced/services.html.md).
- Prominent logo placement on the front page of [https://livecodes.io/docs](https://livecodes.io/docs).
- Prominent logo placement in sidebar of all content pages.
- Prominent logo placement at the top of [this page](#).
- Prominent logo placement in the README of [live-codes/livecodes](https://github.com/live-codes/livecodes).
- Priority in feature requests.

#### 🌟 Special Sponsors (> USD$2,000/mo):

    .

 

If you are interested in becoming a sponsor of LiveCodes, please don't hesitate to . We would love to discuss the various sponsorship options available and find a way for you to get involved. Thank you for your support!

## LiveCodes Sponsors


  Your logo here


---



# Contact {#contact-custom-content-none}

We would love to hear from you!

import ContactForm from '../src/components/ContactForm.tsx'
import MailLink from '../src/components/MailLink.tsx'



Or you can send us an email to:

- Info: 
- Security: 
- Sponsor: 

For non-security-related code issues, please report them in the [repo issues](https://github.com/live-codes/livecodes/issues).

Please follow the twitter account: [@livecodes_io](https://twitter.com/livecodes_io).

---



# About us

LiveCodes is built and maintained by [Hatem Hosny](https://github.com/hatemhosny), and wonderful [contributors](https://github.com/live-codes/livecodes/graphs/contributors).

Feature requests and bug reports are received on the [GitHub repo](https://github.com/live-codes/livecodes/issues).

Contributions are most welcome. Please open an issue on the GitHub repo to discuss your potential contribution before submitting a pull request.

Reach out to us using this [contact form](./contact.html.md).

Please consider [sponsoring LiveCodes](./sponsor.html.md) to support its maintenance and continued development.

---



# Display Modes

import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';



---



# Display Mode: full

import LiveCodes from '../../../src/components/LiveCodes.tsx';



---



# Display Mode: editor

import LiveCodes from '../../../src/components/LiveCodes.tsx';



---



# Display Mode: codeblock

import LiveCodes from '../../../src/components/LiveCodes.tsx';



---



# Display Mode: result

import LiveCodes from '../../../src/components/LiveCodes.tsx';



---



# \_internal

## Index

### Interfaces

- [API](interfaces/API.md)
- [AppConfig](interfaces/AppConfig.md)
- [ContentConfig](interfaces/ContentConfig.md)
- [EditorConfig](interfaces/EditorConfig.md)
- [EditorPosition](interfaces/EditorPosition.md)
- [FormatterConfig](interfaces/FormatterConfig.md)
- [TestResult](interfaces/TestResult.md)
- [Types](interfaces/Types.md)
- [UserConfig](interfaces/UserConfig.md)

### Type Aliases

- [APICommands](type-aliases/APICommands.md)
- [AppLanguage](type-aliases/AppLanguage.md)
- [CDN](type-aliases/CDN.md)
- [CodejarTheme](type-aliases/CodejarTheme.md)
- [CodemirrorTheme](type-aliases/CodemirrorTheme.md)
- [CssPresetId](type-aliases/CssPresetId.md)
- [EditorId](type-aliases/EditorId.md)
- [EditorTheme](type-aliases/EditorTheme.md)
- [MonacoTheme](type-aliases/MonacoTheme.md)
- [Processor](type-aliases/Processor.md)
- [TemplateName](type-aliases/TemplateName.md)
- [Theme](type-aliases/Theme.md)
- [ToolsPaneStatus](type-aliases/ToolsPaneStatus.md)
- [WatchCode](type-aliases/WatchCode.md)
- [WatchConsole](type-aliases/WatchConsole.md)
- [WatchDestroy](type-aliases/WatchDestroy.md)
- [WatchLoad](type-aliases/WatchLoad.md)
- [WatchReady](type-aliases/WatchReady.md)
- [WatchTests](type-aliases/WatchTests.md)

---



# Interface: API

## Extended by

- [`Playground`](../../interfaces/Playground.md)

## Properties

### destroy()

> **destroy**: () => `Promise`\<`void`\>

Destroys the playground instance, and removes event listeners.

Further call to any SDK methods throws an error.

#### Returns

`Promise`\<`void`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.destroy();
  // playground destroyed
  // any further SDK call throws an error
});
```

#### Defined in

[models.ts:211](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L211)

***

### exec()

> **exec**: (`command`, ...`args`) => `Promise`\<`object` \| `object`\>

Executes custom commands, including: `"setBroadcastToken"` and `"showVersion"`.

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

#### Parameters

• **command**: [`APICommands`](../type-aliases/APICommands.md)

• ...**args**: `any`[]

#### Returns

`Promise`\<`object` \| `object`\>

#### Defined in

[models.ts:194](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L194)

***

### format()

> **format**: (`allEditors`?) => `Promise`\<`void`\>

Formats the code.

By default, the code in all editors (markup, style and script) is formatted.
To format only the active editor, the value `false` should be passed as an argument.

#### Parameters

• **allEditors?**: `boolean`

#### Returns

`Promise`\<`void`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.format();
  // code in editors is formatted
});
```

#### Defined in

[models.ts:31](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L31)

***

### getCode()

> **getCode**: () => `Promise`\<[`Code`](../../interfaces/Code.md)\>

Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.

See [Code](https://livecodes.io/docs/api/interfaces/Code) for the structure of the returned object.

#### Returns

`Promise`\<[`Code`](../../interfaces/Code.md)\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const code = await playground.getCode();

  // source code, language and compiled code for the script editor
  const { content, language, compiled } = code.script;

  // result page HTML
  const result = code.result;
});
```

#### Defined in

[models.ts:105](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L105)

***

### getConfig()

> **getConfig**: (`contentOnly`?) => `Promise`\<[`Config`](../../interfaces/Config.md)\>

Gets a [configuration object](https://livecodes.io/docs/configuration/configuration-object) representing the playground state.

This can be used to restore state if passed as an [EmbedOptions](https://livecodes.io/docs/sdk/js-ts#embed-options) property when [creating playgrounds](https://livecodes.io/docs/sdk/js-ts/#createplayground),
or can be manipulated and loaded in run-time using [`setConfig`](https://livecodes.io/docs/sdk/js-ts#setconfig) method.

#### Parameters

• **contentOnly?**: `boolean`

#### Returns

`Promise`\<[`Config`](../../interfaces/Config.md)\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = await playground.getConfig();
});
```

#### Defined in

[models.ts:64](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L64)

***

### getShareUrl()

> **getShareUrl**: (`shortUrl`?) => `Promise`\<`string`\>

Gets a [share url](https://livecodes.io/docs/features/share) for the current project.

By default, the url has a long query string representing the compressed encoded config object.
If the argument `shortUrl` was set to `true`, a short url is generated.

#### Parameters

• **shortUrl?**: `boolean`

#### Returns

`Promise`\<`string`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const longUrl = await playground.getShareUrl();
  const shortUrl = await playground.getShareUrl(true);
});
```

#### Defined in

[models.ts:48](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L48)

***

### ~~onChange()~~

> **onChange**: (`fn`) => `object`

Runs a callback function when code changes.

#### Parameters

• **fn**

#### Returns

`object`

##### ~~remove()~~

> **remove**: () => `void`

###### Returns

`void`

#### Deprecated

Use [`watch`](https://livecodes.io/docs/sdk/js-ts#watch) method instead.

#### Defined in

[models.ts:142](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L142)

***

### run()

> **run**: () => `Promise`\<`void`\>

Runs the [result page](https://livecodes.io/docs/features/result) (after any required compilation for code).

#### Returns

`Promise`\<`void`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.run();
  // new result page is displayed
});
```

#### Defined in

[models.ts:14](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L14)

***

### runTests()

> **runTests**: () => `Promise`\<`object`\>

Runs project [tests](https://livecodes.io/docs/features/tests) (if present) and gets test results.

#### Returns

`Promise`\<`object`\>

##### results

> **results**: [`TestResult`](TestResult.md)[]

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const { results } = await playground.runTests();
});
```

#### Defined in

[models.ts:135](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L135)

***

### setConfig()

> **setConfig**: (`config`) => `Promise`\<[`Config`](../../interfaces/Config.md)\>

Loads a new project using the passed configuration object.

#### Parameters

• **config**: `Partial`\<[`Config`](../../interfaces/Config.md)\>

#### Returns

`Promise`\<[`Config`](../../interfaces/Config.md)\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = {
    markup: {
      language: "html",
      content: "Hello World!",
    },
  };
  const newConfig = await playground.setConfig(config);
  // new project loaded
});
```

#### Defined in

[models.ts:84](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L84)

***

### show()

> **show**: (`panel`, `options`?) => `Promise`\<`void`\>

Shows the selected panel.

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

#### Parameters

• **panel**: `"result"` \| [`EditorId`](../type-aliases/EditorId.md) \| `"console"` \| `"compiled"` \| `"tests"` \| `"editor"` \| `"toggle-result"`

• **options?**

• **options.column?**: `number`

• **options.full?**: `boolean`

• **options.line?**: `number`

• **options.zoom?**: `1` \| `0.5` \| `0.25`

#### Returns

`Promise`\<`void`\>

#### Example

```ts
await playground.show("style");
await playground.show("toggle-result");
await playground.show("result", { full: true });
await playground.show("script");
await playground.show("result", { zoom: 0.5 });
await playground.show("console", { full: true });
```

#### Defined in

[models.ts:119](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L119)

***

### watch

> **watch**: [`WatchLoad`](../type-aliases/WatchLoad.md) & [`WatchReady`](../type-aliases/WatchReady.md) & [`WatchCode`](../type-aliases/WatchCode.md) & [`WatchConsole`](../type-aliases/WatchConsole.md) & [`WatchTests`](../type-aliases/WatchTests.md) & [`WatchDestroy`](../type-aliases/WatchDestroy.md)

Allows to watch for various playground events.
It takes 2 arguments: event name and a callback function that will be called on every event.

event name can be one of: `"load" | "ready" | "code" | "console" | "tests" | "destroy"`

In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results).

The watch method returns an object with a single method (`remove`), which when called will remove the callback from watching further events.

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

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then((playground) => {
  const codeWatcher = playground.watch("code", ({ code, config }) => {
    // this will run on every code change
    console.log("code:", code);
    console.log("config:", config);
  });

  const consoleWatcher = playground.watch("console", ({ method, args }) => {
    // this will run on every console output
    console[method](...args);
  });

  const testsWatcher = playground.watch("tests", ({ results }) => {
    // this will run when tests run
    results.forEach((testResult) => {
      console.log("status:", testResult.status); // "pass", "fail" or "skip"
      console.log(testResult.errors); // array of errors as strings
    });
  });

  // then later
  codeWatcher.remove();
  consoleWatcher.remove();
  testsWatcher.remove();
  // events are no longer watched
});
```

#### Defined in

[models.ts:187](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L187)

---



# Interface: AppConfig

These are properties that define how the app behaves.

## Extended by

- [`Config`](../../interfaces/Config.md)

## Properties

### allowLangChange

> **allowLangChange**: `boolean`

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

#### Default

```ts
true
```

#### Defined in

[models.ts:603](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L603)

***

### mode

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

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

#### Default

```ts
"full"
```

#### Defined in

[models.ts:615](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L615)

***

### readonly

> **readonly**: `boolean`

If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code.

By default, when readonly is set to true, the light-weight code editor [CodeJar](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
```

#### Defined in

[models.ts:597](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L597)

***

### tools

> **tools**: `Partial`\<`object`\>

Sets enabled and active tools and status of [tools pane](https://livecodes.io/docs/features/tools-pane).

#### Type declaration

##### active

> **active**: `""` \| `"console"` \| `"compiled"` \| `"tests"`

##### enabled

> **enabled**: `"all"` \| (`"console"` \| `"compiled"` \| `"tests"`)[]

##### status

> **status**: [`ToolsPaneStatus`](../type-aliases/ToolsPaneStatus.md)

#### Default

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

#### Example

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

#### Defined in

[models.ts:631](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L631)

***

### view?

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

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

#### Default

```ts
"split"
```

#### Defined in

[models.ts:609](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L609)

***

### zoom

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

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

#### Defined in

[models.ts:640](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L640)

---



# Interface: ContentConfig

The properties that define the content of the current [project](https://livecodes.io/docs/features/projects).

## Extended by

- [`Config`](../../interfaces/Config.md)

## Properties

### activeEditor

> **activeEditor**: `undefined` \| [`EditorId`](../type-aliases/EditorId.md)

Selects the active editor to show.

Defaults to the last used editor for user, otherwise `"markup"`

#### Defined in

[models.ts:455](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L455)

***

### cssPreset

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

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

#### Defined in

[models.ts:502](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L502)

***

### customSettings

> **customSettings**: `object`

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

#### adoc

> **adoc**: `any`

#### app.svelte

> **svelte**: `any`

#### app.vue

> **vue**: `any`

#### art

> **art**: `any`

#### art-template

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

#### as

> **as**: `any`

#### asc

> **asc**: `any`

#### asciidoc

> **asciidoc**: `any`

#### assemblyscript

> **assemblyscript**: `any`

#### astro

> **astro**: `any`

#### autoprefixer

> **autoprefixer**: `any`

#### babel

> **babel**: `any`

#### bb

> **bb**: `any`

#### bbcode

> **bbcode**: `any`

#### Binary

> **Binary**: `any`

#### blockly

> **blockly**: `any`

#### blockly.xml

> **xml**: `any`

#### c

> **c**: `any`

#### C

> **C**: `any`

#### c++

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

#### civet

> **civet**: `any`

#### clang

> **clang**: `any`

#### clang.cpp

> **cpp**: `any`

#### clio

> **clio**: `any`

#### clj

> **clj**: `any`

#### cljc

> **cljc**: `any`

#### cljs

> **cljs**: `any`

#### clojure

> **clojure**: `any`

#### clojurescript

> **clojurescript**: `any`

#### coffee

> **coffee**: `any`

#### coffeescript

> **coffeescript**: `any`

#### common-lisp

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

#### commonlisp

> **commonlisp**: `any`

#### convertCommonjs?

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

#### cp

> **cp**: `any`

#### cpp

> **cpp**: `any`

#### cpp-wasm

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

#### cppm

> **cppm**: `any`

#### cppwasm

> **cppwasm**: `any`

#### cs

> **cs**: `any`

#### cs-wasm

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

#### csharp

> **csharp**: `any`

#### csharp-wasm

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

#### css

> **css**: `any`

#### cssmodules

> **cssmodules**: `any`

#### cssnano

> **cssnano**: `any`

#### cwasm

> **cwasm**: `any`

#### cxx

> **cxx**: `any`

#### defaultCDN?

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

#### diagram

> **diagram**: `any`

#### diagrams

> **diagrams**: `any`

#### dot

> **dot**: `any`

#### edn

> **edn**: `any`

#### ejs

> **ejs**: `any`

#### es

> **es**: `any`

#### eta

> **eta**: `any`

#### fennel

> **fennel**: `any`

#### flow

> **flow**: `any`

#### fnl

> **fnl**: `any`

#### gleam

> **gleam**: `any`

#### go

> **go**: `any`

#### golang

> **golang**: `any`

#### graph

> **graph**: `any`

#### h

> **h**: `any`

#### haml

> **haml**: `any`

#### handlebars

> **handlebars**: `any`

#### hbs

> **hbs**: `any`

#### hpp

> **hpp**: `any`

#### htm

> **htm**: `any`

#### html

> **html**: `any`

#### ii

> **ii**: `any`

#### imba

> **imba**: `any`

#### imports?

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

#### ixx

> **ixx**: `any`

#### jade

> **jade**: `any`

#### java

> **java**: `any`

#### javascript

> **javascript**: `any`

#### jinja

> **jinja**: `any`

#### jl

> **jl**: `any`

#### js

> **js**: `any`

#### json

> **json**: `any`

#### jsx

> **jsx**: `any`

#### julia

> **julia**: `any`

#### less

> **less**: `any`

#### lightningcss

> **lightningcss**: `any`

#### liquid

> **liquid**: `any`

#### liquidjs

> **liquidjs**: `any`

#### lisp

> **lisp**: `any`

#### livescript

> **livescript**: `any`

#### ls

> **ls**: `any`

#### lua

> **lua**: `any`

#### lua-wasm

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

#### luawasm

> **luawasm**: `any`

#### malina

> **malina**: `any`

#### malinajs

> **malinajs**: `any`

#### mapImports?

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

#### markdown

> **markdown**: `any`

#### md

> **md**: `any`

#### mdown

> **mdown**: `any`

#### mdx

> **mdx**: `any`

#### mjml

> **mjml**: `any`

#### mkdn

> **mkdn**: `any`

#### ml

> **ml**: `any`

#### mli

> **mli**: `any`

#### mustache

> **mustache**: `any`

#### njk

> **njk**: `any`

#### nunjucks

> **nunjucks**: `any`

#### ocaml

> **ocaml**: `any`

#### perl

> **perl**: `any`

#### pg

> **pg**: `any`

#### pg.sql

> **sql**: `any`

#### pglite

> **pglite**: `any`

#### pglite.sql

> **sql**: `any`

#### pgsql

> **pgsql**: `any`

#### pgsql.sql

> **sql**: `any`

#### php

> **php**: `any`

#### php-wasm

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

#### phpwasm

> **phpwasm**: `any`

#### pintora

> **pintora**: `any`

#### pl

> **pl**: `any`

#### plt

> **plt**: `any`

#### pm

> **pm**: `any`

#### postcss

> **postcss**: `any`

#### postcssImportUrl

> **postcssImportUrl**: `any`

#### postcssPresetEnv

> **postcssPresetEnv**: `any`

#### postgre.sql

> **sql**: `any`

#### postgres

> **postgres**: `any`

#### postgresql

> **postgresql**: `any`

#### postgresql.sql

> **sql**: `any`

#### prolog

> **prolog**: `any`

#### prolog.pl

> **pl**: `any`

#### pug

> **pug**: `any`

#### purgecss

> **purgecss**: `any`

#### py

> **py**: `any`

#### py-wasm

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

#### py3

> **py3**: `any`

#### pyodide

> **pyodide**: `any`

#### python

> **python**: `any`

#### python-wasm

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

#### pythonwasm

> **pythonwasm**: `any`

#### pywasm

> **pywasm**: `any`

#### r

> **r**: `any`

#### r-wasm

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

#### rb

> **rb**: `any`

#### re

> **re**: `any`

#### react

> **react**: `any`

#### react-jsx

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

#### react-native

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

#### react-native-tsx

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

#### react-native.jsx

> **jsx**: `any`

#### react-native.tsx

> **tsx**: `any`

#### react-tsx

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

#### react.jsx

> **jsx**: `any`

#### react.tsx

> **tsx**: `any`

#### reason

> **reason**: `any`

#### rei

> **rei**: `any`

#### res

> **res**: `any`

#### rescript

> **rescript**: `any`

#### resi

> **resi**: `any`

#### rich

> **rich**: `any`

#### richtext

> **richtext**: `any`

#### riot

> **riot**: `any`

#### riotjs

> **riotjs**: `any`

#### rlang

> **rlang**: `any`

#### rstats

> **rstats**: `any`

#### rte

> **rte**: `any`

#### rte.html

> **html**: `any`

#### ruby

> **ruby**: `any`

#### ruby-wasm

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

#### rubywasm

> **rubywasm**: `any`

#### sass

> **sass**: `any`

#### scheme

> **scheme**: `any`

#### scm

> **scm**: `any`

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

#### scss

> **scss**: `any`

#### solid

> **solid**: `any`

#### solid.jsx

> **jsx**: `any`

#### solid.tsx

> **tsx**: `any`

#### sql

> **sql**: `any`

#### sqlite

> **sqlite**: `any`

#### sqlite3

> **sqlite3**: `any`

#### stencil

> **stencil**: `any`

#### stencil.tsx

> **tsx**: `any`

#### styl

> **styl**: `any`

#### stylis

> **stylis**: `any`

#### stylus

> **stylus**: `any`

#### sucrase

> **sucrase**: `any`

#### svelte

> **svelte**: `any`

#### svelte-app

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

#### tailwindcss

> **tailwindcss**: `any`

#### tcl

> **tcl**: `any`

#### teal

> **teal**: `any`

#### template?

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

#### template.data?

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

#### template.prerender?

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

#### tl

> **tl**: `any`

#### tokencss

> **tokencss**: `any`

#### ts

> **ts**: `any`

#### tsx

> **tsx**: `any`

#### twig

> **twig**: `any`

#### types?

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

#### typescript

> **typescript**: `any`

#### unocss

> **unocss**: `any`

#### vento

> **vento**: `any`

#### vto

> **vto**: `any`

#### vue

> **vue**: `any`

#### vue-app

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

#### vue2

> **vue2**: `any`

#### vue3

> **vue3**: `any`

#### wasm

> **wasm**: `any`

#### wasm.cpp

> **cpp**: `any`

#### wasm.cs

> **cs**: `any`

#### wasm.lua

> **lua**: `any`

#### wasm.php

> **php**: `any`

#### wasm.py

> **py**: `any`

#### wasm.rb

> **rb**: `any`

#### wast

> **wast**: `any`

#### wat

> **wat**: `any`

#### webassembly

> **webassembly**: `any`

#### windicss

> **windicss**: `any`

#### xht

> **xht**: `any`

#### xml

> **xml**: `any`

#### Defined in

[models.ts:514](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L514)

***

### description

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

#### Defined in

[models.ts:425](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L425)

***

### head

> **head**: `string`

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

#### Default

```ts
'\n'
```

#### Defined in

[models.ts:431](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L431)

***

### htmlAttrs

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

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

#### Example

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

#### Defined in

[models.ts:440](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L440)

***

### imports

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

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

#### Defined in

[models.ts:540](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L540)

***

### languages

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

List of enabled languages.

Defaults to all supported languages in full app and only current editor languages in [embeds](https://livecodes.io/docs/features/embeds).

#### Defined in

[models.ts:462](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L462)

***

### markup

> **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.

#### content?

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

The initial content of the code editor.

##### Default

```ts
""
```

#### contentUrl?

> `optional` **contentUrl**: `string`

A URL to load `content` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `content` property had no value.

#### foldedLines?

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

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

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

#### hiddenContent?

> `optional` **hiddenContent**: `string`

Hidden content that gets evaluated without being visible in the code editor.

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

#### hiddenContentUrl?

> `optional` **hiddenContentUrl**: `string`

A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `hiddenContent` property had no value.

#### hideTitle?

> `optional` **hideTitle**: `boolean`

If `true`, the title of the code editor is hidden, however its code is still evaluated.

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

#### language

> **language**: [`Language`](../../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)

#### order?

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

The order of the editor in the UI.

##### Default

```ts
0
```

#### position?

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

The initial position of the cursor in the code editor.

##### Example

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

#### selector?

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

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

#### title?

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

If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).

#### Default

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

#### Defined in

[models.ts:470](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L470)

***

### processors

> **processors**: [`Processor`](../type-aliases/Processor.md)[]

List of enabled [CSS processors](https://livecodes.io/docs/features/css/#css-processors).

For the list of available processors, see [Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor)

#### Defined in

[models.ts:509](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L509)

***

### script

> **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.

#### content?

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

The initial content of the code editor.

##### Default

```ts
""
```

#### contentUrl?

> `optional` **contentUrl**: `string`

A URL to load `content` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `content` property had no value.

#### foldedLines?

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

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

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

#### hiddenContent?

> `optional` **hiddenContent**: `string`

Hidden content that gets evaluated without being visible in the code editor.

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

#### hiddenContentUrl?

> `optional` **hiddenContentUrl**: `string`

A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `hiddenContent` property had no value.

#### hideTitle?

> `optional` **hideTitle**: `boolean`

If `true`, the title of the code editor is hidden, however its code is still evaluated.

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

#### language

> **language**: [`Language`](../../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)

#### order?

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

The order of the editor in the UI.

##### Default

```ts
0
```

#### position?

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

The initial position of the cursor in the code editor.

##### Example

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

#### selector?

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

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

#### title?

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

If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).

#### Default

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

#### Defined in

[models.ts:486](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L486)

***

### scripts

> **scripts**: `string`[]

List of URLs for [external scripts](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result).

#### Defined in

[models.ts:496](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L496)

***

### style

> **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.

#### content?

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

The initial content of the code editor.

##### Default

```ts
""
```

#### contentUrl?

> `optional` **contentUrl**: `string`

A URL to load `content` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `content` property had no value.

#### foldedLines?

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

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

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

#### hiddenContent?

> `optional` **hiddenContent**: `string`

Hidden content that gets evaluated without being visible in the code editor.

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

#### hiddenContentUrl?

> `optional` **hiddenContentUrl**: `string`

A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `hiddenContent` property had no value.

#### hideTitle?

> `optional` **hideTitle**: `boolean`

If `true`, the title of the code editor is hidden, however its code is still evaluated.

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

#### language

> **language**: [`Language`](../../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)

#### order?

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

The order of the editor in the UI.

##### Default

```ts
0
```

#### position?

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

The initial position of the cursor in the code editor.

##### Example

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

#### selector?

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

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

#### title?

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

If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).

#### Default

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

#### Defined in

[models.ts:478](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L478)

***

### stylesheets

> **stylesheets**: `string`[]

List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result).

#### Defined in

[models.ts:491](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L491)

***

### tags

> **tags**: `string`[]

Project tags.
Used in [project](https://livecodes.io/docs/features/projects) filter and search.

#### Default

```ts
[]
```

#### Defined in

[models.ts:447](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L447)

***

### tests

> **tests**: `undefined` \| `object`

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

#### Defined in

[models.ts:576](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L576)

***

### title

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

#### Defined in

[models.ts:418](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L418)

***

### types

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

#### Defined in

[models.ts:570](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L570)

***

### version

> `readonly` **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.

#### Defined in

[models.ts:583](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L583)

---



# Interface: EditorConfig

## Extended by

- [`UserConfig`](UserConfig.md)

## Properties

### closeBrackets

> **closeBrackets**: `boolean`

Use auto-complete to close brackets and quotes.

#### Default

```ts
true
```

#### Defined in

[models.ts:801](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L801)

***

### editor

> **editor**: `undefined` \| `"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
```

#### Defined in

[models.ts:722](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L722)

***

### editorMode

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

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

#### Defined in

[models.ts:812](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L812)

***

### editorTheme

> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../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"]
```

#### Defined in

[models.ts:748](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L748)

***

### emmet

> **emmet**: `boolean`

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

#### Default

```ts
true
```

#### Defined in

[models.ts:807](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L807)

***

### enableAI

> **enableAI**: `boolean`

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

#### Default

```ts
false
```

#### Defined in

[models.ts:818](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L818)

***

### foldRegions

> **foldRegions**: `boolean`

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

#### Default

```ts
false
```

#### Defined in

[models.ts:795](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L795)

***

### fontFamily

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

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

#### Defined in

[models.ts:753](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L753)

***

### fontSize

> **fontSize**: `undefined` \| `number`

Sets the font size.

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

#### Default

```ts
undefined
```

#### Defined in

[models.ts:761](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L761)

***

### lineNumbers

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

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

#### Default

```ts
true
```

#### Defined in

[models.ts:783](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L783)

***

### tabSize

> **tabSize**: `number`

The number of spaces per indentation-level.

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

#### Default

```ts
2
```

#### Defined in

[models.ts:777](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L777)

***

### theme

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

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

#### Default

```ts
"dark"
```

#### Defined in

[models.ts:728](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L728)

***

### themeColor

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

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

#### Default

```ts
undefined
```

#### Defined in

[models.ts:735](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L735)

***

### useTabs

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

#### Defined in

[models.ts:769](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L769)

***

### wordWrap

> **wordWrap**: `boolean`

Enables word-wrap for long lines.

#### Default

```ts
false
```

#### Defined in

[models.ts:789](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L789)

---



# Interface: EditorPosition

## Properties

### column?

> `optional` **column**: `number`

#### Defined in

[models.ts:1165](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1165)

***

### lineNumber

> **lineNumber**: `number`

#### Defined in

[models.ts:1164](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1164)

---



# Interface: FormatterConfig

## Extended by

- [`UserConfig`](UserConfig.md)

## Properties

### semicolons

> **semicolons**: `boolean`

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

#### Default

```ts
true
```

#### Defined in

[models.ts:838](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L838)

***

### singleQuote

> **singleQuote**: `boolean`

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

#### Default

```ts
false
```

#### Defined in

[models.ts:843](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L843)

***

### tabSize

> **tabSize**: `number`

The number of spaces per indentation-level.

#### Default

```ts
2
```

#### Defined in

[models.ts:832](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L832)

***

### trailingComma

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

#### Defined in

[models.ts:849](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L849)

***

### useTabs

> **useTabs**: `boolean`

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

#### Default

```ts
false
```

#### Defined in

[models.ts:826](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L826)

---



# Interface: TestResult

## Properties

### duration

> **duration**: `number`

#### Defined in

[models.ts:1979](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1979)

***

### errors

> **errors**: `string`[]

#### Defined in

[models.ts:1980](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1980)

***

### status

> **status**: `"fail"` \| `"pass"` \| `"skip"`

#### Defined in

[models.ts:1981](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1981)

***

### testPath

> **testPath**: `string`[]

#### Defined in

[models.ts:1982](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1982)

---



# Interface: Types

## Indexable

 \[`key`: `string`\]: `string` \| `object`

---



# Interface: UserConfig

## Extends

- [`EditorConfig`](EditorConfig.md).[`FormatterConfig`](FormatterConfig.md)

## Extended by

- [`Config`](../../interfaces/Config.md)

## Properties

### appLanguage

> **appLanguage**: `undefined` \| [`AppLanguage`](../type-aliases/AppLanguage.md)

Sets the app UI language used.

#### Defined in

[models.ts:707](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L707)

***

### autosave

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

#### Defined in

[models.ts:656](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L656)

***

### autotest

> **autotest**: `boolean`

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

#### Default

```ts
false
```

#### Defined in

[models.ts:662](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L662)

***

### autoupdate

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

#### Defined in

[models.ts:649](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L649)

***

### closeBrackets

> **closeBrackets**: `boolean`

Use auto-complete to close brackets and quotes.

#### Default

```ts
true
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`closeBrackets`](EditorConfig.md#closebrackets)

#### Defined in

[models.ts:801](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L801)

***

### delay

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

#### Defined in

[models.ts:670](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L670)

***

### editor

> **editor**: `undefined` \| `"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
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`editor`](EditorConfig.md#editor)

#### Defined in

[models.ts:722](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L722)

***

### editorMode

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

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

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`editorMode`](EditorConfig.md#editormode)

#### Defined in

[models.ts:812](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L812)

***

### editorTheme

> **editorTheme**: `undefined` \| `string` \| [`EditorTheme`](../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"]
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`editorTheme`](EditorConfig.md#editortheme)

#### Defined in

[models.ts:748](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L748)

***

### emmet

> **emmet**: `boolean`

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

#### Default

```ts
true
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`emmet`](EditorConfig.md#emmet)

#### Defined in

[models.ts:807](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L807)

***

### enableAI

> **enableAI**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`enableAI`](EditorConfig.md#enableai)

#### Defined in

[models.ts:818](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L818)

***

### foldRegions

> **foldRegions**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`foldRegions`](EditorConfig.md#foldregions)

#### Defined in

[models.ts:795](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L795)

***

### fontFamily

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

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

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`fontFamily`](EditorConfig.md#fontfamily)

#### Defined in

[models.ts:753](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L753)

***

### fontSize

> **fontSize**: `undefined` \| `number`

Sets the font size.

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

#### Default

```ts
undefined
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`fontSize`](EditorConfig.md#fontsize)

#### Defined in

[models.ts:761](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L761)

***

### formatOnsave

> **formatOnsave**: `boolean`

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

#### Default

```ts
false
```

#### Defined in

[models.ts:676](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L676)

***

### layout

> **layout**: `undefined` \| `"horizontal"` \| `"vertical"` \| `"responsive"`

Sets the app layout to horizontal or vertical.
If set to `"responsive"` (the default) or `undefined`,
the layout is vertical in small screens when the playground height is larger than its width,
otherwise horizontal.

#### Default

```ts
"responsive"
```

#### Defined in

[models.ts:685](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L685)

***

### lineNumbers

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

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

#### Default

```ts
true
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`lineNumbers`](EditorConfig.md#linenumbers)

#### Defined in

[models.ts:783](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L783)

***

### recoverUnsaved

> **recoverUnsaved**: `boolean`

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

#### Default

```ts
true
```

#### Defined in

[models.ts:691](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L691)

***

### semicolons

> **semicolons**: `boolean`

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

#### Default

```ts
true
```

#### Inherited from

[`FormatterConfig`](FormatterConfig.md).[`semicolons`](FormatterConfig.md#semicolons)

#### Defined in

[models.ts:838](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L838)

***

### showSpacing

> **showSpacing**: `boolean`

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

#### Default

```ts
false
```

#### Defined in

[models.ts:697](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L697)

***

### singleQuote

> **singleQuote**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`FormatterConfig`](FormatterConfig.md).[`singleQuote`](FormatterConfig.md#singlequote)

#### Defined in

[models.ts:843](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L843)

***

### tabSize

> **tabSize**: `number`

The number of spaces per indentation-level.

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

#### Default

```ts
2
```

#### Inherited from

[`FormatterConfig`](FormatterConfig.md).[`tabSize`](FormatterConfig.md#tabsize)

#### Defined in

[models.ts:777](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L777)

***

### theme

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

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

#### Default

```ts
"dark"
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`theme`](EditorConfig.md#theme)

#### Defined in

[models.ts:728](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L728)

***

### themeColor

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

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

#### Default

```ts
undefined
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`themeColor`](EditorConfig.md#themecolor)

#### Defined in

[models.ts:735](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L735)

***

### trailingComma

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

#### Inherited from

[`FormatterConfig`](FormatterConfig.md).[`trailingComma`](FormatterConfig.md#trailingcomma)

#### Defined in

[models.ts:849](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L849)

***

### useTabs

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

#### Inherited from

[`FormatterConfig`](FormatterConfig.md).[`useTabs`](FormatterConfig.md#usetabs)

#### Defined in

[models.ts:769](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L769)

***

### welcome

> **welcome**: `boolean`

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

#### Defined in

[models.ts:702](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L702)

***

### wordWrap

> **wordWrap**: `boolean`

Enables word-wrap for long lines.

#### Default

```ts
false
```

#### Inherited from

[`EditorConfig`](EditorConfig.md).[`wordWrap`](EditorConfig.md#wordwrap)

#### Defined in

[models.ts:789](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L789)

---



# Type Alias: APICommands

> **APICommands**: `"setBroadcastToken"` \| `"showVersion"`

## Defined in

[models.ts:280](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L280)

---



# Type Alias: AppLanguage

> **AppLanguage**: `"auto"` \| `"ar"` \| `"de"` \| `"en"` \| `"es"` \| `"fr"` \| `"hi"` \| `"it"` \| `"ja"` \| `"pt"` \| `"ru"` \| `"ur"` \| `"zh-CN"`

## Defined in

[models.ts:1778](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1778)

---



# Type Alias: CDN

> **CDN**: `"jspm"` \| `"skypack"` \| `"jsdelivr"` \| `"fastly.jsdelivr"` \| `"gcore.jsdelivr"` \| `"testingcf.jsdelivr"` \| `"jsdelivr.b-cdn"` \| `"jsdelivr.gh"` \| `"fastly.jsdelivr.gh"` \| `"gcore.jsdelivr.gh"` \| `"testingcf.jsdelivr.gh"` \| `"jsdelivr.b-cdn.gh"` \| `"jsdelivr.esm"` \| `"fastly.jsdelivr.esm"` \| `"gcore.jsdelivr.esm"` \| `"testingcf.jsdelivr.esm"` \| `"jsdelivr.b-cdn.esm"` \| `"esm.run"` \| `"esm.sh"` \| `"esbuild"` \| `"bundle.run"` \| `"unpkg"` \| `"npmcdn"` \| `"statically"`

## Defined in

[models.ts:1861](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1861)

---



# Type Alias: CodejarTheme

> **CodejarTheme**: `"a11y-dark"` \| `"atom-dark"` \| `"base16-ateliersulphurpool-light"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"cb"` \| `"coldark-cold"` \| `"coldark-dark"` \| `"coy"` \| `"coy-without-shadows"` \| `"darcula"` \| `"dark"` \| `"dracula"` \| `"duotone-dark"` \| `"duotone-earth"` \| `"duotone-forest"` \| `"duotone-light"` \| `"duotone-sea"` \| `"duotone-space"` \| `"funky"` \| `"ghcolors"` \| `"gruvbox-dark"` \| `"gruvbox-light"` \| `"holi-theme"` \| `"hopscotch"` \| `"laserwave"` \| `"lucario"` \| `"material-dark"` \| `"material-light"` \| `"material-oceanic"` \| `"monochrome"` \| `"monochrome-dark"` \| `"night-owl"` \| `"nord"` \| `"nord-2"` \| `"okaidia"` \| `"one-dark"` \| `"one-light"` \| `"pojoaque"` \| `"shades-of-purple"` \| `"solarized-dark-atom"` \| `"solarized-light"` \| `"synthwave84"` \| `"tomorrow"` \| `"twilight"` \| `"vs"` \| `"vsc-dark-plus"` \| `"xonokai"` \| `"z-touchs"`

## Defined in

[models.ts:1687](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1687)

---



# Type Alias: CodemirrorTheme

> **CodemirrorTheme**: `"amy"` \| `"aura"` \| `"ayu-light"` \| `"barf"` \| `"basic-light"` \| `"basic-dark"` \| `"bespin"` \| `"birds-of-paradise"` \| `"boys-and-girls"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"clouds"` \| `"cm-light"` \| `"cobalt"` \| `"cool-glow"` \| `"dracula"` \| `"espresso"` \| `"github-dark"` \| `"github-light"` \| `"gruvbox-dark"` \| `"gruvbox-light"` \| `"material-dark"` \| `"material-light"` \| `"monochrome"` \| `"monochrome-dark"` \| `"noctis-lilac"` \| `"nord"` \| `"one-dark"` \| `"rose-pine-dawn"` \| `"smoothy"` \| `"solarized-light"` \| `"solarized-dark"` \| `"tokyo-night"` \| `"tokyo-night-day"` \| `"tokyo-night-storm"` \| `"tomorrow"`

## Defined in

[models.ts:1647](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1647)

---



# Type Alias: CssPresetId

> **CssPresetId**: `""` \| `"normalize.css"` \| `"reset-css"`

## Defined in

[models.ts:1269](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1269)

---



# Type Alias: EditorId

> **EditorId**: `"markup"` \| `"style"` \| `"script"`

## Defined in

[models.ts:1168](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1168)

---



# Type Alias: EditorTheme

> **EditorTheme**: [`MonacoTheme`](MonacoTheme.md) \| [`CodemirrorTheme`](CodemirrorTheme.md) \| [`CodejarTheme`](CodejarTheme.md) \| \`$\{MonacoTheme\}@$\{Theme\}\` \| \`$\{CodemirrorTheme\}@$\{Theme\}\` \| \`$\{CodejarTheme\}@$\{Theme\}\` \| \`monaco:$\{MonacoTheme\}\` \| \`codemirror:$\{CodemirrorTheme\}\` \| \`codejar:$\{CodejarTheme\}\` \| \`monaco:$\{MonacoTheme\}@$\{Theme\}\` \| \`codemirror:$\{CodemirrorTheme\}@$\{Theme\}\` \| \`codejar:$\{CodejarTheme\}@$\{Theme\}\`

## Defined in

[models.ts:1740](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1740)

---



# Type Alias: MonacoTheme

> **MonacoTheme**: `"active4d"` \| `"all-hallows-eve"` \| `"amy"` \| `"birds-of-paradise"` \| `"blackboard"` \| `"brilliance-black"` \| `"brilliance-dull"` \| `"catppuccin-latte"` \| `"catppuccin-frappe"` \| `"catppuccin-macchiato"` \| `"catppuccin-mocha"` \| `"chrome-devtools"` \| `"clouds-midnight"` \| `"clouds"` \| `"cobalt"` \| `"cobalt2"` \| `"custom-vs-light"` \| `"custom-vs-dark"` \| `"dawn"` \| `"dracula"` \| `"dreamweaver"` \| `"eiffel"` \| `"espresso-libre"` \| `"github"` \| `"github-dark"` \| `"github-light"` \| `"hc-black"` \| `"hc-light"` \| `"idle"` \| `"idlefingers"` \| `"iplastic"` \| `"katzenmilch"` \| `"krtheme"` \| `"kuroir"` \| `"lazy"` \| `"magicwb-amiga"` \| `"merbivore-soft"` \| `"merbivore"` \| `"monochrome"` \| `"monochrome-dark"` \| `"monokai"` \| `"monokai-bright"` \| `"monoindustrial"` \| `"night-owl"` \| `"nord"` \| `"oceanic-next"` \| `"pastels-on-dark"` \| `"slush-and-poppies"` \| `"solarized-dark"` \| `"solarized-light"` \| `"spacecadet"` \| `"sunburst"` \| `"textmate-mac-classic"` \| `"tomorrow"` \| `"tomorrow-night"` \| `"tomorrow-night-blue"` \| `"tomorrow-night-bright"` \| `"tomorrow-night-eighties"` \| `"twilight"` \| `"upstream-sunburst"` \| `"vibrant-ink"` \| `"vs"` \| `"vs-dark"` \| `"xcode-default"` \| `"zenburnesque"`

## Defined in

[models.ts:1580](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1580)

---



# Type Alias: Processor

> **Processor**: `"postcss"` \| `"postcssImportUrl"` \| `"tailwindcss"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`

## Defined in

[models.ts:1226](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1226)

---



# Type Alias: TemplateName

> **TemplateName**: `"blank"` \| `"javascript"` \| `"typescript"` \| `"react"` \| `"react-native"` \| `"vue2"` \| `"vue"` \| `"angular"` \| `"preact"` \| `"svelte"` \| `"solid"` \| `"lit"` \| `"stencil"` \| `"mdx"` \| `"astro"` \| `"riot"` \| `"malina"` \| `"jquery"` \| `"backbone"` \| `"knockout"` \| `"jest"` \| `"jest-react"` \| `"bootstrap"` \| `"tailwindcss"` \| `"shadcn-ui"` \| `"daisyui"` \| `"d3"` \| `"phaser"` \| `"coffeescript"` \| `"livescript"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"rescript"` \| `"reason"` \| `"ocaml"` \| `"python"` \| `"pyodide"` \| `"python-wasm"` \| `"r"` \| `"ruby"` \| `"ruby-wasm"` \| `"go"` \| `"php"` \| `"php-wasm"` \| `"cpp"` \| `"clang"` \| `"cpp-wasm"` \| `"java"` \| `"csharp-wasm"` \| `"perl"` \| `"lua"` \| `"lua-wasm"` \| `"teal"` \| `"fennel"` \| `"julia"` \| `"scheme"` \| `"commonlisp"` \| `"clojurescript"` \| `"gleam"` \| `"tcl"` \| `"markdown"` \| `"assemblyscript"` \| `"wat"` \| `"sql"` \| `"postgresql"` \| `"prolog"` \| `"blockly"` \| `"diagrams"`

## Defined in

[models.ts:1376](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1376)

---



# Type Alias: Theme

> **Theme**: `"light"` \| `"dark"`

## Defined in

[models.ts:1926](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1926)

---



# Type Alias: ToolsPaneStatus

> **ToolsPaneStatus**: `"closed"` \| `"open"` \| `"full"` \| `"none"` \| `""`

## Defined in

[models.ts:1456](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1456)

---



# Type Alias: WatchCode()

> **WatchCode**: (`event`, `fn`) => `object`

Called when the playground "content" is changed (see [`getCode`](https://livecodes.io/docs/sdk/js-ts#getcode) and [`getConfig`](https://livecodes.io/docs/sdk/js-ts#getcode)).

This includes changes in:
- Code (in editors)
- Editor [languages](https://livecodes.io/docs/languages/)
- [CSS processors](https://livecodes.io/docs/features/css#css-processors)
- [External resources](https://livecodes.io/docs/features/external-resources)
- Project info (e.g. allows adding content in page head and attributes to `` element)
- [Custom settings](https://livecodes.io/docs/advanced/custom-settings) (e.g. allows changing [import maps](https://livecodes.io/docs/features/module-resolution#custom-module-resolution))
- Project title
- [Test](https://livecodes.io/docs/features/tests) code

## Parameters

• **event**: `"code"`

• **fn**

## Returns

`object`

### remove()

> **remove**: () => `void`

#### Returns

`void`

## Defined in

[models.ts:248](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L248)

---



# Type Alias: WatchConsole()

> **WatchConsole**: (`event`, `fn`) => `object`

## Parameters

• **event**: `"console"`

• **fn**

## Returns

`object`

### remove()

> **remove**: () => `void`

#### Returns

`void`

## Defined in

[models.ts:253](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L253)

---



# Type Alias: WatchDestroy()

> **WatchDestroy**: (`event`, `fn`) => `object`

## Parameters

• **event**: `"destroy"`

• **fn**

## Returns

`object`

### remove()

> **remove**: () => `void`

#### Returns

`void`

## Defined in

[models.ts:263](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L263)

---



# Type Alias: WatchLoad()

> **WatchLoad**: (`event`, `fn`) => `object`

Called when the playground first loads.

## Parameters

• **event**: `"load"`

• **fn**

## Returns

`object`

### remove()

> **remove**: () => `void`

#### Returns

`void`

## Defined in

[models.ts:225](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L225)

---



# Type Alias: WatchReady()

> **WatchReady**: (`event`, `fn`) => `object`

Called when a new project is loaded (including when [imported](https://livecodes.io/docs/features/import)) and the playground is ready to run.

## Parameters

• **event**: `"ready"`

• **fn**

## Returns

`object`

### remove()

> **remove**: () => `void`

#### Returns

`void`

## Defined in

[models.ts:230](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L230)

---



# Type Alias: WatchTests()

> **WatchTests**: (`event`, `fn`) => `object`

## Parameters

• **event**: `"tests"`

• **fn**

## Returns

`object`

### remove()

> **remove**: () => `void`

#### Returns

`void`

## Defined in

[models.ts:258](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L258)

---



# Interface: Code

An object that contains the language, content and compiled code for each of the 3 [code editors](https://livecodes.io/docs/features/projects)
and the [result page](https://livecodes.io/docs/features/result) HTML.

See [docs](https://livecodes.io/docs/api/interfaces/Code) for details.

## Properties

### markup

> **markup**: `object`

#### compiled

> **compiled**: `string`

#### content

> **content**: `string`

#### language

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

#### Defined in

[models.ts:1908](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1908)

***

### result

> **result**: `string`

#### Defined in

[models.ts:1923](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1923)

***

### script

> **script**: `object`

#### compiled

> **compiled**: `string`

#### content

> **content**: `string`

#### language

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

#### Defined in

[models.ts:1918](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1918)

***

### style

> **style**: `object`

#### compiled

> **compiled**: `string`

#### content

> **content**: `string`

#### language

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

#### Defined in

[models.ts:1913](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L1913)

---



# Interface: Config

The playground [configuration object](https://livecodes.io/docs/configuration/configuration-object).

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

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

## Extends

- [`ContentConfig`](../internal/interfaces/ContentConfig.md).[`AppConfig`](../internal/interfaces/AppConfig.md).[`UserConfig`](../internal/interfaces/UserConfig.md)

## Properties

### activeEditor

> **activeEditor**: `undefined` \| [`EditorId`](../internal/type-aliases/EditorId.md)

Selects the active editor to show.

Defaults to the last used editor for user, otherwise `"markup"`

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`activeEditor`](../internal/interfaces/ContentConfig.md#activeeditor)

#### Defined in

[models.ts:455](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L455)

***

### allowLangChange

> **allowLangChange**: `boolean`

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

#### Default

```ts
true
```

#### Inherited from

[`AppConfig`](../internal/interfaces/AppConfig.md).[`allowLangChange`](../internal/interfaces/AppConfig.md#allowlangchange)

#### Defined in

[models.ts:603](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L603)

***

### appLanguage

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

Sets the app UI language used.

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`appLanguage`](../internal/interfaces/UserConfig.md#applanguage)

#### Defined in

[models.ts:707](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L707)

***

### autosave

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`autosave`](../internal/interfaces/UserConfig.md#autosave)

#### Defined in

[models.ts:656](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L656)

***

### autotest

> **autotest**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`autotest`](../internal/interfaces/UserConfig.md#autotest)

#### Defined in

[models.ts:662](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L662)

***

### autoupdate

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`autoupdate`](../internal/interfaces/UserConfig.md#autoupdate)

#### Defined in

[models.ts:649](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L649)

***

### closeBrackets

> **closeBrackets**: `boolean`

Use auto-complete to close brackets and quotes.

#### Default

```ts
true
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`closeBrackets`](../internal/interfaces/UserConfig.md#closebrackets)

#### Defined in

[models.ts:801](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L801)

***

### cssPreset

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

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`cssPreset`](../internal/interfaces/ContentConfig.md#csspreset)

#### Defined in

[models.ts:502](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L502)

***

### customSettings

> **customSettings**: `object`

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

#### adoc

> **adoc**: `any`

#### app.svelte

> **svelte**: `any`

#### app.vue

> **vue**: `any`

#### art

> **art**: `any`

#### art-template

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

#### as

> **as**: `any`

#### asc

> **asc**: `any`

#### asciidoc

> **asciidoc**: `any`

#### assemblyscript

> **assemblyscript**: `any`

#### astro

> **astro**: `any`

#### autoprefixer

> **autoprefixer**: `any`

#### babel

> **babel**: `any`

#### bb

> **bb**: `any`

#### bbcode

> **bbcode**: `any`

#### Binary

> **Binary**: `any`

#### blockly

> **blockly**: `any`

#### blockly.xml

> **xml**: `any`

#### c

> **c**: `any`

#### C

> **C**: `any`

#### c++

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

#### civet

> **civet**: `any`

#### clang

> **clang**: `any`

#### clang.cpp

> **cpp**: `any`

#### clio

> **clio**: `any`

#### clj

> **clj**: `any`

#### cljc

> **cljc**: `any`

#### cljs

> **cljs**: `any`

#### clojure

> **clojure**: `any`

#### clojurescript

> **clojurescript**: `any`

#### coffee

> **coffee**: `any`

#### coffeescript

> **coffeescript**: `any`

#### common-lisp

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

#### commonlisp

> **commonlisp**: `any`

#### convertCommonjs?

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

#### cp

> **cp**: `any`

#### cpp

> **cpp**: `any`

#### cpp-wasm

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

#### cppm

> **cppm**: `any`

#### cppwasm

> **cppwasm**: `any`

#### cs

> **cs**: `any`

#### cs-wasm

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

#### csharp

> **csharp**: `any`

#### csharp-wasm

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

#### css

> **css**: `any`

#### cssmodules

> **cssmodules**: `any`

#### cssnano

> **cssnano**: `any`

#### cwasm

> **cwasm**: `any`

#### cxx

> **cxx**: `any`

#### defaultCDN?

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

#### diagram

> **diagram**: `any`

#### diagrams

> **diagrams**: `any`

#### dot

> **dot**: `any`

#### edn

> **edn**: `any`

#### ejs

> **ejs**: `any`

#### es

> **es**: `any`

#### eta

> **eta**: `any`

#### fennel

> **fennel**: `any`

#### flow

> **flow**: `any`

#### fnl

> **fnl**: `any`

#### gleam

> **gleam**: `any`

#### go

> **go**: `any`

#### golang

> **golang**: `any`

#### graph

> **graph**: `any`

#### h

> **h**: `any`

#### haml

> **haml**: `any`

#### handlebars

> **handlebars**: `any`

#### hbs

> **hbs**: `any`

#### hpp

> **hpp**: `any`

#### htm

> **htm**: `any`

#### html

> **html**: `any`

#### ii

> **ii**: `any`

#### imba

> **imba**: `any`

#### imports?

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

#### ixx

> **ixx**: `any`

#### jade

> **jade**: `any`

#### java

> **java**: `any`

#### javascript

> **javascript**: `any`

#### jinja

> **jinja**: `any`

#### jl

> **jl**: `any`

#### js

> **js**: `any`

#### json

> **json**: `any`

#### jsx

> **jsx**: `any`

#### julia

> **julia**: `any`

#### less

> **less**: `any`

#### lightningcss

> **lightningcss**: `any`

#### liquid

> **liquid**: `any`

#### liquidjs

> **liquidjs**: `any`

#### lisp

> **lisp**: `any`

#### livescript

> **livescript**: `any`

#### ls

> **ls**: `any`

#### lua

> **lua**: `any`

#### lua-wasm

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

#### luawasm

> **luawasm**: `any`

#### malina

> **malina**: `any`

#### malinajs

> **malinajs**: `any`

#### mapImports?

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

#### markdown

> **markdown**: `any`

#### md

> **md**: `any`

#### mdown

> **mdown**: `any`

#### mdx

> **mdx**: `any`

#### mjml

> **mjml**: `any`

#### mkdn

> **mkdn**: `any`

#### ml

> **ml**: `any`

#### mli

> **mli**: `any`

#### mustache

> **mustache**: `any`

#### njk

> **njk**: `any`

#### nunjucks

> **nunjucks**: `any`

#### ocaml

> **ocaml**: `any`

#### perl

> **perl**: `any`

#### pg

> **pg**: `any`

#### pg.sql

> **sql**: `any`

#### pglite

> **pglite**: `any`

#### pglite.sql

> **sql**: `any`

#### pgsql

> **pgsql**: `any`

#### pgsql.sql

> **sql**: `any`

#### php

> **php**: `any`

#### php-wasm

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

#### phpwasm

> **phpwasm**: `any`

#### pintora

> **pintora**: `any`

#### pl

> **pl**: `any`

#### plt

> **plt**: `any`

#### pm

> **pm**: `any`

#### postcss

> **postcss**: `any`

#### postcssImportUrl

> **postcssImportUrl**: `any`

#### postcssPresetEnv

> **postcssPresetEnv**: `any`

#### postgre.sql

> **sql**: `any`

#### postgres

> **postgres**: `any`

#### postgresql

> **postgresql**: `any`

#### postgresql.sql

> **sql**: `any`

#### prolog

> **prolog**: `any`

#### prolog.pl

> **pl**: `any`

#### pug

> **pug**: `any`

#### purgecss

> **purgecss**: `any`

#### py

> **py**: `any`

#### py-wasm

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

#### py3

> **py3**: `any`

#### pyodide

> **pyodide**: `any`

#### python

> **python**: `any`

#### python-wasm

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

#### pythonwasm

> **pythonwasm**: `any`

#### pywasm

> **pywasm**: `any`

#### r

> **r**: `any`

#### r-wasm

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

#### rb

> **rb**: `any`

#### re

> **re**: `any`

#### react

> **react**: `any`

#### react-jsx

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

#### react-native

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

#### react-native-tsx

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

#### react-native.jsx

> **jsx**: `any`

#### react-native.tsx

> **tsx**: `any`

#### react-tsx

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

#### react.jsx

> **jsx**: `any`

#### react.tsx

> **tsx**: `any`

#### reason

> **reason**: `any`

#### rei

> **rei**: `any`

#### res

> **res**: `any`

#### rescript

> **rescript**: `any`

#### resi

> **resi**: `any`

#### rich

> **rich**: `any`

#### richtext

> **richtext**: `any`

#### riot

> **riot**: `any`

#### riotjs

> **riotjs**: `any`

#### rlang

> **rlang**: `any`

#### rstats

> **rstats**: `any`

#### rte

> **rte**: `any`

#### rte.html

> **html**: `any`

#### ruby

> **ruby**: `any`

#### ruby-wasm

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

#### rubywasm

> **rubywasm**: `any`

#### sass

> **sass**: `any`

#### scheme

> **scheme**: `any`

#### scm

> **scm**: `any`

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

#### scss

> **scss**: `any`

#### solid

> **solid**: `any`

#### solid.jsx

> **jsx**: `any`

#### solid.tsx

> **tsx**: `any`

#### sql

> **sql**: `any`

#### sqlite

> **sqlite**: `any`

#### sqlite3

> **sqlite3**: `any`

#### stencil

> **stencil**: `any`

#### stencil.tsx

> **tsx**: `any`

#### styl

> **styl**: `any`

#### stylis

> **stylis**: `any`

#### stylus

> **stylus**: `any`

#### sucrase

> **sucrase**: `any`

#### svelte

> **svelte**: `any`

#### svelte-app

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

#### tailwindcss

> **tailwindcss**: `any`

#### tcl

> **tcl**: `any`

#### teal

> **teal**: `any`

#### template?

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

#### template.data?

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

#### template.prerender?

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

#### tl

> **tl**: `any`

#### tokencss

> **tokencss**: `any`

#### ts

> **ts**: `any`

#### tsx

> **tsx**: `any`

#### twig

> **twig**: `any`

#### types?

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

#### typescript

> **typescript**: `any`

#### unocss

> **unocss**: `any`

#### vento

> **vento**: `any`

#### vto

> **vto**: `any`

#### vue

> **vue**: `any`

#### vue-app

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

#### vue2

> **vue2**: `any`

#### vue3

> **vue3**: `any`

#### wasm

> **wasm**: `any`

#### wasm.cpp

> **cpp**: `any`

#### wasm.cs

> **cs**: `any`

#### wasm.lua

> **lua**: `any`

#### wasm.php

> **php**: `any`

#### wasm.py

> **py**: `any`

#### wasm.rb

> **rb**: `any`

#### wast

> **wast**: `any`

#### wat

> **wat**: `any`

#### webassembly

> **webassembly**: `any`

#### windicss

> **windicss**: `any`

#### xht

> **xht**: `any`

#### xml

> **xml**: `any`

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`customSettings`](../internal/interfaces/ContentConfig.md#customsettings)

#### Defined in

[models.ts:514](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L514)

***

### delay

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`delay`](../internal/interfaces/UserConfig.md#delay)

#### Defined in

[models.ts:670](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L670)

***

### description

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`description`](../internal/interfaces/ContentConfig.md#description)

#### Defined in

[models.ts:425](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L425)

***

### editor

> **editor**: `undefined` \| `"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
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`editor`](../internal/interfaces/UserConfig.md#editor)

#### Defined in

[models.ts:722](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L722)

***

### editorMode

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

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`editorMode`](../internal/interfaces/UserConfig.md#editormode)

#### Defined in

[models.ts:812](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L812)

***

### editorTheme

> **editorTheme**: `undefined` \| `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"]
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`editorTheme`](../internal/interfaces/UserConfig.md#editortheme)

#### Defined in

[models.ts:748](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L748)

***

### emmet

> **emmet**: `boolean`

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

#### Default

```ts
true
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`emmet`](../internal/interfaces/UserConfig.md#emmet)

#### Defined in

[models.ts:807](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L807)

***

### enableAI

> **enableAI**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`enableAI`](../internal/interfaces/UserConfig.md#enableai)

#### Defined in

[models.ts:818](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L818)

***

### foldRegions

> **foldRegions**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`foldRegions`](../internal/interfaces/UserConfig.md#foldregions)

#### Defined in

[models.ts:795](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L795)

***

### fontFamily

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

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`fontFamily`](../internal/interfaces/UserConfig.md#fontfamily)

#### Defined in

[models.ts:753](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L753)

***

### fontSize

> **fontSize**: `undefined` \| `number`

Sets the font size.

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

#### Default

```ts
undefined
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`fontSize`](../internal/interfaces/UserConfig.md#fontsize)

#### Defined in

[models.ts:761](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L761)

***

### formatOnsave

> **formatOnsave**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`formatOnsave`](../internal/interfaces/UserConfig.md#formatonsave)

#### Defined in

[models.ts:676](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L676)

***

### head

> **head**: `string`

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

#### Default

```ts
'\n'
```

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`head`](../internal/interfaces/ContentConfig.md#head)

#### Defined in

[models.ts:431](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L431)

***

### htmlAttrs

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

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

#### Example

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`htmlAttrs`](../internal/interfaces/ContentConfig.md#htmlattrs)

#### Defined in

[models.ts:440](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L440)

***

### imports

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

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`imports`](../internal/interfaces/ContentConfig.md#imports-1)

#### Defined in

[models.ts:540](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L540)

***

### languages

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

List of enabled languages.

Defaults to all supported languages in full app and only current editor languages in [embeds](https://livecodes.io/docs/features/embeds).

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`languages`](../internal/interfaces/ContentConfig.md#languages)

#### Defined in

[models.ts:462](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L462)

***

### layout

> **layout**: `undefined` \| `"horizontal"` \| `"vertical"` \| `"responsive"`

Sets the app layout to horizontal or vertical.
If set to `"responsive"` (the default) or `undefined`,
the layout is vertical in small screens when the playground height is larger than its width,
otherwise horizontal.

#### Default

```ts
"responsive"
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`layout`](../internal/interfaces/UserConfig.md#layout)

#### Defined in

[models.ts:685](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L685)

***

### lineNumbers

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

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

#### Default

```ts
true
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`lineNumbers`](../internal/interfaces/UserConfig.md#linenumbers)

#### Defined in

[models.ts:783](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L783)

***

### markup

> **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.

#### content?

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

The initial content of the code editor.

##### Default

```ts
""
```

#### contentUrl?

> `optional` **contentUrl**: `string`

A URL to load `content` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `content` property had no value.

#### foldedLines?

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

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

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

#### hiddenContent?

> `optional` **hiddenContent**: `string`

Hidden content that gets evaluated without being visible in the code editor.

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

#### hiddenContentUrl?

> `optional` **hiddenContentUrl**: `string`

A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `hiddenContent` property had no value.

#### hideTitle?

> `optional` **hideTitle**: `boolean`

If `true`, the title of the code editor is hidden, however its code is still evaluated.

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

#### language

> **language**: [`Language`](../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)

#### order?

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

The order of the editor in the UI.

##### Default

```ts
0
```

#### position?

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

The initial position of the cursor in the code editor.

##### Example

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

#### selector?

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

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

#### title?

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

If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).

#### Default

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`markup`](../internal/interfaces/ContentConfig.md#markup)

#### Defined in

[models.ts:470](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L470)

***

### mode

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

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

#### Default

```ts
"full"
```

#### Inherited from

[`AppConfig`](../internal/interfaces/AppConfig.md).[`mode`](../internal/interfaces/AppConfig.md#mode)

#### Defined in

[models.ts:615](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L615)

***

### processors

> **processors**: [`Processor`](../internal/type-aliases/Processor.md)[]

List of enabled [CSS processors](https://livecodes.io/docs/features/css/#css-processors).

For the list of available processors, see [Processor](https://livecodes.io/docs/api/internal/type-aliases/Processor)

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`processors`](../internal/interfaces/ContentConfig.md#processors)

#### Defined in

[models.ts:509](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L509)

***

### readonly

> **readonly**: `boolean`

If `true`, editors are loaded in read-only mode, where the user is not allowed to change the code.

By default, when readonly is set to true, the light-weight code editor [CodeJar](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
```

#### Inherited from

[`AppConfig`](../internal/interfaces/AppConfig.md).[`readonly`](../internal/interfaces/AppConfig.md#readonly)

#### Defined in

[models.ts:597](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L597)

***

### recoverUnsaved

> **recoverUnsaved**: `boolean`

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

#### Default

```ts
true
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`recoverUnsaved`](../internal/interfaces/UserConfig.md#recoverunsaved)

#### Defined in

[models.ts:691](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L691)

***

### script

> **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.

#### content?

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

The initial content of the code editor.

##### Default

```ts
""
```

#### contentUrl?

> `optional` **contentUrl**: `string`

A URL to load `content` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `content` property had no value.

#### foldedLines?

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

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

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

#### hiddenContent?

> `optional` **hiddenContent**: `string`

Hidden content that gets evaluated without being visible in the code editor.

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

#### hiddenContentUrl?

> `optional` **hiddenContentUrl**: `string`

A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `hiddenContent` property had no value.

#### hideTitle?

> `optional` **hideTitle**: `boolean`

If `true`, the title of the code editor is hidden, however its code is still evaluated.

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

#### language

> **language**: [`Language`](../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)

#### order?

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

The order of the editor in the UI.

##### Default

```ts
0
```

#### position?

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

The initial position of the cursor in the code editor.

##### Example

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

#### selector?

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

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

#### title?

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

If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).

#### Default

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`script`](../internal/interfaces/ContentConfig.md#script)

#### Defined in

[models.ts:486](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L486)

***

### scripts

> **scripts**: `string`[]

List of URLs for [external scripts](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result).

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`scripts`](../internal/interfaces/ContentConfig.md#scripts)

#### Defined in

[models.ts:496](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L496)

***

### semicolons

> **semicolons**: `boolean`

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

#### Default

```ts
true
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`semicolons`](../internal/interfaces/UserConfig.md#semicolons)

#### Defined in

[models.ts:838](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L838)

***

### showSpacing

> **showSpacing**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`showSpacing`](../internal/interfaces/UserConfig.md#showspacing)

#### Defined in

[models.ts:697](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L697)

***

### singleQuote

> **singleQuote**: `boolean`

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

#### Default

```ts
false
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`singleQuote`](../internal/interfaces/UserConfig.md#singlequote)

#### Defined in

[models.ts:843](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L843)

***

### style

> **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.

#### content?

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

The initial content of the code editor.

##### Default

```ts
""
```

#### contentUrl?

> `optional` **contentUrl**: `string`

A URL to load `content` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `content` property had no value.

#### foldedLines?

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

Lines that get folded when the editor loads.

This can be used for less relevant content.

##### Example

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

#### hiddenContent?

> `optional` **hiddenContent**: `string`

Hidden content that gets evaluated without being visible in the code editor.

This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)

#### hiddenContentUrl?

> `optional` **hiddenContentUrl**: `string`

A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.

The URL is only fetched if `hiddenContent` property had no value.

#### hideTitle?

> `optional` **hideTitle**: `boolean`

If `true`, the title of the code editor is hidden, however its code is still evaluated.

This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).

#### language

> **language**: [`Language`](../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)

#### order?

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

The order of the editor in the UI.

##### Default

```ts
0
```

#### position?

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

The initial position of the cursor in the code editor.

##### Example

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

#### selector?

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

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

#### title?

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

If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).

#### Default

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`style`](../internal/interfaces/ContentConfig.md#style)

#### Defined in

[models.ts:478](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L478)

***

### stylesheets

> **stylesheets**: `string`[]

List of URLs for [external stylesheets](https://livecodes.io/docs/features/external-resources) to add to the [result page](https://livecodes.io/docs/features/result).

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`stylesheets`](../internal/interfaces/ContentConfig.md#stylesheets)

#### Defined in

[models.ts:491](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L491)

***

### tabSize

> **tabSize**: `number`

The number of spaces per indentation-level.

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

#### Default

```ts
2
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`tabSize`](../internal/interfaces/UserConfig.md#tabsize)

#### Defined in

[models.ts:777](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L777)

***

### tags

> **tags**: `string`[]

Project tags.
Used in [project](https://livecodes.io/docs/features/projects) filter and search.

#### Default

```ts
[]
```

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`tags`](../internal/interfaces/ContentConfig.md#tags)

#### Defined in

[models.ts:447](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L447)

***

### tests

> **tests**: `undefined` \| `object`

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`tests`](../internal/interfaces/ContentConfig.md#tests)

#### Defined in

[models.ts:576](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L576)

***

### theme

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

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

#### Default

```ts
"dark"
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`theme`](../internal/interfaces/UserConfig.md#theme)

#### Defined in

[models.ts:728](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L728)

***

### themeColor

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

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

#### Default

```ts
undefined
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`themeColor`](../internal/interfaces/UserConfig.md#themecolor)

#### Defined in

[models.ts:735](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L735)

***

### title

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`title`](../internal/interfaces/ContentConfig.md#title-3)

#### Defined in

[models.ts:418](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L418)

***

### tools

> **tools**: `Partial`\<`object`\>

Sets enabled and active tools and status of [tools pane](https://livecodes.io/docs/features/tools-pane).

#### Type declaration

##### active

> **active**: `""` \| `"console"` \| `"compiled"` \| `"tests"`

##### enabled

> **enabled**: `"all"` \| (`"console"` \| `"compiled"` \| `"tests"`)[]

##### status

> **status**: [`ToolsPaneStatus`](../internal/type-aliases/ToolsPaneStatus.md)

#### Default

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

#### Example

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

#### Inherited from

[`AppConfig`](../internal/interfaces/AppConfig.md).[`tools`](../internal/interfaces/AppConfig.md#tools)

#### Defined in

[models.ts:631](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L631)

***

### trailingComma

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`trailingComma`](../internal/interfaces/UserConfig.md#trailingcomma)

#### Defined in

[models.ts:849](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L849)

***

### types

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

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`types`](../internal/interfaces/ContentConfig.md#types-1)

#### Defined in

[models.ts:570](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L570)

***

### useTabs

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`useTabs`](../internal/interfaces/UserConfig.md#usetabs)

#### Defined in

[models.ts:769](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L769)

***

### version

> `readonly` **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.

#### Inherited from

[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`version`](../internal/interfaces/ContentConfig.md#version)

#### Defined in

[models.ts:583](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L583)

***

### view?

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

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

#### Default

```ts
"split"
```

#### Inherited from

[`AppConfig`](../internal/interfaces/AppConfig.md).[`view`](../internal/interfaces/AppConfig.md#view)

#### Defined in

[models.ts:609](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L609)

***

### welcome

> **welcome**: `boolean`

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

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`welcome`](../internal/interfaces/UserConfig.md#welcome)

#### Defined in

[models.ts:702](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L702)

***

### wordWrap

> **wordWrap**: `boolean`

Enables word-wrap for long lines.

#### Default

```ts
false
```

#### Inherited from

[`UserConfig`](../internal/interfaces/UserConfig.md).[`wordWrap`](../internal/interfaces/UserConfig.md#wordwrap)

#### Defined in

[models.ts:789](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L789)

***

### zoom

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

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

#### Inherited from

[`AppConfig`](../internal/interfaces/AppConfig.md).[`zoom`](../internal/interfaces/AppConfig.md#zoom)

#### Defined in

[models.ts:640](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L640)

---



# 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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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) `` element.

##### Default

```ts
'\n'
```

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

```
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\ & 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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/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/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L396)

---



# Interface: Playground

An object that represents the LiveCodes playground instance.

The object exposes multiple [methods](https://livecodes.io/docs/sdk/js-ts/#sdk-methods) that can be used to interact with the playground.

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

## Extends

- [`API`](../internal/interfaces/API.md)

## Properties

### destroy()

> **destroy**: () => `Promise`\<`void`\>

Destroys the playground instance, and removes event listeners.

Further call to any SDK methods throws an error.

#### Returns

`Promise`\<`void`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.destroy();
  // playground destroyed
  // any further SDK call throws an error
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`destroy`](../internal/interfaces/API.md#destroy)

#### Defined in

[models.ts:211](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L211)

***

### exec()

> **exec**: (`command`, ...`args`) => `Promise`\<`object` \| `object`\>

Executes custom commands, including: `"setBroadcastToken"` and `"showVersion"`.

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

#### Parameters

• **command**: [`APICommands`](../internal/type-aliases/APICommands.md)

• ...**args**: `any`[]

#### Returns

`Promise`\<`object` \| `object`\>

#### Inherited from

[`API`](../internal/interfaces/API.md).[`exec`](../internal/interfaces/API.md#exec)

#### Defined in

[models.ts:194](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L194)

***

### format()

> **format**: (`allEditors`?) => `Promise`\<`void`\>

Formats the code.

By default, the code in all editors (markup, style and script) is formatted.
To format only the active editor, the value `false` should be passed as an argument.

#### Parameters

• **allEditors?**: `boolean`

#### Returns

`Promise`\<`void`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.format();
  // code in editors is formatted
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`format`](../internal/interfaces/API.md#format)

#### Defined in

[models.ts:31](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L31)

***

### getCode()

> **getCode**: () => `Promise`\<[`Code`](Code.md)\>

Gets the playground code (including source code, source language and compiled code) for each editor (markup, style, script), in addition to result page HTML.

See [Code](https://livecodes.io/docs/api/interfaces/Code) for the structure of the returned object.

#### Returns

`Promise`\<[`Code`](Code.md)\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const code = await playground.getCode();

  // source code, language and compiled code for the script editor
  const { content, language, compiled } = code.script;

  // result page HTML
  const result = code.result;
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`getCode`](../internal/interfaces/API.md#getcode)

#### Defined in

[models.ts:105](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L105)

***

### getConfig()

> **getConfig**: (`contentOnly`?) => `Promise`\<[`Config`](Config.md)\>

Gets a [configuration object](https://livecodes.io/docs/configuration/configuration-object) representing the playground state.

This can be used to restore state if passed as an [EmbedOptions](https://livecodes.io/docs/sdk/js-ts#embed-options) property when [creating playgrounds](https://livecodes.io/docs/sdk/js-ts/#createplayground),
or can be manipulated and loaded in run-time using [`setConfig`](https://livecodes.io/docs/sdk/js-ts#setconfig) method.

#### Parameters

• **contentOnly?**: `boolean`

#### Returns

`Promise`\<[`Config`](Config.md)\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = await playground.getConfig();
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`getConfig`](../internal/interfaces/API.md#getconfig)

#### Defined in

[models.ts:64](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L64)

***

### getShareUrl()

> **getShareUrl**: (`shortUrl`?) => `Promise`\<`string`\>

Gets a [share url](https://livecodes.io/docs/features/share) for the current project.

By default, the url has a long query string representing the compressed encoded config object.
If the argument `shortUrl` was set to `true`, a short url is generated.

#### Parameters

• **shortUrl?**: `boolean`

#### Returns

`Promise`\<`string`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const longUrl = await playground.getShareUrl();
  const shortUrl = await playground.getShareUrl(true);
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`getShareUrl`](../internal/interfaces/API.md#getshareurl)

#### Defined in

[models.ts:48](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L48)

***

### load()

> **load**: () => `Promise`\<`void`\>

Loads the playground, if not already loaded.

When the embed option [loading](https://livecodes.io/docs/sdk/js-ts#loading) is set to `"click"`, the playground is not loaded automatically.
Instead, a screen is shown with "Click to load" button. Calling the SDK method `load()` allows loading the playground.

If the playground was not loaded, calling any other method will load the playground first before executing.

#### Returns

`Promise`\<`void`\>

#### Defined in

[models.ts:298](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L298)

***

### ~~onChange()~~

> **onChange**: (`fn`) => `object`

Runs a callback function when code changes.

#### Parameters

• **fn**

#### Returns

`object`

##### ~~remove()~~

> **remove**: () => `void`

###### Returns

`void`

#### Deprecated

Use [`watch`](https://livecodes.io/docs/sdk/js-ts#watch) method instead.

#### Inherited from

[`API`](../internal/interfaces/API.md).[`onChange`](../internal/interfaces/API.md#onchange)

#### Defined in

[models.ts:142](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L142)

***

### run()

> **run**: () => `Promise`\<`void`\>

Runs the [result page](https://livecodes.io/docs/features/result) (after any required compilation for code).

#### Returns

`Promise`\<`void`\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  await playground.run();
  // new result page is displayed
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`run`](../internal/interfaces/API.md#run)

#### Defined in

[models.ts:14](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L14)

***

### runTests()

> **runTests**: () => `Promise`\<`object`\>

Runs project [tests](https://livecodes.io/docs/features/tests) (if present) and gets test results.

#### Returns

`Promise`\<`object`\>

##### results

> **results**: [`TestResult`](../internal/interfaces/TestResult.md)[]

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const { results } = await playground.runTests();
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`runTests`](../internal/interfaces/API.md#runtests)

#### Defined in

[models.ts:135](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L135)

***

### setConfig()

> **setConfig**: (`config`) => `Promise`\<[`Config`](Config.md)\>

Loads a new project using the passed configuration object.

#### Parameters

• **config**: `Partial`\<[`Config`](Config.md)\>

#### Returns

`Promise`\<[`Config`](Config.md)\>

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then(async (playground) => {
  const config = {
    markup: {
      language: "html",
      content: "Hello World!",
    },
  };
  const newConfig = await playground.setConfig(config);
  // new project loaded
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`setConfig`](../internal/interfaces/API.md#setconfig)

#### Defined in

[models.ts:84](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L84)

***

### show()

> **show**: (`panel`, `options`?) => `Promise`\<`void`\>

Shows the selected panel.

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

#### Parameters

• **panel**: `"result"` \| [`EditorId`](../internal/type-aliases/EditorId.md) \| `"console"` \| `"compiled"` \| `"tests"` \| `"editor"` \| `"toggle-result"`

• **options?**

• **options.column?**: `number`

• **options.full?**: `boolean`

• **options.line?**: `number`

• **options.zoom?**: `1` \| `0.5` \| `0.25`

#### Returns

`Promise`\<`void`\>

#### Example

```ts
await playground.show("style");
await playground.show("toggle-result");
await playground.show("result", { full: true });
await playground.show("script");
await playground.show("result", { zoom: 0.5 });
await playground.show("console", { full: true });
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`show`](../internal/interfaces/API.md#show)

#### Defined in

[models.ts:119](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L119)

***

### watch

> **watch**: [`WatchLoad`](../internal/type-aliases/WatchLoad.md) & [`WatchReady`](../internal/type-aliases/WatchReady.md) & [`WatchCode`](../internal/type-aliases/WatchCode.md) & [`WatchConsole`](../internal/type-aliases/WatchConsole.md) & [`WatchTests`](../internal/type-aliases/WatchTests.md) & [`WatchDestroy`](../internal/type-aliases/WatchDestroy.md)

Allows to watch for various playground events.
It takes 2 arguments: event name and a callback function that will be called on every event.

event name can be one of: `"load" | "ready" | "code" | "console" | "tests" | "destroy"`

In some events, the callback function will be called with an object that supplies relevant data to the callback function (e.g. code, console output, test results).

The watch method returns an object with a single method (`remove`), which when called will remove the callback from watching further events.

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

#### Example

```ts
import { createPlayground } from "livecodes";

createPlayground("#container").then((playground) => {
  const codeWatcher = playground.watch("code", ({ code, config }) => {
    // this will run on every code change
    console.log("code:", code);
    console.log("config:", config);
  });

  const consoleWatcher = playground.watch("console", ({ method, args }) => {
    // this will run on every console output
    console[method](...args);
  });

  const testsWatcher = playground.watch("tests", ({ results }) => {
    // this will run when tests run
    results.forEach((testResult) => {
      console.log("status:", testResult.status); // "pass", "fail" or "skip"
      console.log(testResult.errors); // array of errors as strings
    });
  });

  // then later
  codeWatcher.remove();
  consoleWatcher.remove();
  testsWatcher.remove();
  // events are no longer watched
});
```

#### Inherited from

[`API`](../internal/interfaces/API.md).[`watch`](../internal/interfaces/API.md#watch)

#### Defined in

[models.ts:187](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L187)

---



# Type Alias: Language

> **Language**: `"html"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"dot"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"stylus"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"json"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"flow"` \| `"ts"` \| `"jsx"` \| `"tsx"` \| `"react"` \| `"react-jsx"` \| `"react.jsx"` \| `"react-tsx"` \| `"react.tsx"` \| `"react-native"` \| `"react-native.jsx"` \| `"react-native-tsx"` \| `"react-native.tsx"` \| `"vue"` \| `"vue3"` \| `"vue2"` \| `"vue-app"` \| `"app.vue"` \| `"svelte"` \| `"svelte-app"` \| `"app.svelte"` \| `"stencil"` \| `"stencil.tsx"` \| `"solid"` \| `"solid.jsx"` \| `"solid.tsx"` \| `"riot"` \| `"riotjs"` \| `"malina"` \| `"malinajs"` \| `"xht"` \| `"coffeescript"` \| `"coffee"` \| `"livescript"` \| `"ls"` \| `"civet"` \| `"clio"` \| `"imba"` \| `"assemblyscript"` \| `"as"` \| `"python"` \| `"py"` \| `"pyodide"` \| `"python-wasm"` \| `"py-wasm"` \| `"pythonwasm"` \| `"pywasm"` \| `"py3"` \| `"wasm.py"` \| `"r"` \| `"rlang"` \| `"rstats"` \| `"r-wasm"` \| `"ruby"` \| `"rb"` \| `"ruby-wasm"` \| `"wasm.rb"` \| `"rubywasm"` \| `"go"` \| `"golang"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"teal"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"reason"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"`

Language name, alias or extension.

## Defined in

[models.ts:884](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/models.ts#L884)

---



# Function: createPlayground()

## createPlayground(container, options)

> **createPlayground**(`container`, `options`?): `Promise`\<[`Playground`](../interfaces/Playground.md)\>

Creates a LiveCodes playground.

### Parameters

• **container**: `string` \| `HTMLElement`

`HTMLElement` or a string representing a CSS selector. This is the container where the playground is rendered.
 If not found, an error is thrown (except in [headless mode](https://livecodes.io/docs/sdk/headless), in which this parameter is optional and can be omitted).

• **options?**: [`EmbedOptions`](../interfaces/EmbedOptions.md)

The [embed options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground (optional).

### Returns

`Promise`\<[`Playground`](../interfaces/Playground.md)\>

- A promise that resolves to a [`Playground`](https://livecodes.io/docs/api/interfaces/Playground/) object which exposes many [SDK methods](https://livecodes.io/docs/sdk/js-ts/#sdk-methods) that can be used to interact with the playground.

### Defined in

[index.ts:26](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/index.ts#L26)

## createPlayground(options)

> **createPlayground**(`options`): `Promise`\<[`Playground`](../interfaces/Playground.md)\>

### Parameters

• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) & `object`

### Returns

`Promise`\<[`Playground`](../interfaces/Playground.md)\>

### Defined in

[index.ts:30](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/index.ts#L30)

---



# Function: getPlaygroundUrl()

> **getPlaygroundUrl**(`options`): `string`

Gets the URL to a LiveCodes playground (as a string) from the provided [options](https://livecodes.io/docs/sdk/js-ts#embed-options).
This can be useful for providing links to run code in playgrounds.

## Parameters

• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) = `{}`

The [options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground.

## Returns

`string`

- The URL of the playground (as a string).

large objects like config and params are store in the url hash params while the rest are in the search params
unless config is a string in which case it is stored in searchParams

## Defined in

[index.ts:391](https://github.com/live-codes/livecodes/blob/20eb9b8331593156d8ae65b1f7d55b1d35bf7b33/src/sdk/index.ts#L391)
Hello Jotai

Enjoy coding!

Hello World!

Hello World!

Hello World!

Hello World!

Hello, {name}!

Page Title

Page Title

Page Title

Steps

Hello, LiveCodes!

Custom Root Element

Custom Root Element

Hello World
