{ 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. --- # 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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` #### csharp > **csharp**: `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` #### javascript > **javascript**: `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/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.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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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"` \| `"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"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"csharp"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"tailwindcss"` \| `"postcssImportUrl"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`)[] List of enabled languages. Defaults to all supported languages in full app and only current editor languages in [embeds](https://livecodes.io/docs/features/embeds). #### Defined in [models.ts:462](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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. #### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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. #### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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. #### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:791](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L791) *** ### editor > **editor**: `undefined` \| `"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 CodeJar is used in codeblocks, in lite mode and in readonly playgrounds. #### Default ```ts undefined ``` #### Defined in [models.ts:718](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L718) *** ### editorMode > **editorMode**: `undefined` \| `"vim"` \| `"emacs"` Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes). #### Defined in [models.ts:802](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L802) *** ### 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:744](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L744) *** ### emmet > **emmet**: `boolean` Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet). #### Default ```ts true ``` #### Defined in [models.ts:797](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L797) *** ### enableAI > **enableAI**: `boolean` If `true`, [AI code assistant](https://livecodes.io/docs/features/ai) is enabled. #### Default ```ts false ``` #### Defined in [models.ts:808](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L808) *** ### fontFamily > **fontFamily**: `undefined` \| `string` Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family. #### Defined in [models.ts:749](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L749) *** ### 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:757](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L757) *** ### lineNumbers > **lineNumbers**: `boolean` \| `"relative"` Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings). #### Default ```ts true ``` #### Defined in [models.ts:779](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L779) *** ### 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:773](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L773) *** ### 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:724](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L724) *** ### 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:731](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L731) *** ### 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:765](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L765) *** ### wordWrap > **wordWrap**: `boolean` Enables word-wrap for long lines. #### Default ```ts false ``` #### Defined in [models.ts:785](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L785) --- # Interface: EditorPosition ## Properties ### column? > `optional` **column**: `number` #### Defined in [models.ts:1141](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1141) *** ### lineNumber > **lineNumber**: `number` #### Defined in [models.ts:1140](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1140) --- # 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:828](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L828) *** ### 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:833](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L833) *** ### tabSize > **tabSize**: `number` The number of spaces per indentation-level. #### Default ```ts 2 ``` #### Defined in [models.ts:822](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L822) *** ### 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:839](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L839) *** ### useTabs > **useTabs**: `boolean` If `true`, lines are indented with tabs instead of spaces. #### Default ```ts false ``` #### Defined in [models.ts:816](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L816) --- # Interface: TestResult ## Properties ### duration > **duration**: `number` #### Defined in [models.ts:1947](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1947) *** ### errors > **errors**: `string`[] #### Defined in [models.ts:1948](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1948) *** ### status > **status**: `"fail"` \| `"pass"` \| `"skip"` #### Defined in [models.ts:1949](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1949) *** ### testPath > **testPath**: `string`[] #### Defined in [models.ts:1950](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1950) --- # 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:791](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L791) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L670) *** ### editor > **editor**: `undefined` \| `"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 CodeJar is used in codeblocks, in lite mode and in readonly playgrounds. #### Default ```ts undefined ``` #### Inherited from [`EditorConfig`](EditorConfig.md).[`editor`](EditorConfig.md#editor) #### Defined in [models.ts:718](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L718) *** ### 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:802](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L802) *** ### 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:744](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L744) *** ### 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:797](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L797) *** ### 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:808](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L808) *** ### 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:749](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L749) *** ### 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:757](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L757) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:779](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L779) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:828](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L828) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:833](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L833) *** ### 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:773](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L773) *** ### 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:724](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L724) *** ### 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:731](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L731) *** ### 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:839](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L839) *** ### 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:765](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L765) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:785](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L785) --- # Type Alias: APICommands > **APICommands**: `"setBroadcastToken"` \| `"showVersion"` ## Defined in [models.ts:280](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:1746](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1746) --- # 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:1829](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1829) --- # 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:1655](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1655) --- # 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:1615](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1615) --- # Type Alias: CssPresetId > **CssPresetId**: `""` \| `"normalize.css"` \| `"reset-css"` ## Defined in [models.ts:1244](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1244) --- # Type Alias: EditorId > **EditorId**: `"markup"` \| `"style"` \| `"script"` ## Defined in [models.ts:1144](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1144) --- # 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:1708](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1708) --- # 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:1548](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1548) --- # Type Alias: Processor > **Processor**: `"postcss"` \| `"postcssImportUrl"` \| `"tailwindcss"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"` ## Defined in [models.ts:1202](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1202) --- # 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"` \| `"perl"` \| `"lua"` \| `"lua-wasm"` \| `"teal"` \| `"fennel"` \| `"julia"` \| `"scheme"` \| `"commonlisp"` \| `"clojurescript"` \| `"gleam"` \| `"tcl"` \| `"markdown"` \| `"assemblyscript"` \| `"wat"` \| `"sql"` \| `"postgresql"` \| `"prolog"` \| `"blockly"` \| `"diagrams"` ## Defined in [models.ts:1349](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1349) --- # Type Alias: Theme > **Theme**: `"light"` \| `"dark"` ## Defined in [models.ts:1894](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1894) --- # Type Alias: ToolsPaneStatus > **ToolsPaneStatus**: `"closed"` \| `"open"` \| `"full"` \| `"none"` \| `""` ## Defined in [models.ts:1427](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1427) --- # 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:1876](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1876) *** ### result > **result**: `string` #### Defined in [models.ts:1891](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1891) *** ### script > **script**: `object` #### compiled > **compiled**: `string` #### content > **content**: `string` #### language > **language**: [`Language`](../type-aliases/Language.md) #### Defined in [models.ts:1886](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1886) *** ### style > **style**: `object` #### compiled > **compiled**: `string` #### content > **content**: `string` #### language > **language**: [`Language`](../type-aliases/Language.md) #### Defined in [models.ts:1881](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L1881) --- # 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:791](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L791) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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` #### csharp > **csharp**: `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` #### javascript > **javascript**: `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/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.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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L425) *** ### editor > **editor**: `undefined` \| `"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 CodeJar is used in codeblocks, in lite mode and in readonly playgrounds. #### Default ```ts undefined ``` #### Inherited from [`UserConfig`](../internal/interfaces/UserConfig.md).[`editor`](../internal/interfaces/UserConfig.md#editor) #### Defined in [models.ts:718](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L718) *** ### 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:802](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L802) *** ### 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:744](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L744) *** ### 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:797](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L797) *** ### 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:808](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L808) *** ### 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:749](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L749) *** ### 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:757](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L757) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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"` \| `"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"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"csharp"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"tailwindcss"` \| `"postcssImportUrl"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`)[] List of enabled languages. Defaults to all supported languages in full app and only current editor languages in [embeds](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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:779](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L779) *** ### 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. #### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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. #### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:828](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L828) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:833](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L833) *** ### 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. #### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:773](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L773) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:724](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L724) *** ### 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:731](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L731) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:839](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L839) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:765](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L765) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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:785](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L785) *** ### 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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` #### csharp > **csharp**: `undefined` \| `string` #### csharp-selector > **csharp-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.csharp > **csharp**: `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.javascript > **javascript**: `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/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.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**: `"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 CodeJar is used in codeblocks, in lite mode and in readonly playgrounds. ##### 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` #### 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` #### javascript > **javascript**: `undefined` \| `string` #### javascript-selector > **javascript-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.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; ... 461 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.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` #### 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.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; ... 4 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.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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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"` \| `"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"` \| `"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"` \| `"csharp"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` Language name, alias or extension. ## Defined in [models.ts:874](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/models.ts#L874) --- # 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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/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). ## Defined in [index.ts:417](https://github.com/live-codes/livecodes/blob/74dabade5b38ddc0aa3c7fcab9dac740d9af1548/src/sdk/index.ts#L417)

Hello Jotai

Enjoy coding!

Hello World!

Hello World!

Hello World!

Hello World!

Hello, {name}!

Page Title

Page Title

Page Title

Steps

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Greeting from {props.name}!

Hello World!

Hello, CSS Modules!

Hello, Tailwind CSS!

Hello, {props.name}

Output

Plots

Output

Plots

Output

Plots

Hello World!

Hello World!

Hello World!

Hello World!

Hello World!

Greeting from {props.name}!

Hello World!

Hello, CSS Modules!

Hello, Tailwind CSS!

Custom Root Element

Custom Root Element