# LiveCodes
> LiveCodes is a feature-rich, open-source, client-side code playground that supports React, Vue, Svelte, Solid, JavaScript, TypeScript, CSS, Sass, Tailwind CSS, Python, Go, Ruby, PHP, and 90+ languages/frameworks.
A large number of starter templates are available to help you get started quickly.
Projects can be saved, shared, exported (e.g. to GitHub Gists), deployed (e.g. to GitHub Pages), or embedded in web pages.
A powerful yet easy-to-use SDK enables the creation of and communication with embedded playgrounds.
With extensive language support and high configurability, LiveCodes can easily adapt to your needs.
It offers excellent mobile support, featuring a responsive layout and a touch-friendly code editor.
LiveCodes is an outstanding tool for learning, teaching, prototyping, sharing, and testing code.
It can be easily self-hosted, if needed, on any static file server.
LiveCodes is completely free for unlimited use, with no ads and no account required.
Its MIT License also permits commercial use.
- [Docs](https://livecodes.io/docs/llms.txt)
- [Full Docs](https://livecodes.io/docs/llms-full.txt)
- [README](https://raw.githubusercontent.com/live-codes/livecodes/refs/heads/develop/README.md)
# LiveCodes
A Code Playground That Just Works!
A [feature-rich](https://livecodes.io/docs/features/), open-source, **client-side** code playground for React, Vue, Svelte, Solid, Typescript, Python, Go, Ruby, PHP and [90+ languages/frameworks](https://livecodes.io/docs/languages/).
[](https://status.livecodes.io)
[](https://livecodes.io)
[](https://www.npmjs.com/package/livecodes)
[](https://www.npmjs.com/package/livecodes)
[](https://www.jsdelivr.com/package/npm/livecodes)
[](https://livecodes.io/docs/languages/)
[](https://livecodes.io/docs/)
[](https://livecodes.io/docs/llms.txt)
[](https://livecodes.io/docs/llms-full.txt)
[](https://app.codacy.com/gh/live-codes/livecodes/dashboard?utm_source=gh&utm_medium=referral&utm_content=&utm_campaign=Badge_grade)
[](https://app.lokalise.com/public/34958094667a72e9454592.95108106/)
[](https://app.lokalise.com/public/34958094667a72e9454592.95108106/)
[](https://github.com/live-codes/livecodes/blob/develop/LICENSE)
[](https://github.com/live-codes/livecodes)
[](https://github.com/live-codes/livecodes)
[](https://x.com/livecodes_io)
[Try it now on livecodes.io](https://livecodes.io)
[Documentations](https://livecodes.io/docs)
[What makes LiveCodes different?](https://livecodes.io/docs/why)
## A Code Playground That Just Works!
- No servers to configure (or pay for!)
- No databases to maintain (or pay for!)
- No installs
- No configuration files
- No build steps
- No subscription fees (free and open-source)
- No account required \*
- No limits for usage (unlimited private projects)
- 90+ languages/frameworks/processors
- Large set of features and integrations
- Import code from a wide variety of sources
- Use modules from npm, deno.land/x, jsr, GitHub, and others
- Easily embed it in your web pages
- It runs in the browser (client-side)
\* GitHub account is required only for features that use GitHub Integration.
### Quick Start
#### Standalone App
1. Go to [livecodes.io](https://livecodes.io)
... and enjoy all the [features](https://livecodes.io/docs/features/)!
#### Embedded Playground
Add this code to your page:
```html
```
Check documentations for Embedded Playgrounds.
#### Self-hosted
1. Download a [release](https://github.com/live-codes/livecodes/releases)
2. Put it on a static file server (for free!) 1, 2, 3, 4Check the guide for self-hosting (including the built-in setup to deploy to GitHub Pages).
... and it just works!
## Feature Summary
- A wide range of [language support](https://livecodes.io/docs/languages/) (90+ languages/frameworks/processors)
- [Powerful Editor](https://livecodes.io/docs/features/editor-settings)
- Mobile-friendly
- [External resources/libraries](https://livecodes.io/docs/features/external-resources)
- [Import modules](https://livecodes.io/docs/features/module-resolution) from npm, deno.land/x, jsr, GitHub and others
- [Code Pre-fill](https://livecodes.io/docs/features/code-prefill)
- [Import](https://livecodes.io/docs/features/import)/[Export](https://livecodes.io/docs/features/export) [projects](https://livecodes.io/docs/features/projects)
- [Share](https://livecodes.io/docs/features/share)
- [Embed the playground](https://livecodes.io/docs/features/embeds) in any web page
- [Display modes](https://livecodes.io/docs/features/display-modes)
- [Deploy](https://livecodes.io/docs/features/deploy)
- [Starter Templates](https://livecodes.io/docs/features/templates)
- [Assets](https://livecodes.io/docs/features/assets)
- [Themes](https://livecodes.io/docs/features/themes)
- [Dev Tools](https://livecodes.io/docs/features/tools-pane) ([console](https://livecodes.io/docs/features/console), [compiled code viewer](https://livecodes.io/docs/features/compiled-code), [test runner](https://livecodes.io/docs/features/tests))
- [Code formatting](https://livecodes.io/docs/features/code-format)
- [Intellisense](https://livecodes.io/docs/features/intellisense)
- [Lite mode](https://livecodes.io/docs/features/lite)
- [Read-only mode](https://livecodes.io/docs/features/read-only)
- [Broadcast](https://livecodes.io/docs/features/broadcast)
- [Sync](https://livecodes.io/docs/features/sync)
- [Backup/Restore](https://livecodes.io/docs/features/backup-restore)
- [Client-side!](https://livecodes.io/docs/why#client-side)
- Very [configurable](https://livecodes.io/docs/configuration/)
- Developer-friendly build-free environment
- Powerful [SDK](https://livecodes.io/docs/sdk/) (available for [JavaScript, TypeScript](https://livecodes.io/docs/sdk/js-ts), [React](https://livecodes.io/docs/sdk/react), [Vue](https://livecodes.io/docs/sdk/vue), [Svelte](https://livecodes.io/docs/sdk/svelte), [Solid](https://livecodes.io/docs/sdk/solid), [Preact](https://livecodes.io/docs/sdk/preact) and [web components](https://livecodes.io/docs/sdk/web-components))
- Comprehensive [Documentations](https://livecodes.io/docs/)
- Focused on [privacy and security](https://livecodes.io/docs/features/security)
- Free and [Open-Source](https://livecodes.io/docs/license)
For details check the [full list of features](https://livecodes.io/docs/features/).
## LiveCodes SDK
The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.
The SDK is provided as a light-weight [npm package](https://livecodes.io/docs/sdk/#npm-package) (or [jsr package](https://livecodes.io/docs/sdk/#jsr)), that is also available from [CDNs](https://livecodes.io/docs/sdk/#cdn). It can be used to create playgrounds with a wide variety of [configurations](https://livecodes.io/docs/configuration/configuration-object) and [embed options](https://livecodes.io/docs/sdk/js-ts#embed-options). In addition, [SDK methods](https://livecodes.io/docs/sdk/js-ts#sdk-methods) allow programmatic communication and control of the playgrounds during runtime.
### Installation
```
npm i livecodes
```
### Usage
Example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQDKAIgNJH4C22IANCPgQMYBOEADpNgHaIQjEAAtYAQ1yCAPDVhhxRViPHsC8gLwAdEAFUAKgDEAtAA4dRAPQA+LX1nzFfcXO0g0EWAHcu2dmAtWfjBYPjA3LwhcMBENfA9WWGNI6JEGIgg+KAhxaGM2XNgNAEYAOgAGCxthETAaaABBMDA1QWhxPgBzN1DA9oICNx1hBU6CRABtAF0mcVZIDABRXCg-QTZOHmEaVQBrAFcuRFB2rv3xTvgkWvrhILDQsBkVtAzcN3uFTNh2HWtpSwvawgAC+TAIYAAnnBjiBTp1zpdBKwBndgo9BKDwRxuE8ECcOgiLlcQAArcRocQbXFoh5hQQQGi+fxEYBKdgSEIABXakM67Gw+z4uCIIKIADMBTQiAByaDoWBBFgygDcWl+fHVdg4nNgPPEfIFQtwAAoZQBiT7ib7sGXpYBavhEJT8cUQToIVmO53OnbsA5cT0OjU+n3wxGwT0yv27XDYLx8O3e0MuulgKPmogACVg0Gg2CIAHU-NBcABCJMhn1g5M1qsebxRjkEfbQMCVuwggCUao1WJAEOhhDE8nGCGm2M2YDHE5AKIIXOb8kxTC4AsSAz8M5mc-2EOwNBI8kgXTHwDBIEZzOnxwvUK4hFvTBCELPcMJEcE98IOK2TE+GJIP2GBqBA-CCAAzBBIzYNg0BvqE4gAEZwFISC5NAwhzAsJL3AQcHwOCChgHuyL5uoUggiCQA))
```js
import { createPlayground } from 'livecodes';
createPlayground('#container', {
config: {
markup: {
language: 'markdown',
content: '# Hello World!',
},
},
view: 'result',
});
```
The [JavaScript SDK](https://livecodes.io/docs/sdk/js-ts) is framework/library agnostic. However, wrapper components are also provided for [React](https://livecodes.io/docs/sdk/react), [Vue](https://livecodes.io/docs/sdk/vue), [Svelte](https://livecodes.io/docs/sdk/svelte), [Solid](https://livecodes.io/docs/sdk/solid), [Preact](https://livecodes.io/docs/sdk/preact) and [web components](https://livecodes.io/docs/sdk/web-components). [TypeScript support](https://livecodes.io/docs/sdk/js-ts#typescript-types) provides type-safety and a great developer experience.
React SDK example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBKsAhgMZhEDKAIgNJH4C22IANCPgZQE4QADpGwA7RCC4gAFhVySAPK1hhyRSjPL8CqgLwAdEAFUAKgDEAtAA4jRAPQA+A2OWr1Y8isMg0EWADuQtj8YHaU4mCwYmA+ARC4YDJ6+H6UsJbxiTKcRBBiUBDk0JZ8xbB6AIwAdAAMdk7SMmCs0ACCYGA6ktDkYgDmPtHhvQQEPkbSav0EiADaALrcVJAYAKK4UCGSfIIi0qzaANYArkKIoL0DJ+T98EjNrdIRMdFgkiAAvtwEYACecAuICu-Rud0klDGz0ibw+3xAu2E7wQlz6oNu9xAACsCAAPaGvGKSCCsYKhIioDA4XhEABm-GwrCIAHJoOhYBFePZ+BRqMyANwGfguIUuF6-DTiWkQfpEPREYCisREIiHfinIQIBVKlUqkFg2Ba5lqo64bABMTMzg63UvKIxI0AYiIAAlYNBoNgiAB1ELQXAAQitNu+Ss+guFYnFNAACr0-v0GScxLg5UQABQASjljiIikpWDwhElYmlg2ALzLnyIfkCPh5BBO0DCIAcjgjLlguLJNHwtPITdj8cT2GTuA7EnhvwBhDkqlmCEWPwESIXS5AkIIMYbqg+3CEDPSYxCa6WG5Ov0ZtFUkAGC+A8JJPfv8P+QkIF1fhDA9+BaINkhvoQK77NwdqwkgXzcBgOgQOIkgAMwIVM2DYNAv7ROQABGcAKEgxTQNIKzshC4gEGh8A-GoYAXhCnq6AonyfEAA))
```jsx
import LiveCodes from 'livecodes/react';
const config = {
markup: {
language: 'markdown',
content: '# Hello World!',
},
};
const Playground = () => ;
export default Playground;
```
Vue SDK example: ([open in LiveCodes](https://livecodes.io/?x=code/N4IgLglmA2CmIC4QBkIDdYGED2ATWAzgAQBqArrEQMoAiA0kfgLbYgA0I+BAxgE4QAHSNgB2iEOxAALWAENc4gDxNYYWUW5TZvAqoC8AHRABVACoAxALQAOI0QD0APgMjlq9SNkrDINBFgA7gLYvGB23KJgsCJgPgEQuGBSevh+3LCW8YlSbEQQIlAQstCWPMWwegCMAHQADHZOklJgTNAAgmBgOuLQsiIA5j7R4b0EBD5Gkmr9BIgA2gC6HLLckBgAorhQIeI8-EKSTNoA1mQCiKC9A2Sy-fBIza2SETHRYOIgAL4cBGAAnnALiArv0bndxNwxs9Im8Pt8QHtBO8EJc+qDbvdfBRoa8YkpEUIiLowGdnLwXEQ8kxgqEiKgMDguEQAGa8bBMIgAcmg6FgES49jQFE5AG4DOSROKKRpRL8ZSJmRB+kQ9ERgFKRJTKUdeKcBAg1RqtVqQWDYAbOTrjrhsAERJy2EbjfKojELQBiIgACVg0Gg2CIAHUQtBcABCB1OynfJ2fMUSxT2AlgMkuDWKKLU3pRVOaoiKelYPCEIgIF6KwZGctKux+QI+XiEMjQMIgBy5xOZgTZ2C5r4-f5wAgyVSzBCLH58JFjicgSEEAAKjeJHw4AjZ6TGIRnSznZF+7KoqkgAzHwHhEGpITAZ-h-wEhAud8IN6Bpox4nvhCnBw4L1dyISPCGA6BAojiAAzBBUzYNg0BniA0SyAARnAChIMU0CSCsayYi8BBwfAA6yCSY5zv6ugKJ8nxAA))
```html
```
In addition, the SDK allows creating links to playgrounds:
```js
import { getPlaygroundUrl } from 'livecodes';
const url = getPlaygroundUrl({
config: {
markup: {
language: 'markdown',
content: '# Hello World!',
},
},
});
// this URL can be shared
console.log(url);
```
See [SDK docs](https://livecodes.io/docs/sdk/) for more details.
## Documentations
Comprehensive documentations for [features](https://livecodes.io/docs/features/), [getting started](https://livecodes.io/docs/getting-started), [configuration](https://livecodes.io/docs/configuration/) and [SDK](https://livecodes.io/docs/sdk/) are available on:
https://livecodes.io/docs/
The documentations include demos, code samples, screenshots, [Storybook](https://livecodes.io/stories) and [TypeScript types](https://livecodes.io/docs/sdk/js-ts#typescript-types).
See below for documentations for [contributors](#contribution) and [AI models](#for-ai-agents).
## Updates
Keep up with the latest changes:
- Twitter/X: [@livecodes_io](https://twitter.com/livecodes_io)
- Blog: [blog.livecodes.io](https://blog.livecodes.io/)
- Development build: [dev.livecodes.io](https://dev.livecodes.io/)
## Feedback
We welcome feedback!
Please start a new [issue](https://github.com/live-codes/livecodes/issues/new/choose) or [discussion](https://github.com/live-codes/livecodes/discussions/new).
For security reports please refer to [SECURITY.md](https://github.com/live-codes/livecodes/blob/develop/SECURITY.md).
You may also reach out to us using the [contact form](https://livecodes.io/docs/contact).
## Contribution
Contributions are welcome and highly appreciated.
A huge shout-out to our wonderful [contributors](https://github.com/live-codes/livecodes/graphs/contributors)! Your hard work makes all the difference!
Please refer to the [contribution guide](https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.md) and [system documentation](https://github.com/live-codes/livecodes/blob/HEAD/docs/docs/contribution/README.md).
## For AI Agents
### llms.txt
For developers working with AI agents and language models, we provide specialized documentation files following the [llms.txt specification](https://llmstxt.org/):
- [llms.txt](https://livecodes.io/docs/llms.txt) - Concise documentation optimized for LLM context windows
- [llms-full.txt](https://livecodes.io/docs/llms-full.txt) - Comprehensive documentation including all referenced URLs
These files provide LLM-friendly content in a standardized format, helping language models understand and work with LiveCodes documentation. The format is designed to be both human and LLM readable.
### Intent Skills
If you use an AI coding agent, run:
```bash
npx @tanstack/intent@latest install
```
This loads the Intent skills for LiveCodes SDK. See [.agents/skills/livecodes/SKILL.md](https://github.com/live-codes/livecodes/blob/HEAD/.agents/skills/livecodes/SKILL.md) for the skill index.
### System Documentation
For internal architecture and system documentation, see [docs/docs/contribution/](https://github.com/live-codes/livecodes/blob/HEAD/docs/docs/contribution/README.md).
## Credits
LiveCodes uses services that are generously provided by:
Demo: (console=full)
---
# Console
import LiveCodes from '../../src/components/LiveCodes.tsx';
Console messages are shown in the integrated console (in the [tools pane](./tools-pane.html.md), below the result page), without having to open the native browser console.
Messages can be sent to the console using the standard `console` methods in the code editor (e.g. `console.log`, `console.warn`, `console.error`, `console.table`, ...etc). The console can also be used as REPL (read–eval–print loop) using the integrated console input.
The code is evaluated in the context of the result page (i.e. variables defined in the script editor are accessible for evaluation in the console input). Also code completion works in the console input.
e.g. https://livecodes.io/?ts&console=full
sets TypeScript as the active editor and shows the console maximized.
Demo: (console=full)
:::tip
Setting the querystring `languages` only shows these languages.
Selecting one language and setting console to `full` gives an environment similar to a REPL.
:::
Demo: (Python - print to console)
---
# Compiled Code
import LiveCodes from '../../src/components/LiveCodes.tsx';
The resulting compiled/transpiled code can be seen in the compiled code viewer (in the [tools pane](./tools-pane.html.md)) in real-time, as you type. This works for all compiled code (e.g. Markdown, Pug, SCSS, Less, Stylus, Typescript, CoffeeScript, ...etc.).
This can be a great tool for learning. As you write code, you see the compiled code and the resulting page at the same time. The compiled code viewer shows the code compiled from the currently active editor (markup/style/script). This includes the CSS produced by CSS processors (e.g. Autoprefixer), if enabled.
e.g. https://livecodes.io/?ts&compiled=full
sets TypeScript as the active editor and shows compiled code viewer maximized.
This demo shows TypeScript code along with the compiled Javascript code, similar to the [official TypeScript Playground](https://www.typescriptlang.org/play):
---
# Tests
import LiveCodes from '../../src/components/LiveCodes.tsx';
## Overview
Automated tests can be added for projects. The tests are run in the context of the result web page.
The automated tests are run by the Jest testing framework, which runs totally in the browser. In addition, other [testing libraries](#supported-testing-libraries) are also supported.
Screenshots:
## Use Cases
- Automated tests increase the confidence in the code and can improve the quality of projects.
- Allows Test-driven development (TDD).
- Can be used for education and training by preparing projects with tests that are required to pass by the students' implementation (similar to freeCodeCamp).
- Can be used by websites that offer coding challenges (similar to Codewars).
## Demos
Demo: (template=jest)
Demo: (template=jest-react)
## Tests Panel
The "Tests" panel is located in the "[Tools pane](./tools-pane.html.md)" below the result page.
In the tests panel, you can find:
- "Run" button: To run tests (keyboard shortcut: Ctrl/Cmd + Alt + t).
- "Watch" button toggle: To watch the project and re-run tests automatically when code changes.
- "Reset" button: Resets test results.
- "Edit" button: Opens a code editor to edit tests (not in embeds).
- Test results.
:::info Note
Please note that the tests panel are hidden by default in [embedded playgrounds](./embeds.html.md) unless the [project has tests](../configuration/configuration-object.html.md)#tests). In such case, the panel is added to the [tools pane](./tools-pane.html.md). However, the test editor is not shown.
The [SDK](../sdk/index.html.md) can control the visibility of the different tools in the tools pane (see [`tools`](../configuration/configuration-object.html.md)#tools) property of the [configuration object](../configuration/configuration-object.html.md)).
The tests panel and the test editor are always shown in the [full standalone app](../getting-started.html.md)#standalone-app).
:::
## Supported Languages
The testing code can be written using JavaScript, TypeScript, JSX or TSX.
However, since the tests run against the result web page, they can test projects that use any language/framework.
This is [a demo](https://livecodes.io/?x=id/xyi6usem2sf&tests) for running tests against a Ruby project.
Languages may have test modules. This is [an example](https://livecodes.io/?x=id/665ar3bpqka&console=full) of running [Python doctest](https://docs.python.org/3/library/doctest.html) tests:
## Importing Code
Functions, objects or values can be exported from the `script` code like a regular ES module.
These can then be imported in the test code for usage. This is only available for code in the `script` editor. The testing code also have access to global objects like `window`.
Example:
```js
// in the script editor
export default function greet() {
return 'Hello, World!';
}
export const add = (x, y) => x + y;
window.multiply = (x, y) => x * y;
```
```js
// in the test editor
import greet, { add } from './script'; // relative import without extension
describe('test imported', () => {
test('greet', () => {
expect(greet()).toBe('Hello, World!');
});
test('add', () => {
expect(add(1, 2)).toBe(3);
});
});
describe('test global', () => {
test('multiply', () => {
expect(window.multiply(2, 3)).toBe(6);
});
});
```
## Supported Jest features
- [Jest globals](https://jestjs.io/docs/api): `expect`, `test`, `xtest`, `it`, `fit`, `xit`, `describe`, `fdescribe`, `xdescribe`, `beforeAll`, `afterAll`, `beforeEach`, `afterEach`
- Jest function mocks: `jest.fn`, `jest.mocked`, `jest.replaceProperty`, `jest.spyOn`
These can be directly used in the test editor, without the need for any imports.
Autocomplete is available in Monaco editor for Jest API.
## Supported testing libraries
In addition to Jest, you may wish to use other supported testing libraries. These have to be explicitly imported to the testing code.
### Testing library
Simple and complete testing utilities that encourage good testing practices.
- DOM Testing Library
```js
import {
getByLabelText,
getByText,
getByTestId,
queryByTestId,
waitFor,
} from '@testing-library/dom';
```
- React Testing Library
```js
import { render, fireEvent, waitFor, screen } from '@testing-library/react';
```
- jest-dom
```js
import '@testing-library/jest-dom';
```
- user-event
```js
import userEvent from '@testing-library/user-event';
```
### Chai
Jest assertions can be used in the tests. However, if you prefer Chai, it can be easily used.
Autocomplete is also available in Monaco editor for Chai API.
```js
import { assert } from 'chai';
```
## Examples
Usage examples are provided in the starter templates (Jest Starter and Jest/React Starter).
:::caution
The test code is added to the result page and runs in its context. Please note that script errors (e.g. import or syntax errors) may prevent the tests from loading.
:::
## SDK
The [SDK](../sdk/index.html.md) allows [running tests](../sdk/js-ts.html.md)#runtests) and collecting results.
---
# Module Resolution
import LiveCodes from '../../src/components/LiveCodes.tsx';
## NPM Modules
### Bare Module Imports
In LiveCodes you can use node-style bare module imports for npm modules like you do in your local development. However, there are no installation or build steps required.
e.g. consider the following code:
```js
import { v4 } from 'uuid';
document.body.innerHTML = v4();
```
If you run it directly in the browser, you get this error:
```
Uncaught TypeError: Failed to resolve module specifier "uuid". Relative references must start with either "/", "./", or "../".
```
However, in LiveCodes, bare module imports are transformed to full URLs that are imported from CDN (by default: [esm.sh](https://esm.sh/)) which provides ESM versions of NPM packages.
`import { v4 } from 'uuid';` becomes
`import { v4 } from 'https://esm.sh/uuid';`
This is made possible by using [import maps](https://github.com/WICG/import-maps).
Demo:
You can import from React like that:
```js
import { useState } from 'react';
```
Demo:
It just works without a build step and without you having to worry about. And when you [export your project](./export.html.md) to another service (e.g. CodePen) or as HTML, the full URL imports are used, so your code continues to work.
:::tip
It is recommended to use this method for dependencies over using [external scripts](./external-resources.html.md). The dependencies are explicitly stated in the code. And if you move to a local development environment, your bundler will take care of importing them and doing other optimizations like [tree-shaking](https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking).
:::
### CommonJS Modules
CommonJS module `require`s are also supported (they are converted to ESM imports).
So this also works (although not recommended - use ESM imports instead):
```js
const { v4 } = require('uuid');
document.body.innerHTML = v4();
```
Exercise:
Copy the previous code snippet and paste it in the playground below. Check the generated code in the compiled code viewer.
:::info
Script code that contains `import`, `export` or `require` gets served in a script tag with [`type="module"`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules).
:::
### NPM Package Search
NPM packages can be searched and added as script tags from the [External Resources](./external-resources.html.md) screen.
## Deno Modules
Modules imported from [deno.land/x](https://deno.land/x) (or any other URL ending in `.ts`, `.jsx` or `.tsx`) are automatically transpiled (ts -> js) and bundled by [bundlejs](https://bundlejs.com/) (using [esbuild](https://esbuild.github.io/)), including their relative imports. The project on LiveCodes that imports these modules does not need to be using TypeScript.
Example:
```js
import { uuid } from 'https://deno.land/x/uuid/mod.ts';
document.body.innerHTML = uuid();
```
[Open in LiveCodes]()
## JSR Modules
Modules can be imported from [jsr.io](https://jsr.io/) using the prefix `jsr:`. The project on LiveCodes that imports these modules does not need to be using TypeScript.
Example:
```js
import { yassify } from 'jsr:@kwhinnery/yassify';
document.body.innerHTML = yassify('Hello, World!');
```
[Open in LiveCodes]()
## GitHub/GitLab/Bitbucket
Modules can also be similarly imported from GitHub, Gitlab or Bitbucket. Also these imports are transpiled and bundled (see [Deno Modules](#deno-modules)).
```js
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts';
console.log(flatten([[1, 2], [3], [4, 5]])); // -> [1, 2, 3, 4, 5]
```
[Open in LiveCodes]()
:::tip
If you do not want the import URL to be bundled (e.g. in Deno or GitHub imports), add `#nobundle` to the end of URL.
Example:
```js
import { flatten } from 'https://github.com/remeda/remeda/blob/master/src/flatten.ts#nobundle';
```
If you want to bundle (and transpile) any import URL, prefix it with `bundle:` (see below).
:::
## pkg.pr.new
Unpublished npm packages can be imported while still under development using the [pkg.pr.new](https://pkg.pr.new/) service.
Use the prefix `pr:` or `pkg.pr.new:`.
Example:
```js
import { Bench } from 'pr:tinybench@a832a55';
// or
// import { Bench } from 'pr:tinylibs/tinybench/tinybench@a832a55';
```
## CDN Providers
By default, npm modules are imported from [esm.sh](https://esm.sh/). You may choose another provider by using a CDN prefix. These are examples of importing the library `uuid`:
`uuid` → https://esm.sh/uuid ([info](https://esm.sh))
`esm.sh:uuid` → https://esm.sh/uuid ([info](https://esm.sh/))
`skypack:uuid` → https://cdn.skypack.dev/uuid ([info](https://www.skypack.dev/))
`jsdelivr:uuid` → https://cdn.jsdelivr.net/npm/uuid ([info](https://www.jsdelivr.com/))
`esm.run:uuid` → https://esm.run/uuid ([info](https://esm.run/))
`unpkg:uuid` → https://unpkg.com/uuid?module ([info](https://unpkg.com/))
`esbuild:uuid` → https://esbuild.vercel.app/uuid ([info](https://esbuild.vercel.app/))
`bundlejs:uuid` → https://deno.bundlejs.com/?file&q=uuid ([info](https://bundlejs.com/))
`bundle:uuid` → https://deno.bundlejs.com/?file&q=uuid ([info](https://bundlejs.com/))
`deno:uuid` → https://deno.bundlejs.com/?file&q=https://deno.land/x/uuid/mod.ts ([info](https://bundlejs.com/))
`npm:uuid` → https://esm.sh/uuid ([info](https://esm.sh))
`node:uuid` → https://esm.sh/uuid ([info](https://esm.sh))
`jsr:@std/uuid` → https://esm.sh/jsr/@std/uuid ([info](https://esm.sh))
`pr:tinybench@a832a55` → https://esm.sh/pr/tinybench@a832a55 ([info](https://esm.sh))
`pkg.pr.new:tinybench@a832a55` → https://esm.sh/pkg.pr.new/tinybench@a832a55 ([info](https://esm.sh))
`jspm:uuid` → https://jspm.dev/uuid ([info](https://jspm.org) - [DEPRECATED](https://jspm.org/jspm-dev-deprecation))
Example:
```js
import { useState } from 'esm.sh:react';
```
:::caution
Please note that importing the same module (even for dependencies) from different CDNs may cause conflicts.
Example:
```js
// this will NOT work!
import React, { useState } from 'esm.sh:react'; // React from esm.sh
import { createRoot } from 'skypack:react-dom/client'; // React from skypack.dev
```
:::
### Change Default CDN
Default CDN can be changed on project-level using the [custom settings](../advanced/custom-settings.html.md) property `defaultCDN` which accepts a string representing one of the CDN aliases listed above.
Example: This assigns [Skypack](https://www.skypack.dev/) as the default CDN for all imports of the project
```json
{
"defaultCDN": "skypack"
}
```
### Package Version
Most CDN providers allow specifying package version using the format:
`{pkgName}@{version}/{path}`.
Example:
```js
import latest from 'lodash';
import v3 from 'lodash@3';
console.log(latest.VERSION); // -> 4.17.21
console.log(v3.VERSION); // -> 3.10.1
```
## Custom Module Resolution
Module resolution described in this page mainly depends on [import maps](https://github.com/WICG/import-maps). The generated import map is added to the [result page](./result.html.md).
You may wish to override or customize module resolution behavior (e.g. change URL, CDN, specify version, import custom unpublished library, ...etc. ), however you cannot add another import map script because [currently multiple import maps are not yet supported](https://github.com/WICG/import-maps#multiple-import-map-support).
LiveCodes allows you to add your custom import map by one of the following methods:
#### Custom Settings
In the standalone app, via the [custom settings](../advanced/custom-settings.html.md) property `imports`.
Example:
```json title="Custom Settings"
{
"imports": {
"my-lib": "https://my-server.com/path/to/library.js"
}
}
```
#### SDK
For embedded playgrounds, use the [SDK](../sdk/index.html.md) embed option [`config.imports`](../configuration/configuration-object.html.md)#imports).
Example:
```js title="index.js"
import { createPlayground } from 'livecodes';
const config = {
imports: {
'my-lib': 'https://my-server.com/path/to/library.js',
},
// other configurations ...
};
createPlayground('#container', { config });
```
Please note that you may also provide [custom type definitions](./intellisense.html.md)#custom-types) for your custom modules for editor intellisense and better development experience.
## Related
- [Import](./import.html.md)
- [External Resources](./external-resources.html.md)
- [Projects](./projects.html.md)
- [Intellisense](./intellisense.html.md)
---
# IntelliSense
import LiveCodes from '../../src/components/LiveCodes.tsx';
The [code editor](./editor-settings.html.md)#code-editor) provides a rich experience with [intellisense](https://code.visualstudio.com/docs/editor/intellisense) and autocompletion. Many of the features required for this are based on TypeScript types that are either inferred by the editor or supplied as data definition files.
This not only works when the editor language is TypeScript, but also works with others like JavaScript and JSX.
Example:
## Types for imported npm packages
LiveCodes will try to automatically find type definitions for npm modules imported in the editor.
These are examples for automatically loading React types with autocomplete and hover info:
## TypeScript TwoSlash
The code editor supports [TypeScript TwoSlash](https://github.com/microsoft/TypeScript-Website/tree/v2/packages/ts-twoslasher). This can be very useful for debugging, sharing and teaching TypeScript.
This is supported in [JavaScript](../languages/javascript.html.md), [TypeScript](../languages/typescript.html.md), [JSX](../languages/jsx.html.md) and [TSX](../languages/tsx.html.md). This also includes [Babel](../languages/babel.html.md), [Sucrase](../languages/sucrase.html.md), [Solid](../languages/solid.html.md), [React Native](../languages/react-native.html.md), etc.
## Custom Types
If no type definitions are found, or if you want to provide your own (e.g. for a module that is not hosted on npm), custom type definition files can be used.
In the standalone app, these can be provided in [custom settings](../advanced/custom-settings.html.md) using the `types` property. This takes an object with the key representing the module name and the value representing the URL of the file.
Example:
```json title="Custom Settings"
{
"types": {
"my-module": "https://cdn.jsdelivr.net/npm/my-module@1.0.0/types/my-module.d.ts",
"my-other-module": "https://my-website.com/my-other-module/my-other-module.d.ts"
}
}
```
For embedded playgrounds, these can be provided in the [configuration object](../configuration/configuration-object.html.md) using the [`types`](../configuration/configuration-object.html.md)#types) property.
This can be combined with the [`imports`](../configuration/configuration-object.html.md)#imports) property to provide [importmap](./module-resolution.html.md)#custom-module-resolution) for runtime implementation of your custom modules.
This is an example of how to create a playground that provides the implementation of the custom module: `my-module` and its type definition to provide editor intellisense:
```js
import { createPlayground } from 'livecodes';
const config = {
activeEditor: 'script',
script: {
language: 'javascript',
content: `import { foo } from 'my-module';\n\nconsole.log(foo());`
};
imports: {
'my-module': 'https://my-website.com/my-module/index.js',
},
types: {
'my-module': 'https://my-website.com/my-module/my-module.d.ts',
},
};
createPlayground('#container', {config});
```
Please note that the URLs used for `types` and `imports` properties may be full URLs or [data URLs](./data-urls.html.md).
This can be of great use for library authors who want to provide playgrounds for documenting their libraries that are not (yet) published to npm.
## Demo
Let's assume we have this TypeScript module:
```ts title="Greeter.ts"
export class Greeter {
private morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];
private eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];
private randomSelector(array: string[]) {
return array[Math.floor(Math.random() * array.length)];
}
public morning() {
return this.randomSelector(this.morningGreetings);
}
public evening() {
return this.randomSelector(this.eveningGreetings);
}
}
```
which compiles to this JavaScript:
```js title="Greeter.js"
export class Greeter {
constructor() {
this.morningGreetings = ['Good morning', 'Have a good day', 'How are you today?'];
this.eveningGreetings = ['Good evening', 'Good night', 'Sleep well'];
}
randomSelector(array) {
return array[Math.floor(Math.random() * array.length)];
}
morning() {
return this.randomSelector(this.morningGreetings);
}
evening() {
return this.randomSelector(this.eveningGreetings);
}
}
```
and this type definition:
```ts title="Greeter.d.ts"
export declare class Greeter {
private morningGreetings;
private eveningGreetings;
private randomSelector;
morning(): string;
evening(): string;
}
```
The JavaScript output (Greeter.js) and the data definition file (Greeter.d.ts) should be hosted online or converted to data URLs (see [assets](./assets.html.md) and [data URLs](./data-urls.html.md)).
Then, they can be used like that:
export const customModules = {
editor: 'monaco',
activeEditor: 'script',
script: {
language: 'typescript',
content:
"import { Greeter } from 'my-greeter';\n\nconst greeter = new Greeter();\n// now `greeter` has autocomplete\n\ndocument.body.innerText = greeter.morning();\n\n// this should show error in the editor\n// Property 'morningGreetings' is private and only accessible within class 'Greeter'\nconsole.log(greeter.morningGreetings);",
},
imports: {
'my-greeter':
'data:text/javascript;charset=UTF-8;base64,ZXhwb3J0IGNsYXNzIEdyZWV0ZXIgew0KICAgIGNvbnN0cnVjdG9yKCkgew0KICAgICAgICB0aGlzLm1vcm5pbmdHcmVldGluZ3MgPSBbJ0dvb2QgbW9ybmluZycsICdIYXZlIGEgZ29vZCBkYXknLCAnSG93IGFyZSB5b3UgdG9kYXk/J107DQogICAgICAgIHRoaXMuZXZlbmluZ0dyZWV0aW5ncyA9IFsnR29vZCBldmVuaW5nJywgJ0dvb2QgbmlnaHQnLCAnU2xlZXAgd2VsbCddOw0KICAgIH0NCiAgICByYW5kb21TZWxlY3RvcihhcnJheSkgew0KICAgICAgICByZXR1cm4gYXJyYXlbTWF0aC5mbG9vcihNYXRoLnJhbmRvbSgpICogYXJyYXkubGVuZ3RoKV07DQogICAgfQ0KICAgIG1vcm5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMubW9ybmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KICAgIGV2ZW5pbmcoKSB7DQogICAgICAgIHJldHVybiB0aGlzLnJhbmRvbVNlbGVjdG9yKHRoaXMuZXZlbmluZ0dyZWV0aW5ncyk7DQogICAgfQ0KfQ0K',
},
types: {
'my-greeter':
'data:text/typescript;charset=UTF-8;base64,ZXhwb3J0IGRlY2xhcmUgY2xhc3MgR3JlZXRlciB7DQogIHByaXZhdGUgbW9ybmluZ0dyZWV0aW5nczsNCiAgcHJpdmF0ZSBldmVuaW5nR3JlZXRpbmdzOw0KICBwcml2YXRlIHJhbmRvbVNlbGVjdG9yOw0KICBtb3JuaW5nKCk6IHN0cmluZzsNCiAgZXZlbmluZygpOiBzdHJpbmc7DQp9DQo=',
},
};
## Related
- [Module Resolution](./module-resolution.html.md)
- [Data Urls](./data-urls.html.md)
- [Assets](./assets.html.md)
- [Custom Settings](../advanced/custom-settings.html.md)
- [Configuration Object](../configuration/configuration-object.html.md)
---
# Code Format
Code formatting is supported for most [languages](../languages/index.html.md).
## Code Formatters
The code formatter used for each language is specified in the [language documentation](../languages/index.html.md) page.
For example:
- [Prettier](https://prettier.io/) is used for many languages including HTML, CSS, JavaScript, TypeScript, JSX, TSX.
- [gofmt](https://pkg.go.dev/cmd/gofmt) (via [GopherJS](https://github.com/gopherjs/gopherjs)) is used for Go.
- [Parinfer](https://shaunlebron.github.io/parinfer/) is used for Scheme, Common Lisp and ClojureScript.
## Format Button
Code formatting for the code in the active editor can be triggered by the `Format` button below the editor.
## Keyboard Shortcut
Code formatting can also be trigger by the keyboard shortcut Alt + Shift + F.
## Format on-save
Format on-save can be enabled from the Settings menu → Format on-save.
## Format Options
Some format options can be configured from [Editor Settings](./editor-settings.html.md) screen. These include [Prettier](https://prettier.io/) [configuration options](https://prettier.io/docs/en/options.html) for:
- Indentation (Spaces/Tabs)
- Tab size
- Use Semicolons
- Use Single Quotes
- Use Trailing Commas
## Configuration
Code format can be configured using the [configuration object](../configuration/configuration-object.html.md) properties:
- [`formatOnsave`](../configuration/configuration-object.html.md)#formatonsave)
- [`useTabs`](../configuration/configuration-object.html.md)#usetabs)
- [`tabSize`](../configuration/configuration-object.html.md)#tabsize)
- [`semicolons`](../configuration/configuration-object.html.md)#semicolons)
- [`singleQuote`](../configuration/configuration-object.html.md)#singlequote)
- [`trailingComma`](../configuration/configuration-object.html.md)#trailingcomma)
## SDK Method: `format`
The code format can be programmatically triggered by the [SDK](../sdk/index.html.md) method [`format`](../sdk/js-ts.html.md)#format).
---
# Command Menu
The command menu allows running a large set of commands from the UI. It is keyboard-friendly and allows for searching and selecting commands. Most of the functionality of LiveCodes can be achieved using the command menu, which can really improve productivity and DX.
It can be triggered from the keyboard by pressing Ctrl + K (or ⌘ + K on Mac), or from the Help Menu.
The available commands cover a wide range of functionality, like showing and hiding UI elements (e.g. different editors, the [result page](./result.html.md), [console](./console.html.md), [compiled code viewer](./compiled-code.html.md), and [tests](./tests.html.md)), changing [languages](../languages), loading [starter templates](./templates.html.md), opening different screens (e.g. new project, opening saved projects, [import](./import.html.md), [embeds](./embeds.html.md), [deploy](./deploy.html.md), [share](./share.html.md) and more).
In addition many commands can be executed from the command menu, such as running code, formatting code, changing settings (e.g. autorun, autosave, changing [themes](./themes.html.md), [editor settings](./editor-settings.html.md), and more).
## Using the Command Menu
Commands can be navigated and selected by:
- The mouse: scrolling and clicking
- The keyboard: using the up and down arrow keys to navigate, pressing Enter to select, Backspace to move to parent category and Esc to close the command menu.
- Searching: typing in the search box for fuzzy search.
## Keyboard Shortcuts
If a command has a keyboard shortcut, it will be shown in the command menu. In addition, the whole list of keyboard shortcuts can be opened from the command menu (by searching for "Keyboard Shortcuts") or from the UI from the Help Menu.
---
# Keyboard Shortcuts
Many commands can be executed from the keyboard using keyboard shortcuts. The full list can be found in the [Keyboard Shortcuts screen](https://livecodes.io/?screen=keyboard-shortcuts), which can be accessed from the Help Menu or from the [command menu](./command-menu.html.md) by pressing Ctrl + K (or ⌘ + K on Mac) and searching for "Keyboard Shortcuts".
The code editor shortcuts are the same as VS Code, which can be found [here](https://code.visualstudio.com/docs/getstarted/keybindings#_basic-editing).
---
# User Settings
A user can select various settings that are stored locally in the browser and are subsequently used.
User settings can be configured in Settings menu. These include settings like:
- Auto-update
- Auto-save
- Delay (before auto-update and auto-save)
- [Format on-save](./code-format.html.md)#format-on-save)
- [Theme](./themes.html.md) (light/dark)
- [Theme color](./themes.html.md)#theme-color)
- [Recover unsaved projects](./recover.html.md)
- [Show spacing](./result.html.md)#show-spacings)
- Layout (responsive/vertical/horizontal)
- [Sync](./sync.html.md)
- Show [welcome screen](./welcome.html.md)
- [App language](./i18n.html.md)
The settings selected in the [`Editor Settings`](./editor-settings.html.md) screen are also saved locally as user settings.
User settings are scoped to the currently [logged-in user](./user-management.html.md). They can be [backed up/restored](./backup-restore.html.md) and [synced](./sync.html.md) the same as other user data ([projects](./projects.html.md), [user templates](./templates.html.md)#user-templates), [assets](./assets.html.md), [code snippets](./snippets.html.md)).
## Related
- [User management](./user-management.html.md)
- [Project](./projects.html.md)
- [Templates](./templates.html.md)
- [Backup/Restore](./backup-restore.html.md)
- [Sync](./sync.html.md)
---
# Editor Settings
LiveCodes allows a lot of flexibility for configuring which code editor to use and its settings.
`Editor Settings` screen can be accessed from Settings menu → Editor Settings.
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
A preview code editor is displayed to preview the settings in real time.
The settings selected in the `Editor Settings` screen are saved locally to [user settings](./user-settings.html.md) and are used subsequently. These include:
{/*
### Enable AI Code Assistant
Enables the [AI code assistant](./ai.html.md). (Free and no account required)
*/}
### Code Editor
The following code editors are supported:
- [**Monaco Editor**](https://microsoft.github.io/monaco-editor/): This is the code editor that powers [**VS Code**](https://code.visualstudio.com/). It is [feature-rich](https://code.visualstudio.com/docs/editor/codebasics) and supports autocomplete with [**IntelliSense**](https://code.visualstudio.com/docs/editor/intellisense) (including [types for custom libraries](./intellisense.html.md)). However, it requires a relatively large download and is not supported in mobile browsers.
- [**CodeMirror**](https://codemirror.net/): Has [many editing features](https://codemirror.net/docs/extensions/), including autocomplete, with good **mobile support**.
- [**CodeJar**](https://medv.io/codejar/): A **lightweight** code editor with very basic editing features. [PrismJs](https://prismjs.com/) is used for syntax highlighting. Please note that some editor settings are not supported in CodeJar (see below).
This can be configured using the [`editor`](../configuration/configuration-object.html.md)#editor) configuration option.
By default, Monaco editor is used on desktop, CodeMirror is used on mobile and CodeJar is used in [codeblocks](./display-modes.html.md)#codeblock), in [lite mode](./lite.html.md) and in [readonly](../configuration/configuration-object.html.md)#readonly) playgrounds.
### Editor Options
These include:
- [Editor theme](../configuration/configuration-object.html.md)#editortheme)
- [Font family](../configuration/configuration-object.html.md)#fontfamily)
- [Font size](../configuration/configuration-object.html.md)#fontsize)
- [Indentation](../configuration/configuration-object.html.md)#usetabs) (Spaces/Tabs)
- [Tab size](../configuration/configuration-object.html.md)#tabsize)
- [Line numbers](../configuration/configuration-object.html.md)#linenumbers)
- [Word-wrap](../configuration/configuration-object.html.md)#wordwrap)
- [Auto-close brackets and quotes](../configuration/configuration-object.html.md)#closebrackets)
- [Fold (collapse) regions](../configuration/configuration-object.html.md)#foldregions)
- [Minimap](../configuration/configuration-object.html.md)#minimap)
### Emmet
Allows using [**Emmet**](https://emmet.io/) [abbreviations and actions](https://docs.emmet.io/). See [`emmet`](../configuration/configuration-object.html.md)#emmet) configuration option.
(Not supported in CodeJar)
### Editor Modes
Allows using [**Vim**](https://vimhelp.org/) and [**Emacs**](https://www.gnu.org/software/emacs/manual/html_node/emacs/Basic.html) keyboard bindings. See [`editorMode`](../configuration/configuration-object.html.md)#editormode) configuration option.
(Not supported in CodeJar)
### Format Options
These are [**Prettier**](https://prettier.io/) [configuration options](https://prettier.io/docs/en/options.html) used for code formatting.
In addition to those specified in [Editor Options](#editor-options), the following options are available:
- [Use Semicolons](../configuration/configuration-object.html.md)#semicolons)
- [Use Single Quotes](../configuration/configuration-object.html.md)#singlequote)
- [Use Trailing Commas](../configuration/configuration-object.html.md)#trailingcomma)
---
# Internationalization (i18n)
import LiveCodes from '../../src/components/LiveCodes.tsx';
LiveCodes currently supports UI internationalization. By default, the UI language will be automatically detected based on your browser settings.
You can easily switch between supported UI languages using the i18n menu, allowing you to explore and use LiveCodes in your preferred language!
If you are interested in contributing to the translation of LiveCodes, please refer to the [i18n Contribution Guide](https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.html.md).
Demo: ([Embedded playground](./embeds.html.md) with `appLanguage: 'zh-CN'`)
## Using SDK
Set the [configuration object](../configuration/configuration-object.html.md) property [`appLanguage`](../configuration/configuration-object.html.md)#applanguage) to a supported language code.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container', { template: 'javascript', config: { appLanguage: 'auto' } });
```
## Using query params
Add the [query parameter](../configuration/query-params.html.md) `appLanguage` with your preferred language code.
https://livecodes.io?template=javascript&appLanguage=fr
## Related
- [User Settings](./user-settings.html.md)
- [Editor Settings](./editor-settings.html.md)
- [Query params](../configuration/query-params.html.md)
- [i18n Contribution Guide](https://github.com/live-codes/livecodes/blob/develop/docs/docs/contribution/i18n.html.md)
---
# Default Template/Language
When the app is loaded, by default, the last used [language](../languages/index.html.md) is selected.
The app can also be configured to load a default [user template](./templates.html.md)#user-templates).
If you do not already have any user templates, save any loaded project as template:
Project menu → Save as → Template.
Then, in the user templates screen (Project menu → New ... → My Templates), find your template and click "Set as default".
If you wish to clear that selection, find the default template in user templates and click "unset".
If you want to temporarily not load the default template/language add the [query param](../configuration/query-params.html.md) `no-defaults`.
Example: https://livecodes.io?no-defaults
## Related
- [Templates](./templates.html.md)
- [Query params](../configuration/query-params.html.md)
---
# Assets
Adding local assets (e.g. images, fonts, stylesheets, scripts) that are not hosted online is such a common need that a UI was developed to allow easily adding them.
The assets are saved locally on the user's device and are available across projects (i.e the same image can be used in different projects without having to add it multiple times).
In addition, assets are supported in [sync](./sync.html.md), [backup](./backup-restore.html.md)#backup) and [restore](./backup-restore.html.md)#restore).
The `Assets` screen can be accessed from Settings menu → Assets
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
Assets are either:
- Encoded as [data URLs](./data-urls.html.md).
- Uploaded to a [GitHub Pages](https://pages.github.com/). This requires login with a [GitHub account](./github-integration.html.md) (allowing access to repos). A **public** repo called `livecodes-assets` is created if not present. The assets are pushed to `gh-pages` branch. They can then be accessed by URLs like:
https://\{user\}.github.io/livecodes-assets/assets/...
When an asset item is clicked, the URL is copied to clipboard. The URL can then be used in projects.
---
# Code Snippets
LiveCodes supports saving and organizing code snippets in different languages.
Code snippets are saved locally on user's device. However, they are supported in [sync](./sync.html.md), [backup](./backup-restore.html.md)#backup) and [restore](./backup-restore.html.md)#restore).
Code snippets screen can be accessed from Settings menu → Code Snippets.
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
Each snippet has a title, description, language and code.
After adding snippets they can be sorted (by date modified or title), filtered (by language) or searched.
Code snippets can then be copied to clipboard and pasted in projects.
## Related
- [Projects](./projects.html.md)
- [Assets](./assets.html.md)
---
# Import
## Overview
LiveCodes supports importing code from a wide variety of [sources](#sources). This can be achieved using one of the following methods:
### UI
The Import screen can be accessed from the Project menu → Import.
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
### Query Param
A URL of any of the [sources](#sources) can be imported by adding it as a value to [query param](../configuration/query-params.html.md) key: `x`.
Example:
https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9
### Bookmarklet
Instead of manually copy/pasting URLs to import, adding [**"Edit in LiveCodes"** bookmarklet](../bookmarklet.html.md) to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL.
### SDK
For [embedded playgrounds](./embeds.html.md), use the [SDK](../sdk/index.html.md) property [`EmbedOptions.import`](../sdk/js-ts.html.md)#import).
## Examples
- GitHub File:
URL: https://github.com/lodash/lodash/blob/master/isObject.js
[Open in LiveCodes](https://livecodes.io/?x=https://github.com/lodash/lodash/blob/master/isObject.js)
- GitHub Directory:
URL: https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards
[Open in LiveCodes](https://livecodes.io/?x=https://github.com/bradtraversy/50projects50days/tree/master/expanding-cards)
- GitHub Gist:
URL: https://gist.github.com/f01deb828a42f363502fbae7964d48e9
[Open in LiveCodes](https://livecodes.io/?x=https://gist.github.com/f01deb828a42f363502fbae7964d48e9)
- JS Bin:
URL: https://jsbin.com/iwovaj/73/embed?html,js,output
[Open in LiveCodes](https://livecodes.io/?x=https://jsbin.com/iwovaj/73/embed?html,js,output)
- Vue Playground:
URL: [https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Z...](https://play.vuejs.org/#eNp9kUFKAzEUhq/yyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g+fxAl7Bl5RWF9Jd3v//7+cLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS/JPejWpwZpcY4Ov94/vzDZ45eSpNMdzVciEPhLXTC0KeAIr1+bRtc0nXFUOesqqMiwTNWc1teiIF+1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0+jtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e/54i1t+H0wmj5rTR8wHDFbHxLiLXUazZOw/uUx7lW+gTPUU5ltCE/afSqAp2eW8FHyX2ZGv/+KOBqO8J00nuh/8Wasi)
[Open in LiveCodes](https://livecodes.io/?x=https%3A%2F%2Fplay.vuejs.org%2F%23eNp9kUFKAzEUhq%2FyyKYKtUW6K9OCli4UUVFxlU2Zvk5TM0lIXsbCMGdw7QG8g%2BfxAl7Bl5RWF9Jd3v%2F%2F7%2BcLrxUXzg2aiGIsilB65QgCUnRTaVTtrCdoweMKOlh5W0OPoz1ppCmtCQR1qGCS%2FJPejWpwZpcY4Ov94%2FvzDZ45eSpNMdzVciEPhLXTC0KeAIr1%2BbRtc0nXFUOesqqMiwTNWc1teiIF%2B1KwVQwP26IvKDDCSlWDTbCG6du0K0Vpa6c0%2BjtHihGlGEN2krfQ2r5eZ418xP5eL9dYvvyjb8I2aVLcewzoG5Ti4NHCV0g7e%2F54i1t%2BH0wmj5rTR8wHDFbHxLiLXUazZOw%2FuUx7lW%2BgTPUU5ltCE%2FafSqAp2eW8FHyX2ZGv%2F%2BKOBqO8J00nuh%2F8Wasi)
## Sources
Import is supported from any of the following:
- GitHub gist
- GitHub file
- Directory in a GitHub repo
- Gitlab snippet
- Gitlab file
- Directory in a Gitlab repo
- JS Bin
- [Shared projects](./share.html.md)
- Raw code
- Code in web page DOM
- Local file(s)
- Code in zip file (Local or URL)
- Code in image - OCR (Local or URL)
- Projects shared in official playgrounds of [TypeScript](https://www.typescriptlang.org/play) and [Vue](https://play.vuejs.org/)
- [Exported project JSON](./export.html.md) (single project and bulk import)
Import sources are identified by URL patterns (e.g. origin, pathname and extension).
:::tip
Local files can be imported from the "Import Screen" or by dragging and dropping the file(s) in the editor.
:::
## File Selection
For sources that provide multiple files (e.g. GitHub/GitLab directories, GitHub gists, GitLab snippets and local files), a best guess is tried to load files in respective editors. Best results are when there are 3 files and each file is in a language (identified by file extension) that can be loaded to a different editor, for example:
- index.html, style.css, script.js
- default.pug, app.scss, main.ts
The following file names are given higher priority:
- Markup files starting with `index.` or `default.`
- Style files starting with `style.` or `styles.`
- Script files starting with `script.`, `app.`, `main.` or `index.`
While README, markdown files and files with no extension are given lower priority.
Alternatively, files can be specified using the `files` [query param](../configuration/query-params.html.md). It takes a **comma-separated list** of filenames. The first 3 found files are loaded. If 1 or 2 files are specified, only these will be loaded. The first matching file is shown by default in the active editor.
The query params should have the following format:
`?x={url}&files={file1},{file2},{file3}`
Example:
`?x={url}&files=Counter.tsx,counter.scss,counter.html`
The active editor can be specified using the [`activeEditor`](../configuration/configuration-object.html.md)#activeeditor) (or its alias `active`) [query param](../configuration/query-params.html.md). It takes the name of the editor (`markup`, `style` or `script`) or its ID (`0`, `1` or `2`) to be shown by default.
Example:
`?x={url}&activeEditor=style` or `?x={url}&active=1`
## Import Shared Projects
[Shared Projects](./share.html.md) can be imported using the value of the query param `x` generated by the Share screen. This starts with either:
- `code/`: for compressed base64-encoded project config
- `id/`: for short URLs recognized by shared project id.
Example:
https://livecodes.io/?x=id/bi9qszw86w3
## Import Code from DOM
If the source URL does not match one of the supported origins (GitHub, GitLab and JS Bin), the URL is fetched, its response text is parsed as [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model) and code is extracted from elements that match specific CSS selectors.
(By default: `.livecodes [data-lang="{language}"]`)
:::info Example
```html
This is identified as <strong>HTML</strong> code
```
The HTML editor is prefilled with: `This is identified as HTML code`
Please note that the code should be html-encoded to avoid interference with the HTML of the page.
:::
Example:
https://livecodes.io/?x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html
Alternatively, custom CSS selectors can be specified using [query params](../configuration/query-params.html.md):
`?x={url}&{language}-selector={selector}`
The following example loads the content of the first element that matches the CSS selector `h3` as `html`:
https://livecodes.io/?html-selector=h3&x=https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html
Of course, [embedded playgrounds](./embeds.html.md) can be prefilled with code from the same embedding page. This works well for documentation and educational websites.
[This is a demo](https://live-codes.github.io/livecodes-examples/prefill-from-code-blocks.html) for automatic extraction of code blocks to prefill editors by creating "Edit in LiveCodes" links. Also embedded editors are prefilled from the code blocks. ([View source](https://github.com/live-codes/livecodes-examples/blob/master/prefill-from-code-blocks.html))
## Import Raw Code
If the response text could not be parsed as DOM or no elements matched the CSS selectors, it is assumed to be raw code and the response text is loaded to editor. If the URL ends with an extension it is used to identify the language, otherwise it is assumed to be `html`.
Alternatively, the language of raw code can be specified using [query params](../configuration/query-params.html.md):
`?x={url}&raw={language}`
## Import from CodePen
Currently, CodePen API does not allow directly importing code from Pens. However, you can export any saved Pen as a [zip file](https://blog.codepen.io/documentation/exporting-pens/#export-zip-1) or [Github gist](https://blog.codepen.io/documentation/exporting-pens/#save-as-github-gist-2) and then import it to LiveCodes. The format that Codepen exports is well understood by LiveCodes. Most Pens can be imported with no or minimal changes.
**Note:** External resources (styles/scripts) are not exported with source code in zip file export of CodePen. However, export to GitHub gist does export these. So if a Pen with external resources exported as zip file is not imported properly, try exporting to GitHub gist or manually add the [external resources](./external-resources.html.md).
## Import Code from Image (OCR)
Code can be extracted from images (local or via URL) using [Tesseract.js](https://github.com/naptha/tesseract.js), a library for Optical Character Recognition (OCR).
To ensure accurate identification, the text in the image should be clear, have high contrast against the background, and be free from unrelated text.
Language detection is performed using [highlight.js](https://highlightjs.readthedocs.io/en/latest/api.html#highlightauto), which makes its best guess based on the content.
Best results are obtained when the image is generated using LiveCodes "[Code to Image](./code-to-image.html.md)" feature.
## Import Exported LiveCodes Projects
A [single project exported as JSON](./export.html.md)#exporting-a-single-project) can be imported in the same or a different device from the import screen under the tab "Import Project JSON". The JSON file can be supplied as a local file upload or from a URL.
Similarly, [multiple projects exported in bulk](./export.html.md)#exporting-multiple-projects) can be imported from the tab "Bulk Import".
## Related
- [Code prefill](./code-prefill.html.md)
- [Export](./export.html.md)
- [External resources](./external-resources.html.md)
- [Module resolution](./module-resolution.html.md)
- [Projects](./projects.html.md)
---
# Export
## Exporting A Single Project
Project export can be accessed from the Project menu → Export.
Any project can be exported to:
- **Project (JSON):** a JSON file containing project [configuration object](../configuration/configuration-object.html.md). This can be used to later [import](./import.html.md)#import-exported-livecodes-projects) that project on the same or a different device or to share a copy of the project with others.
- **Source (ZIP):** a zip file containing the project configuration file as JSON, in addition to the source code in separate files. This can be useful for opening the code in an external IDE.
- **Result (HTML):** [result page](./result.html.md) as a single html file. Can be used for the purpose of demo or deploy.
- **GitHub gist** (_requires login with [GitHub account](./github-integration.html.md)_): creates a **public** GitHub gist on the user's GitHub account containing the source code as separate files.
- **CodePen:** creates a [CodePen](https://codepen.io/) prefilled with the project code. If the used [languages/frameworks](./../languages/index.html.md) are not supported in CodePen (e.g. Astro, Svelte, Python, ...etc), the compiled code is exported so that it continues to work there. [Bare module imports](./module-resolution.html.md) are converted to esm imports, for example:
```js
```
becomes:
```js
import React from 'https://cdn.skypack.dev/react';
```
- **JSFiddle:** creates a [JSFiddle](https://jsfiddle.net/) prefilled with the project code. Exported code may be modified like with CodePen (see above).
## Exporting Multiple Projects
Multiple projects can be exported in bulk from the [Saved Projects](./projects.html.md) screen (Project menu → Open) using the button `Export All`.
This produces a JSON file containing an array of project configuration objects. They can be later imported in the same or a different device using the `Bulk Import` functionality in the [Import screen](./import.html.md)#import-exported-livecodes-projects).
All the currently visible projects will be exported. If projects are filtered (e.g. by language, tag or search query), only the shown projects are exported.
## Related
- [Projects](./projects.html.md)
- [Import](./import.html.md)
- [Backup/Restore](./backup-restore.html.md)
- [Sync](./sync.html.md)
- [Share](./share.html.md)
---
# Share
It is easy to share LiveCodes projects!
A URL is generated to load the shared project. This URL can be copied or shared to different social media.
The share screen can be accessed from the share icon at the top right or from the Project menu → Share.
By default, the generated URL encodes the project configuration in a base-64-encoded compressed query string. This step is generated locally in the browser without sending the code to any server. However, depending on the size of the project, the URL can be very long. The length of the URL is indicated in the share screen. [Try not to use very long URLs](https://stackoverflow.com/questions/417142/what-is-the-maximum-length-of-a-url-in-different-browsers) to ensure cross-browser compatibility.
When requested by the user, short URLs can be generated. This requires sending the project configuration (**including source code**) to a server that saves the code and provides a short Id which can be used to retrieve the project.
:::caution
Generating a short URL for sharing requires sending the project configuration (**including source code**) to LiveCodes share service. **It cannot then be deleted**.
:::
:::info Note
The app hosted on [`https://livecodes.io`](https://livecodes.io) uses an API endpoint specifically provided to generate short URLs for LiveCodes share service. We will make every effort to keep that online and available for free use, so long as it is not abused. Please help keep it available by not abusing it and by [sponsoring the project](../sponsor.html.md).
Short URLs generated by LiveCodes share service are **private** — the links are not published anywhere on the site, and the IDs are non-sequential.
However, _static_ [**self-hosted apps**](./self-hosting.html.md) use the free service [dpaste](https://dpaste.com/) for short URLs which are [**deleted after 365 days**](https://dpaste.com/help). If this is a significant issue for you, you may want to use the [docker setup](../advanced/docker.html.md) instead, which provides a self-hosted implementation for the share service among other features. LiveCodes [sponsors](../sponsor.html.md) (Bronze sponsors and above) get access to a hosted implementation.
:::
QR code can be generated for the share URL. This can then be scanned by any QR code scanner (e.g. mobile/tablet camera) to load the project on other devices without having to send the link. Please note that generating QR code also requires generating a short URL (code is sent to the share service - see above).
## Related
- [Export](./export.html.md)
- [Import](./import.html.md)
- [Deploy](./deploy.html.md)
- [Broadcast](./broadcast.html.md)
- [Backup / Restore](./backup-restore.html.md)
- [Sync](./sync.html.md)
- [Permanent URL](./permanent-url.html.md)
---
# Welcome Screen
---
# Recover Unsaved
---
# Code to Image
LiveCodes has a feature called "Code to Image" that allows converting the code in the code editor into nice-looking images (or code screenshots), that can be downloaded or shared.
This can be accessed from the camera icon in the toolbar below the editor. Clicking the icon will open the "Code to Image" screen and load the code in the editor.
Code can be modified in the "Code to Image" screen and then downloaded as image or shared.
There are many options to configure the image to be generated, including background color, border radius, image size, padding, shadow, window style, share URL, editor theme, opacity, code font, image format, etc.
There are multiple presets that can be used or the options can be manually configured.
---
# Display Modes
import LiveCodes from '../../src/components/LiveCodes.tsx';
The [configuration](../configuration/configuration-object.html.md) option [`mode`](../configuration/configuration-object.html.md)#mode), also available as [query param](../configuration/query-params.html.md), can be used to select different display modes.
The following display modes are supported:
## `full`
This is the default mode with toolbars, editor and result panes.
Example: https://livecodes.io/?template=react
Screenshot: (App in full mode)
Demo: (Embedded playground in full mode)
## `focus`
This hides most of UI buttons and menus and keeps only the essential elements: editors, editor titles, result page, console, and run and share buttons. It can be toggled during runtime from the full mode through the UI from a button in the lower left corner. Also the query param `?mode=focus`.
Example: https://livecodes.io/?template=react&mode=focus
Screenshot: (focus mode)
## `simple`
This mode is mainly useful for embedded playgrounds.
It shows only 1 editor with the output (result page +/- console). The content of other editors can be set using [SDK](../sdk/index.html.md) [config](../configuration/configuration-object.html.md) even though the editors are not shown.
By default, `codemirror` editor is used, however, this can be changed by the [`editor`](../configuration/configuration-object.html.md)#editor) option.
By default, the layout is `responsive` but can also be overridden by the [`layout`](../configuration/configuration-object.html.md)#layout) option to `vertical` or `horizontal`.
Demo: JS with console
Demo: JSX & Result page (Monaco editor, add CSS)
export const simpleConfig = {
mode: 'simple',
layout: 'vertical',
activeEditor: 'script',
editor: 'monaco',
tools: { status: 'none' },
script: {
language: 'jsx',
content: `import { atom, useAtom } from 'jotai';\n\nconst countAtom = atom(0);\n\nconst Counter = () => {\n const [count, setCount] = useAtom(countAtom);\n const inc = () => setCount((c) => c + 1);\n return (\n <>\n {count} \n \n );\n};\n\nconst App = () => (\n
\n
Hello Jotai
\n
Enjoy coding!
\n \n
\n);\n\nexport default App;\n`,
},
style: {
language: 'css',
content: '.App {\n font-family: sans-serif;\n text-align: center;\n}\n'.trimStart(),
},
};
## `lite`
Loads a light-weight, minimal code editor, with limited playground features.
See the section about [lite mode](./lite.html.md) for details
Example: https://livecodes.io/?mode=lite&template=react
Demo:
## `editor`
Hides the results pane and works as editor only.
Example: https://livecodes.io/?mode=editor&template=react
Demo:
## `codeblock`
A read-only mode showing only the code block without editor interface. On mouse-over a copy button appears that allows to copy the code. This is specially useful when embedded.
Example: https://livecodes.io/?mode=codeblock&template=react
Demo:
By default, in `codeblock` mode, the light-weight `CodeJar` editor is used (in read-only mode). You can override this by setting the `editor` option. Refer to [Editor Settings](./editor-settings.html.md)#code-editor) for details.
Example: https://livecodes.io/?mode=codeblock&editor=monaco&template=react
Demo:
## `result`
Shows the result page only, with a drawer at the bottom (which can be closed) that allows opening the project in the full playground.
Example: https://livecodes.io/?mode=result&template=react
Demo:
The tools pane (e.g. console/compiled code viewer) is hidden by default in `result` mode. It can be shown if set to `open` or `full`. Refer to [Tools pane](./tools-pane.html.md) documentation for details.
Example: https://livecodes.io/?mode=result&tools=console|full&&js=console.log("Hello%20World!")
Demo:
## Display Mode vs Default View
:::info
"Display Mode" is different from "[Default View](./default-view.html.md)".
In `editor` display mode, only the editor is loaded and the result page is not available. While `editor` default view shows the editor by default, and the result page can be shown by dragging the split gutter.
The same applies for `result` display mode and default view.
:::
---
# Default View
import LiveCodes from '../../src/components/LiveCodes.tsx';
The playground can be loaded in one of the following views:
## `split`
Both the code editor and the result page are visible. This is the default.
Example: https://livecodes.io/?view=split
Demo:
## `editor`
The code editor is visible, while the result page is collapsed. The result page can be shown by dragging the split gutter, or clicking the "Toggle Result" button.
Example: https://livecodes.io/?view=editor
Demo:
## `result`
The result page is visible, while the code editor is collapsed. The code editor can be shown by dragging the split gutter, or clicking one of the editor tabs.
Example: https://livecodes.io/?view=result
Demo:
## Display Mode vs Default View
:::info
"[Display Mode](./display-modes.html.md)" is different from "Default View".
In `editor` display mode, only the editor is loaded and the result page is not available. While `editor` default view shows the editor by default, and the result page can be shown by dragging the split gutter.
The same applies for `result` display mode and default view.
:::
---
# Themes
import ThemeDemo from '../../src/components/ThemeDemo.tsx';
LiveCodes comes with dark and light themes. In addition, a theme color can be set to change the app color.
## Theme
Dark/Light theme can be set in:
- UI, either:
- Dark/Light theme switch in toolbar
- Settings menu → Dark theme switch
- [Query params](../configuration/query-params.html.md): `?theme=dark` or `?theme=light`.
e.g. https://livecodes.io/?theme=light
- [Configuration object](../configuration/configuration-object.html.md): [`theme`](../configuration/configuration-object.html.md)#theme) property.
## Theme Color
Similarly, a theme color can be set in:
- UI: Settings menu → Color
- [Query params](../configuration/query-params.html.md): `?themeColor={color}`.
e.g. https://livecodes.io/?themeColor=lightblue
- [Configuration object](../configuration/configuration-object.html.md): [`themeColor`](../configuration/configuration-object.html.md)#themecolor) property.
## Demo
:::info Note
Please note that editor themes can be set in the [editor settings](./editor-settings.html.md) or using the [`editorTheme`](../configuration/configuration-object.html.md)#editortheme) configuration option.
---
# Mobile Support
LiveCodes provides a responsive layout that adapts to different screen sizes. Don't wait to be on your desk. Try your ideas on the go!
Projects that you create on mobile can be easily [shared](./share.html.md) or [synchronized](./sync.html.md) across devices. You can even share using QR code.
By default, LiveCodes uses the touch-friendly [CodeMirror 6](https://codemirror.net/) editor on mobile. This is configurable in the [editor settings](./editor-settings.html.md) and can be changed at any time.
---
# Embedded Playgrounds
import LiveCodes from '../../src/components/LiveCodes.tsx';
## Overview
LiveCodes playgrounds can be embedded in any web page. The playground can be [prefilled with code](./code-prefill.html.md) in any supported language. This can be very useful in documentation websites, technical blogs, educational websites and others.
Demo:
The embedding web page can communicate with the playground using a powerful [SDK](../sdk/index.html.md) (e.g. edit/format code, watch for code changes, get the compiled code or result page HTML, run tests, change layout, ...etc).
## Create Embedded Playground
### App Embed Screen
In the [standalone app](../getting-started.html.md)#standalone-app), the Embed Screen can be accessed from Project menu → Embed.
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
It shows a preview of the embedded playground, allows customizations of [embed options](../sdk/js-ts.html.md)#embed-options) and provides generated code that can be added to the web page that will embed the playground.
:::info Note
Please note that the Embed Screen sends the project code to [LiveCodes share service](./share.html.md) to generate a short URL for usage in the embed code.
:::
The setting "Embed Type" allows selection from different variations of the generated code:
- Using the SDK from CDN.
- Using the SDK with a bundler (e.g. vite, parcel, webpack, etc).
- Using the React SDK.
- Using the Vue SDK.
- Using iframe and [query params](../configuration/query-params.html.md).
- Using HTML code that the SDK can use to [auto-prefill](./code-prefill.html.md)#auto-prefill-from-page-dom) the playground.
### SDK
The LiveCodes [SDK](../sdk/index.html.md) can be used to embed playgrounds, specify [embed](../sdk/js-ts.html.md)#embed-options) and [configuration](../configuration/index.html.md) options and allows communication with the embedded playground with many [SDK methods](../sdk/js-ts.html.md)#sdk-methods).
This method provides more control and allows advanced scenarios.
## Avoid Breaking Changes
To avoid breaking changes that would cause the embedded playgrounds to stop working as expected with later updates, follow these recommendations:
- Use a [permanent URL](./permanent-url.html.md) to a pinned version of the LiveCodes app for [`EmbedOptions.appUrl`](../sdk/js-ts.html.md)#appurl). The code generated in the Embed screen uses that by default.
- Specify the version of the SDK used. The code generated in the Embed screen also does that.
- For project code, [specify the versions](./module-resolution.html.md)#package-version) of the imported packages and [external resources](./external-resources.html.md). [Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior.
Check the [Permanent URL](./permanent-url.html.md) section for more details.
## Differences from Full App
Some of the features of the full standalone app are not available or shown by default in embedded playgrounds, either because of security reasons, being not useful when embedded or because of space limitations.
### Features Not Available
- All features that require saving/loading from browser storage:
e.g. [projects](./projects.html.md), [assets](./assets.html.md), [code snippets](./snippets.html.md), [user settings](./user-settings.html.md), [default template/language](./default-template-language.html.md), [recover unsaved](./recover.html.md), [backup/restore](./backup-restore.html.md).
- All features that require authentication:
e.g. [login/logout](./github-integration.html.md), [sync](./sync.html.md), [deploy](./deploy.html.md), [importing](./import.html.md) from private github repos.
- [Broadcast](./broadcast.html.md).
- App menus.
- Some tools in [tools pane](./tools-pane.html.md):
e.g. open result page in new window, broadcast status.
- [Welcome screen](./welcome.html.md).
### Features Not Shown by Default
- [External resources](./external-resources.html.md) button (below the editor) and external resources screen are only shown if the loaded project has external resources (e.g. via [`EmbedOptions.config.stylesheets`](../configuration/configuration-object.html.md)#stylesheets) and [`EmbedOptions.config.scripts`](../configuration/configuration-object.html.md)#scripts)).
- [Tests](./tests.html.md) are not shown in [tools pane](./tools-pane.html.md) unless the loaded project has tests (e.g. via [`EmbedOptions.config.tests`](../configuration/configuration-object.html.md)#tests)). Test editor is not available.
- Loading [starter templates](./templates.html.md) can be achieved by the [SDK](../sdk/index.html.md) ([`EmbedOptions.template`](../sdk/js-ts.html.md)#template)), not from the UI.
- [Importing](./import.html.md) from external sources can be achieved by the [SDK](../sdk/index.html.md) ([`EmbedOptions.import`](../sdk/js-ts.html.md)#import)), not from the UI.
- Getting a [share](./share.html.md) URL can be achieved by the [SDK](../sdk/index.html.md) ([`getShareUrl`](../sdk/js-ts.html.md)#getshareurl) method), not from the UI.
## Security
- All user code, [result page](./result.html.md) and compilers run in [sandboxed iframes](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) with a unique origin.
- Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. Communications with the SDK occur by means of [`postMessage`](https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) calls.
## Related
- [SDK](../sdk/index.html.md)
- [Code prefill](./code-prefill.html.md)
- [Configuration](../configuration/index.html.md)
- [Embed options](../sdk/js-ts.html.md)#embed-options)
- [SDK methods](../sdk/js-ts.html.md)#sdk-methods)
- [Permanent URL](./permanent-url.html.md)
- [Lite mode](./lite.html.md)
- [Read-only](./read-only.html.md)
---
# Code Prefill
import LiveCodes from '../../src/components/LiveCodes.tsx';
There are many ways to pre-fill code into playgrounds:
## LiveCodes SDK
This is the recommended way to create playgrounds and pre-fill them with code.
When creating an embedded playground using the [LiveCodes SDK](../sdk/index.html.md), the following [embed options](../sdk/js-ts.html.md)#embed-options) allow pre-fill with code:
### `config`
[`EmbedOptions.config`](../sdk/js-ts.html.md)#config)
Loads a [configuration object](../configuration/configuration-object.html.md) (or a URL to JSON file representing the configuration object)
```js
import { createPlayground } from "livecodes";
const options = {
config: {
markup: {
language: "html",
content: "
Hello World!
",
},
style: {
language: "css",
content: "h1 { color: blue; }",
},
},
};
createPlayground("#container", options);
```
### `import`
[`EmbedOptions.import`](../sdk/js-ts.html.md)#import)
Allows [importing](./import.html.md) from many sources.
Examples:
- Import GitHub directory:
```js
import { createPlayground } from "livecodes";
const options = {
import:
"https://github.com/bradtraversy/50projects50days/tree/master/progress-steps",
};
createPlayground("#container", options);
```
- Import [shared projects](./share.html.md):
```js
import { createPlayground } from "livecodes";
const options = {
import: "id/6ys2b8txf33",
};
createPlayground("#container", options);
```
See the [import](./import.html.md) docs for more information.
### `template`
[`EmbedOptions.template`](../sdk/js-ts.html.md)#template)
Loads one of the [starter templates](./templates.html.md).
```js
import { createPlayground } from "livecodes";
const options = {
template: "react",
};
createPlayground("#container", options);
```
## Query params
[Query parameters](../configuration/query-params.html.md) can provide easy and powerful ways for configuring the playground.
Example:
{'https://livecodes.io/?md=**Hello World!**'}
## Markdown Code Blocks
[Markdown to LiveCodes](../markdown-to-livecodes.html.md) allows converting Markdown code blocks into LiveCodes playgrounds by adding the `livecodes` parameter to the code block language meta.
This is useful for documentation, tutorials, and blog posts where you want to make code examples editable and runnable without writing any JavaScript.
Example:
````md {1}
```jsx livecodes
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
You clicked {count} times.
);
}
export default App;
```
````
## Auto Pre-fill from page DOM
The [LiveCodes SDK](../sdk/index.html.md) UMD script can automatically convert static code blocks on the page into interactive playgrounds. This is useful for documentation, tutorials, and blog posts where you want to make code examples editable and runnable without writing any JavaScript.
### How It Works
Add the LiveCodes UMD script to your page with the `data-prefill` attribute. On page load, the script finds all elements with the class `livecodes` and replaces each one with an embedded playground.
The code content is extracted from elements that have a `data-lang` attribute inside the `.livecodes` element. The `data-lang` attribute is used to determine which language and code editor to use.
```html livecodes render=link
Hello World!
```
### Multiple Languages
You can include multiple `
` blocks with different `data-lang` values to populate several editors in the same playground. For example, to create a playground with HTML, CSS, and TypeScript:
```html livecodes render=link
This code is in HTML code blocks
With HTMLtags
body {
text-align: center;
}
.blue {
color: blue;
}
const p = document.createElement('p');
p.classList.add('blue');
p.innerHTML = 'hello from Typescript!';
document.body.appendChild(p);
```
### Configuration via Data Attributes
Each `.livecodes` element can optionally accept the following data attributes:
**`data-options`**: A JSON string representing [embed options](../sdk/js-ts.html.md)#embed-options), such as `appUrl`, `config`, `import`, `loading`, `params`, and `template`.
```html livecodes render=link
console.log('Hello World!');
```
**`data-height`**: A number (in pixels) or a CSS value representing the height of the playground (see below).
### Setting the Height
The playground height can be set using inline styles:
```html {1} livecodes render=link
Hello World!
```
Alternatively, the height can be set using the `data-height` attribute.
```html {1} livecodes render=link
Hello World!
```
### Escaping Code
It is recommended to escape code inside the code blocks using HTML entities (e.g. `<` instead of `<` and `>` instead of `>`) to avoid being evaluated by the browser as HTML.
However, this is not strictly required.
Example:
```html
<h1>Hello World!</h1>
```
:::caution
The `data-prefill` attribute must be set on the ``}
);
};
## Get Permanent URL
You can get the permanent URL for the app from the [About screen](pathname:///../?screen=about) (Help menu → About). By default, the code generated in the [Embed screen](./embeds.html.md)#app-embed-screen) uses permanent URL.
Alternatively, open the browser console of the standalone app (e.g. https://livecodes.io), and run this:
export const GetPermanentUrl = () => {
const { siteConfig } = useDocusaurusContext();
return (
{`await livecodes.exec('showVersion');\n
// output:
// App Version: ${siteConfig.customFields.appVersion} (https://github.com/live-codes/livecodes/releases/tag/v${siteConfig.customFields.appVersion})
// SDK Version: ${siteConfig.customFields.sdkVersion} (https://www.npmjs.com/package/livecodes/v/${siteConfig.customFields.sdkVersion})
// Git commit: 0698f9f (https://github.com/live-codes/livecodes/commit/0698f9f)
// App Permanent URL: https://v${siteConfig.customFields.appVersion}.livecodes.io/
// SDK Permanent URL: https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}/livecodes.js
`}
);
};
:::caution
Please note that this only applies to the LiveCodes app and its dependencies.
[NPM imports](./module-resolution.html.md) in [project code](./projects.html.md)#script-editor) that do not specify versions use the latest version.
[Package versions](./module-resolution.html.md)#package-version) can be specified in the import.
[Custom import maps](./module-resolution.html.md)#custom-module-resolution) can be set to control the module import behavior.
Example:
```js
import lodash from 'lodash@4.17.21';
console.log(lodash.VERSION); // -> 4.17.21
```
It is recommended to also specify versions of [external resources](./external-resources.html.md).
:::
#### Full Example:
export const FullCode = () => {
const { siteConfig } = useDocusaurusContext();
return (
{`\n`}
);
};
## Related
- [Embedded playgrounds](./embeds.html.md)
- [Share](./share.html.md)
- [SDK](../sdk/index.html.md)
- [`exec` SDK method](../sdk/js-ts.html.md)#exec)
---
# Data URLs
> **Data URLs**, URLs prefixed with the `data:` scheme, allow content creators to embed small files inline in documents.
>
> — [MDN](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs)
Sometimes, you need to use an external file (e.g. script, stylesheet) that is not hosted online. In this case, you can use data URLs to embed the file in your code. These can then be used similar to regular URLs (e.g. for `
```
However, if `imports` is specified as follows:
```json
{
"imports": {
"moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
}
}
```
The import map becomes like this:
```html
```
:::info Note
Currently, multiple import maps are not yet supported. https://crbug.com/927119
When bare module imports are encountered, LiveCodes adds an import map to the result page. If you need to add custom import map or override the automatically generated one, you need to add them to `imports` config property or `imports` [customSettings](#customsettings) property.
:::
### `types`
Type: `[key: string]: string | { autoload?: boolean ; declareAsModule?: boolean ; url: string }`
Default: `{}`
Allows providing custom [TypeScript type declarations](https://www.typescriptlang.org/docs/handbook/2/type-declarations.html) for better [editor intellisense](../features/intellisense.html.md).
It is an object where each key represents module name and value represents the types.
This can be a URL to a type declaration file. For example, if this is the type declaration file:
```ts title="https://my-custom-domain/my-type-declarations.d.ts"
declare module 'my-demo-lib' {
export class Greeter {
morning(): string;
evening(): string;
}
}
```
It can be used like that:
```json
{
"types": {
"my-demo-lib": "https://my-custom-domain/my-type-declarations.d.ts"
}
}
```
Alternatively, the value for module name can be an object with the following properties:
- `url`: `string` (required). The URL to type declaration file.
- `autoload`: `boolean` (optional). By default, the types are only loaded when the module is imported in code. If `autoload` property is set to `true`, the types are loaded regardless if the module was imported.
- `declareAsModule`: `boolean` (optional). Declares the types as module with the supplied module name.
Example:
```json
{
"types": {
"my-demo-lib": {
"url": "https://my-custom-domain/types.d.ts",
"autoload": true,
"declareAsModule": true
}
}
}
```
### `tests`
Type: `undefined` | `Partial`
Default: `{ language: 'typescript', content: '' }`
Configures the [language](../features/tests.html.md)#supported-languages) and content of [tests](../features/tests.html.md).
### `version`
Type: `Readonly` [`string`](../api/interfaces/Config.md#description)
Default: Current LiveCodes Version.
This is a read-only property which specifies the current LiveCodes version. It can be shown using the SDK [`exec`](../sdk/js-ts.html.md)#exec) method.
```js
// in browser console of full app (e.g. https://livecodes.io)
await livecodes.exec('showVersion');
```
Version specified in [exported](../features/export.html.md) projects allows automatically upgrading the project configuration when imported by an app with a newer version.
## App Settings
These are properties that define how the app behaves.
### `readonly`
Type: [`boolean`](../api/interfaces/Config.md#readonly)
Default: `false`
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](../features/editor-settings.html.md)#code-editor) is used. If you wish to use another editor, set the [editor](#editor) property.
### `allowLangChange`
Type: [`boolean`](../api/interfaces/Config.md#allowlangchange)
Default: `true`
If `false`, the UI will not show the menu that allows changing editor language.
### `view`
Type: [`"split" | "editor" | "result"`](../api/interfaces/Config.md#view)
Default: `"split"`
The [default view](../features/default-view.html.md) for the playground.
### `mode`
Type: [`"full" | "focus" | "simple" | "lite" | "result" | "editor" | "codeblock"`](../api/interfaces/Config.md#mode)
Default: `"full"`
Sets the [display mode](../features/display-modes.html.md).
### `tools`
Type: [`Partial<{ enabled: Array<'console' | 'compiled' | 'tests'> | 'all'; active: 'console' | 'compiled' | 'tests' | ''; status: 'closed' | 'open' | 'full' | 'none' | ''; }>`](../api/interfaces/Config.md#tools)
Default: `{ enabled: 'all', active: '', status: '' }`
Sets enabled and active tools and status of [tools pane](../features/tools-pane.html.md).
Example:
```json
{
"tools": {
"enabled": ["console", "compiled"],
"active": "console",
"status": "open"
}
}
```
### `zoom`
Type: [`1 | 0.5 | 0.25`](../api/interfaces/Config.md#zoom)
Default: `1`
Sets result page [zoom level](../features/result.html.md)#result-page-zoom).
## User Settings
These are properties that define the [user settings](./../features/user-settings.html.md), including [editor settings](../features/editor-settings.html.md).
{/*
### `enableAI`
Type: [`boolean`](../api/interfaces/Config.md#enableai)
Default: `false`
If `true`, [AI code assistant](../features/ai.html.md) is enabled.
*/}
### `autoupdate`
Type: [`boolean`](../api/interfaces/Config.md#autoupdate)
Default: `true`
If `true`, the result page is automatically updated on code change, after time [delay](#delay).
### `autosave`
Type: [`boolean`](../api/interfaces/Config.md#autosave)
Default: `false`
If `true`, the project is automatically saved on code change, after time [delay](#delay).
### `autotest`
Type: [`boolean`](../api/interfaces/Config.md#autotest)
Default: `false`
If `true`, the project is watched for code changes which trigger tests to auto-run.
### `delay`
Type: [`number`](../api/interfaces/Config.md#delay)
Default: `1500`
Time delay (in milliseconds) following code change, after which the result page is updated (if [`autoupdate`](#autoupdate) is `true`) and/or the project is saved (if [`autosave`](#autosave) is `true`).
### `formatOnsave`
Type: [`boolean`](../api/interfaces/Config.md#formatonsave)
Default: `false`
If `true`, the code is automatically [formatted](../features/code-format.html.md) on saving the project.
### `layout`
Type: [`"horizontal"| "vertical" | "responsive" | undefined`](../api/interfaces/Config.md#layout)
Default: `"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.
### `theme`
Type: [`"light" | "dark"`](../api/interfaces/Config.md#theme)
Default: `"dark"`
Sets the app [theme](../features/themes.html.md) to light/dark mode.
### `themeColor`
Type: [`string | undefined`](../api/interfaces/Config.md#themecolor)
Default: `"hsl(214, 40%, 50%)"`
A string representing a [CSS color value](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value), used to set the app [theme color](../features/themes.html.md). It can be any valid CSS color value, such as `"#4DB39E"`, `"rgb(245, 225, 49)"`, `"hsl(324, 40%, 50%)"` and `"lightblue"`.
### `editorTheme`
Type: [`EditorTheme[] | string | undefined`](../api/interfaces/Config.md#editortheme)
Default: `undefined`
Sets the code editor themes.
:::info Note
You can preview and set editor themes in the [editor settings screen](pathname:///../?screen=editor-settings).
:::
Three [code editors](#editor) are supported in LiveCodes: **Monaco** (the default on desktop), **CodeMirror** (the default on mobile) and **CodeJar** (the default in [codeblocks](../features/display-modes.html.md)#codeblock), in [lite mode](../features/lite.html.md) and in [readonly](#readonly) playgrounds). Each editor has its own set of themes, represented by the types: [`MonacoTheme`](../api/internal/type-aliases/MonacoTheme.md), [`CodemirrorTheme`](../api/internal/type-aliases/CodemirrorTheme.md) and [`CodejarTheme`](../api/internal/type-aliases/CodejarTheme.md).
The `editorTheme` property can be used to set the editor theme for each editor and on light/dark modes. It can be set to an array of [`EditorTheme`](../api/internal/type-aliases/EditorTheme.md) items or a string of comma-separated items.
Each item can be composed of:
` editor:` `theme-name` `@app-theme`
Where:
- `editor` is the name of the editor (`"monaco" | "codemirror" | "codejar"`). [Optional]
- `theme-name` is the name of the theme (e.g. `"monokai"`). [Required]
Valid theme names can be found here:
- Monaco: [`MonacoTheme`](../api/internal/type-aliases/MonacoTheme.md)
- CodeMirror: [`CodemirrorTheme`](../api/internal/type-aliases/CodemirrorTheme.md)
- CodeJar: [`CodejarTheme`](../api/internal/type-aliases/CodejarTheme.md).
- `app-theme` is the name of the app theme (`"dark" | "light"`). [Optional]
Examples:
- `"vs"`
- `"monaco:twilight, codemirror:one-dark"`
- `["vs@light"]`
- `["vs@light", "vs-dark@dark"]`
- `["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]`
Each `EditorTheme` item requires a theme name. The theme name can optionally be preceded with the editor name separated by a colon to specify the editor (e.g. `"monaco:monokai"`). It can also optionally be followed by the app theme separated by "@" (e.g. `"monokai@dark"`).
Multiple `EditorTheme` items can be supplied (as array items or in the comma-separated string) to specify the theme for each editor and in dark and light modes. The order matters. The first valid item in the array or string for the current editor (`monaco`, `codemirror` or `codejar`) and app theme (`light` or `dark`) will be used. If no items match the current editor and app theme, the default theme for the editor and app theme will be used.
### `appLanguage`
Type: [`AppLanguage | undefined`](../api/interfaces/Config.md#applanguage)
Default: `undefined`
Spoken language code that sets the app UI language (e.g. `"ar"`, `"zh-CN"`). Used in translations for internationalization. If `undefined` (the default), the language is automatically detected based on the user's browser settings and falls back to English, if detection fails or the language is not supported.
### `recoverUnsaved`
Type: [`boolean`](../api/interfaces/Config.md#recoverunsaved)
Default: `true`
Enables [recovering last unsaved project](../features/recover.html.md) when the app is reopened.
### `welcome`
Type: [`boolean`](../api/interfaces/Config.md#welcome)
Default: `true`
If `true`, the [welcome screen](../features/welcome.html.md) is displayed when the app loads.
### `showSpacing`
Type: [`boolean`](../api/interfaces/Config.md#showspacing)
Default: `false`
Enables [showing element spacing](../features/result.html.md)#show-spacings) in the result page.
### `editor`
Type: [`"monaco" | "codemirror" | "codejar" | "auto" | undefined`](../api/interfaces/Config.md#editor)
Default: `undefined`
Selects the [code editor](../features/editor-settings.html.md)#code-editor) to use.
If `undefined` (the default):
Monaco editor is used on desktop,
CodeMirror is used on mobile and in `simple` mode,
while CodeJar is used in [`codeblock` mode](../features/display-modes.html.md)#codeblock), in [`lite` mode](../features/lite.html.md) and in [`readonly`](#readonly) playgrounds.
If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.
### `fontFamily`
Type: [`string | undefined`](../api/interfaces/Config.md#fontfamily)
Default: `undefined`
Sets the [code editor](../features/editor-settings.html.md) font family.
### `fontSize`
Type: [`number | undefined`](../api/interfaces/Config.md#fontfamily)
Default: `undefined`
Sets the [code editor](../features/editor-settings.html.md) font size.
If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](../features/embeds.html.md).
### `useTabs`
Type: [`boolean`](../api/interfaces/Config.md#usetabs)
Default: `false`
If `true`, lines are indented with tabs instead of spaces. Also used in [code formatting](../features/code-format.html.md).
### `tabSize`
Type: [`number`](../api/interfaces/Config.md#tabsize)
Default: `2`
The number of spaces per indentation-level. Also used in [code formatting](../features/code-format.html.md).
### `lineNumbers`
Type: [`boolean | "relative"`](../api/interfaces/Config.md#linenumbers)
Default: `true`
Show line numbers in [code editor](../features/editor-settings.html.md).
If set to `"relative"`, line numbers are shown relative to the current line. This can be useful with [vim mode](#editormode).
### `wordWrap`
Type: [`boolean`](../api/interfaces/Config.md#wordwrap)
Default: `false`
Enables word-wrap for long lines.
### `closeBrackets`
Type: [`boolean`](../api/interfaces/Config.md#closebrackets)
Default: `true`
Use auto-complete to close brackets and quotes.
### `foldRegions`
Type: [`boolean`](../api/interfaces/Config.md#foldregions)
Default: `false`
When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded.
### `minimap`
Type: [`boolean`](../api/interfaces/Config.md#minimap)
Default: `false`
Enables minimap in code editor.
### `emmet`
Type: [`boolean`](../api/interfaces/Config.md#emmet)
Default: `true`
Enables [Emmet](../features/editor-settings.html.md)#emmet).
### `editorMode`
Type: [`"vim" | "emacs" | undefined`](../api/interfaces/Config.md#editormode)
Default: `undefined`
Sets [editor mode](../features/editor-settings.html.md)#editor-modes).
### `semicolons`
Type: [`boolean`](../api/interfaces/Config.md#semicolons)
Default: `true`
Configures Prettier [code formatter](../features/code-format.html.md) to use [semi-colons](https://prettier.io/docs/en/options.html#semicolons).
### `singleQuote`
Type: [`boolean`](../api/interfaces/Config.md#singlequote)
Default: `false`
Configures Prettier [code formatter](../features/code-format.html.md) to use [single quotes instead of double quotes](https://prettier.io/docs/en/options.html#quotes).
### `trailingComma`
Type: [`boolean`](../api/interfaces/Config.md#trailingcomma)
Default: `true`
Configures Prettier [code formatter](../features/code-format.html.md) to use [trailing commas](https://prettier.io/docs/en/options.html#trailing-commas).
---
# Query Parameters
import LiveCodes from '../../src/components/LiveCodes.tsx';
A flexible and convenient way to configure the app is to use URL query parameters.
It allows configuration of a wide range of options, including those of the [configuration object](./configuration-object.html.md) and [embed options](../sdk/js-ts.html.md)#embed-options).
Example:
```
https://livecodes.io?js=console.log('Hello World!')&console=open
```
## Usage
- All properties of [configuration object](./configuration-object.html.md) and [embed options](../sdk/js-ts.html.md)#embed-options) that have values of primitive types (e.g. string, number, boolean) can be assigned to a query parameter with the same name.
These include:
[config](../sdk/js-ts.html.md)#config),
[import](../sdk/js-ts.html.md)#import),
[lite](../configuration/configuration-object.html.md)#mode),
[loading](../sdk/js-ts.html.md)#loading),
[template](../sdk/js-ts.html.md)#template),
[view](../configuration/configuration-object.html.md)#view),
[title](./configuration-object.html.md)#title),
[description](./configuration-object.html.md)#description),
[activeEditor](./configuration-object.html.md)#activeeditor),
[cssPreset](./configuration-object.html.md)#csspreset),
[readonly](./configuration-object.html.md)#readonly),
[allowLangChange](./configuration-object.html.md)#allowlangchange),
[mode](./configuration-object.html.md)#mode),
[autoupdate](./configuration-object.html.md)#autoupdate),
[autosave](./configuration-object.html.md)#autosave),
[delay](./configuration-object.html.md)#delay),
[formatOnsave](./configuration-object.html.md)#formatonsave),
[theme](./configuration-object.html.md)#theme),
[themeColor](./configuration-object.html.md)#themecolor),
[appLanguage](./configuration-object.html.md)#applanguage),
[recoverUnsaved](./configuration-object.html.md)#recoverunsaved),
[welcome](./configuration-object.html.md)#welcome),
[showSpacing](./configuration-object.html.md)#showspacing),
[layout](./configuration-object.html.md)#layout),
[editor](./configuration-object.html.md)#editor),
[editorTheme](./configuration-object.html.md)#editortheme),
[fontFamily](./configuration-object.html.md)#fontfamily),
[fontSize](./configuration-object.html.md)#fontsize),
[useTabs](./configuration-object.html.md)#usetabs),
[tabSize](./configuration-object.html.md)#tabsize),
[lineNumbers](./configuration-object.html.md)#linenumbers),
[wordWrap](./configuration-object.html.md)#wordwrap),
[closeBrackets](./configuration-object.html.md)#closebrackets),
[emmet](./configuration-object.html.md)#emmet),
[editorMode](./configuration-object.html.md)#editormode),
[semicolons](./configuration-object.html.md)#semicolons),
[singleQuote](./configuration-object.html.md)#singlequote),
[trailingComma](./configuration-object.html.md)#trailingcomma).
Example:
```
?theme=light&delay=500&lineNumbers=false
```
- Any value given for booleans except `"false"` (including no value) will be considered `true`.
Example: all these are considered `true`
```
?lite=true
?lite=1
?lite=any
?lite
```
while this is considered `false`
```
?lite=false
```
- Parameters that expect array of values can be supplied with comma separated values. These include:
[tags](./configuration-object.html.md)#tags),
[languages](./configuration-object.html.md)#languages),
[processors](./configuration-object.html.md)#processors),
[stylesheets](./configuration-object.html.md)#stylesheets),
[scripts](./configuration-object.html.md)#scripts).
Example:
```
?processors=tailwindcss,autoprefixer
```
- Custom Settings can be set like this:
```
?customSettings={template:{prerender:false}}
```
or this:
```
?customSettings.template.prerender=false
```
- Values set in the URL query parameters override those set in [configuration object](./configuration-object.html.md).
- Unlike [user settings](../features/user-settings.html.md) that are set in the UI which are saved and subsequently used, those that are set in query parameters are not automatically saved.
- Additional query parameters include:
- `no-defaults`: `boolean` (Default: `false`).
If `true`, the app will not load the [default template/language](../features/default-template-language.html.md).
- `x`: `string`.
Alias to [`import`](../sdk/js-ts.html.md)#import) (a URL to [import](../features/import.html.md)).
- `files`: `string`.
A comma-separated [list of files to import](../features/import.html.md)#file-selection).
- `raw`: [`Language`](../api/type-aliases/Language.md).
When used with `import` or `x`, imports the URL as code of the provided language.
- `language`: [`Language`](../api/type-aliases/Language.md).
The language to load by default in the editor.
- `lang`: [`Language`](../api/type-aliases/Language.md).
Alias to `language`.
- `active`: `"markup" | "style" | "script" | 0 | 1 | 2`.
Alias to [`activeEditor`](./configuration-object.html.md)#activeeditor).
- `tools`: `"open" | "full" | "closed" | "console" | "compiled" | "tests" | "none"`
The [tools pane](../features/tools-pane.html.md) status.
- `console`: `"open" | "full" | "closed" | "none"`
The [console](../features/console.html.md) status.
- `compiled`: `"open" | "full" | "closed" | "none"`
The [compiled code viewer](../features/compiled-code.html.md) status.
- `tests`: `"open" | "full" | "closed" | "none"`
The [tests panel](../features/tests.html.md) status.
- `scrollPosition`: `boolean` (Default: `true`).
If `false`, the [result page](../features/result.html.md) [scroll position](../features/result.html.md)#scroll-position) will not be maintained after reload.
- Any [`Language`](../api/type-aliases/Language.md) can used as a query parameter, and the value will be used as its code.
Example:
```
https://livecodes.io?js=console.log('Hello World!')
```
:::info Examples
For usage examples, check [storybook](pathname:///../stories/?path=/story/embed-options-params--select-language) and [unit tests](https://github.com/live-codes/livecodes/blob/develop/src/livecodes/config/__tests__/build-config.spec.ts).
:::
{/* TODO: add docs for languageSelector and ToolsStatus */}
---
# LiveCodes SDK
import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import LiveCodes from '../../src/components/LiveCodes.tsx';
The Software Development Kit (SDK) provides an easy, yet powerful, interface to embed and communicate with LiveCodes playgrounds.
The SDK is provided as a light-weight [npm package](#npm-package) (or [jsr package](#jsr)), that is also available from [CDNs](#cdn). It can be used to create playgrounds with a wide variety of [configurations](../configuration/configuration-object.html.md) and [embed options](js-ts.html.md)#embed-options). In addition, [SDK methods](js-ts.html.md)#sdk-methods) allow programmatic communication and control of the playgrounds during runtime.
The [JavaScript SDK](js-ts.html.md) is framework/library agnostic. However, wrapper components are also provided for popular libraries (currently [React](react.html.md), [Preact](preact.html.md), [Vue](vue.html.md), [Solid](solid.html.md) and [Svelte](svelte.html.md)), in addition to a [web component](web-components.html.md). [TypeScript support](js-ts.html.md)#typescript-types) provides type-safety and a great developer experience.
## SDK Demo
This is an example of an editable embedded playground using the SDK.
## Installation
### NPM Package
This is a single npm package for the SDK which provides support for JavaScript/TypeScript, Preact, React, Solid, Svelte, Vue and Web Components.
Install the library from npm:
```bash npm2yarn
npm install livecodes
```
then it can be used like that:
```js title="index.js"
import { createPlayground } from 'livecodes';
createPlayground('#container', {
// embed options
});
```
### JSR
The SDK is also available as a [JSR package](https://jsr.io/@livecodes/sdk). Install it with Deno:
```bash
deno add jsr:@livecodes/sdk
```
then it can be used like that:
```js title="index.js"
import { createPlayground } from 'jsr:@livecodes/sdk';
createPlayground('#container', {
// embed options
});
```
### CDN
Alternatively, it can just be loaded from a CDN.
ESM:
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import CodeBlock from '@theme/CodeBlock';
export const ESMCode = () => {
const { siteConfig } = useDocusaurusContext();
return (
{`\n`}
);
};
UMD:
export const UMDCode = () => {
const { siteConfig } = useDocusaurusContext();
return (
{`\n\n
`}
);
};
:::note
The UMD version allows [automatic code pre-fill](../features/code-prefill.html.md)#auto-pre-fill-from-page-dom) from the page DOM when `data-prefill` attribute is added to the script tag.
:::
:::info
In the full [standalone app](../getting-started.html.md)#standalone-app), the JavaScript SDK is accessible via the global variable `livecodes`, which can be interacted with in the browser console.
:::
## Usage
The SDK is currently provided in the following variations:
- [JavaScript/TypeScript](./js-ts.html.md)
- [Preact](./preact.html.md)
- [React](./react.html.md)
- [Solid](./solid.html.md)
- [Svelte](./svelte.html.md)
- [Vue](./vue.html.md)
- [Web Components](./web-components.html.md)
## Headless Mode
The SDK also has a [headless mode](./headless.html.md). In this mode, no visible output is displayed in the embedding web page. However, all [SDK methods](../sdk/js-ts.html.md)#sdk-methods) are accessible. This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI.
## SDK Playground!
A demo page that shows the usage of the SDK can be [found here](https://live-codes.github.io/livecodes-examples/sdk-demo.html) ([source](https://github.com/live-codes/livecodes-examples/blob/gh-pages/sdk-demo.html)).
Or edit the SDK playground in LiveCodes. How meta! :)
P.S. You may want to use the "Full Screen" button!
---
# JavaScript/TypeScript SDK
import LiveCodes from '../../src/components/LiveCodes.tsx';
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
This is the core SDK on which others ([Preact](preact.html.md), [React](react.html.md), [Solid](solid.html.md), [Svelte](svelte.html.md), [Vue](vue.html.md) and [Web Components](web-components.html.md) SDKs) are built on top. It is a light-weight, zero-dependencies library that allows creating, embedding and communication with LiveCodes playgrounds. It also allows easily creating links to playgrounds.
## Installation
Please refer to the [SDK installation](./index.html.md)#installation) section.
:::info
In the full [standalone app](../getting-started.html.md)#standalone-app), the JavaScript SDK is accessible via the global variable `livecodes`, which can be interacted with in the browser console.
:::
## TypeScript Types
TypeScript types are [documented here](../api/globals.md) and can be imported from the library.
```ts
import type { EmbedOptions, Playground } from 'livecodes';
```
The following 2 functions are exported by the library:
## `createPlayground`
Type: [`(container: string | Element, options?: EmbedOptions) => Promise`](../api/functions/createPlayground.md)
The library exports the function `createPlayground` which has 2 parameters:
- `container` (required): `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](./headless.html.md), in which this parameter is optional and can be omitted).
- `options` (optional): an object with embed options ([EmbedOptions](../api/interfaces/EmbedOptions.md)).
The `createPlayground` function returns a promise which resolves to an object that exposes the SDK methods ([Playground](../api/interfaces/Playground.md)).
```ts
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
// appUrl: ...
// config: ...
// headless: ...
// import: ...
// loading: ...
// params: ...
// template: ...
};
createPlayground('#container', options).then((playground) => {
// the `playground` object exposes the SDK methods
// e.g. playground.run()
});
```
:::caution Throws
The `createPlayground` function throws an error (promise is rejected) in any of the following conditions:
- The first parameter ([`container`](#createplayground)) is not an element or not found (by CSS selector), except in [headless mode](./headless.html.md).
- The embed option [`appUrl`](#appurl) is supplied and is not a valid URL.
- The embed option [`config`](#config) is supplied and is not an object or a valid URL.
- Any of the [SDK methods](#sdk-methods) was called after calling the [`destroy`](#destroy) method.
:::
### Multiple Sources
When multiple sources are provided in the [embed options](#embed-options), each is converted to a [configuration object](../configuration/configuration-object.html.md) and the properties are merged.
In case there are conflicts between the properties of the configurations, they are overridden in the following order:
- [`template`](#template) (lowest precedence)
- [`import`](#import)
- [`config`](#config)
- [`params`](#params) (highest precedence)
## `getPlaygroundUrl`
Type: [`(options?: EmbedOptions) => string`](../api/functions/getPlaygroundUrl.md)
Gets the URL to playground (as a string) from the provided [options](#embed-options). This can be useful for providing links to run code in playgrounds.
Example:
```html
\nOpen in playground\n`,
};
## `compress`
Type: `(uncompressed: string) => string`
A utility function that allows compressing the stringified config object (e.g. for [sharing in URL hash](../tutorials/creating-shareable-urls.html.md)). It encodes it in base64 with a few tweaks to make it URI safe.
This is the `compressToEncodedURIComponent` function re-exported from [`lz-string`](https://www.npmjs.com/package/lz-string) for convenience.
```js
import { compress } from 'livecodes';
const config = {
markup: {
language: 'html',
content: '
Hello World!
',
},
};
const compressed = compress(JSON.stringify(config));
```
## `decompress`
Type: `(compressed: string) => string | null`
A utility function that allows decompressing the config object (compressed by [`compress`](#compress)). It decodes it to a string that should be `JSON.parse`d.
This is the `decompressFromEncodedURIComponent` function re-exported from [`lz-string`](https://www.npmjs.com/package/lz-string) for convenience.
```js
import { decompress } from 'livecodes';
const decompressed = decompress(compressedString);
if (decompressed) {
try {
const config = JSON.parse(decompressed);
} catch {
// invalid JSON
}
}
```
## Embed Options
Type: [`EmbedOptions`](../api/interfaces/EmbedOptions.md)
The [`createPlayground`](#createplayground) and [`getPlaygroundUrl`](#getplaygroundurl) functions accept an optional object that allows providing different options to the playground. This object can have the following optional properties:
### `appUrl`
Type: [`string`](../api/interfaces/EmbedOptions.md#appurl)
Default: `"https://livecodes.io/"`
Allows loading the playground from a custom URL (e.g. a [self-hosted app](../features/self-hosting.html.md) or a [permanent URL](../features/permanent-url.html.md)).
If supplied with an invalid URL, an error is thrown.
### `config`
Type: [`string | Partial`](../api/interfaces/EmbedOptions.md#config)
Default: `{}`
A [configuration object](../configuration/configuration-object.html.md) 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.
### `headless`
Type: [`boolean`](../api/interfaces/EmbedOptions.md#headless)
Default: `false`
When set to `true`, the playground is loaded in [headless mode](./headless.html.md).
### `import`
Type: [`string`](../api/interfaces/EmbedOptions.md#import)
A resource to [import](../features/import.html.md) (from any of the supported [sources](../features/import.html.md)#sources)).
### `loading`
Type: [`"eager" | "lazy" | "click"`](../api/interfaces/EmbedOptions.md#loading)
Default: `"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.
### `params`
Type: [`UrlQueryParams`](../api/interfaces/EmbedOptions.md#params)
An object that represents [URL Query parameters](../configuration/query-params.html.md), 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!' } });
```
### `template`
Type: [`TemplateName`](../api/interfaces/EmbedOptions.md#template)
A [starter template](../features/templates.html.md) to load. Allowed valued can be found [here](../api/interfaces/EmbedOptions.md#template).
## SDK Methods
The [`createPlayground`](#createplayground) function returns a promise which resolves to an object ([`Playground`](../api/interfaces/Playground.md)) that exposes some useful SDK methods that can be used to interact with the playground. These methods include:
### `load`
Type: [`() => Promise`](../api/interfaces/Playground.md#load)
When the embed option `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.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
await playground.load();
// playground loaded
});
```
### `run`
Type: [`() => Promise`](../api/interfaces/Playground.md#run)
Runs the [result page](../features/result.html.md) (after any required compilation for code).
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
await playground.run();
// new result page is displayed
});
```
### `format`
Type: [`(allEditors?: boolean) => Promise`](../api/interfaces/Playground.md#format)
[Formats the code](../features/code-format.html.md).
By default, the code in all editors (markup, style and script) is formatted.
If you wish to format only the active editor, pass the value `false` as an argument.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
await playground.format();
// code in editors is formatted
});
```
### `getShareUrl`
Type: [`(shortUrl?: boolean) => Promise`](../api/interfaces/Playground.md#getshareurl)
Gets a [share url](../features/share.html.md) 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.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
const longUrl = await playground.getShareUrl();
const shortUrl = await playground.getShareUrl(true);
});
```
### `getConfig`
Type: [`(contentOnly?: boolean) => Promise`](../api/interfaces/Playground.md#getconfig)
Gets a config object representing the playground state. This can be used to restore state if passed as [embed option](#createplayground) property on creating playground, or can be manipulated and loaded in run-time using [`setConfig`](#setconfig) method.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
const config = await playground.getConfig();
});
```
### `setConfig`
Type: [`(config: Partial) => Promise`](../api/interfaces/Playground.md#setconfig)
Loads a new project using the passed configuration object.
If it is a string, it is assumed to be a URL to a JSON file that contains the configuration object.
It throws an error if the config object (or URL) is invalid.
```js
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
});
```
### `getCode`
Type: [`() => Promise`](../api/interfaces/Playground.md#getcode)
Gets the playground code (including source code, source language and compiled code) for each editor (`markup`, `style`, `script`), in addition to result page HTML.
```js
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;
});
```
### `show`
Type: [`(panel: 'editor' | 'markup' | 'style' | 'script' | 'console' | 'compiled' | 'tests' | 'result' | 'toggle-result', options?: { full?: boolean; line?: number; column?: number; zoom?: 1 | 0.5 | 0.25 }) => Promise`](../api/interfaces/Playground.md#show)
Shows the selected panel, which is either:
- Active Editor: `editor`
- Specific Editor: `markup`, `style` or `script`
- Tool: `console`, `compiled` or `tests`
- Result page: `result` or `toggle-result`
The second optional argument is an object:
- It may have the boolean property `full`, which If `true`, selected editor or result page will take the full vertical and horizontal space of the playground, while tools will take the full vertical and half the horizontal space, leaving some space for the active editor.
- The optional properties `line` and `column` allow scrolling to line/column number in the shown editor.
- The optional property `zoom` sets the result page [zoom level](../features/result.html.md)#result-page-zoom) (the selected panel must be `result`).
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
const delay = (duration) =>
new Promise((resolve) => {
setTimeout(resolve, duration);
});
await playground.show('toggle-result');
await delay(2000);
await playground.show('style');
await delay(2000);
await playground.show('result', { full: true });
await delay(2000);
await playground.show('script');
await delay(2000);
await playground.show('result', { zoom: 0.5 });
await delay(2000);
await playground.show('console', { full: true });
});
```
### `runTests`
Type: [`() => Promise<{ results: TestResult[] }>`](../api/interfaces/Playground.md#runtests)
Runs project [tests](./../features/tests.html.md) (if present) and gets test results.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
const { results } = await playground.runTests();
});
```
### `watch`
Type: [docs](../api/interfaces/Playground.md#watch)
```ts
((event: 'load', fn: () => void) => { remove: () => void }) &
((event: 'ready', fn: (data: { config: Config }) => void) => { remove: () => void }) &
((event: 'code', fn: (data: { code: Code; config: Config }) => void) => { remove: () => void }) &
((event: 'console', fn: (data: { method: string; args: any[] }) => void) => { remove: () => void }) &
((event: 'tests', fn: (data: { results: TestResult[]; error?: string }) => void) => { remove: () => void }) &
((event: 'destroy', fn: () => void) => { remove: () => void });
```
Allows to watch for various playground events. It takes 2 arguments: event name and a callback function that will be called on every event.
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.
```js
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
});
```
These are the events that can be watched and the description of their callback functions:
- `"load"`: Called when the playground first loads.
```ts
(
event: "load",
fn: () => void
) => { remove: () => void }
```
- `"ready"`: Called when a new project is loaded (including when [imported](../features/import.html.md)) and the playground is ready to run.
```ts
(
event: "ready",
fn: (data: { config: Config }) => void
) => { remove: () => void }
```
- `"code"`: Called when the playground "content" is changed (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)).
This includes changes in:
- Code (in editors)
- Editor languages
- [CSS processors](../features/css.html.md)#css-processors)
- [External resources](../features/external-resources.html.md)
- Project info (e.g. allows adding content in page head and attributes to `` element)
- [Custom settings](../advanced/custom-settings.html.md) (e.g. allows changing [import maps](../features/module-resolution.html.md)#custom-module-resolution))
- Project title
- [Test](../features/tests.html.md) code
```ts
(
event: "code",
fn: (data: { code: Code; config: Config }) => void
) => { remove: () => void }
```
- `"console"`: Called when the playground console gets new outputs. The callback method is passed an object with 2 properties: `"method"` (e.g. `"log"`, `"error"`, etc.) and `"args"` (the arguments passed to the method, as an array).
```ts
(
event: "console",
fn: (data: { method: string; args: any[] }) => void
) => { remove: () => void }
```
- `"tests"`: Called when tests run and test results are available (see [`runTests`](./js-ts.html.md)#runtests)).
```ts
(
event: "tests",
fn: (data: { results: TestResult[]; error?: string }) => void
) => { remove: () => void }
```
- `"destroy"`: Called when the playground is destroyed.
```ts
(
event: "destroy",
fn: () => void
) => { remove: () => void }
```
### `onChange`
**Deprecated**: Use [`watch`](#watch) method instead.
Type: [`(fn: ChangeHandler) => { remove: () => void }`](../api/interfaces/Playground.md#onchange)
Allows to watch the playground for changes. It takes a callback function that will be called on every change.
The callback function will be called with an object that has 2 properties: `code` and `config`, representing the current codes and configuration objects (see [`getCode`](#getcode) and [`getConfig`](#getconfig)).
The `onChange` method returns an object with a single method `remove`, which when called will remove the callback from watching changes.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then((playground) => {
const watcher = playground.onChange(({ code, config }) => {
// this will run on every code change
console.log('code:', code);
console.log('config:', config);
});
// then later
watcher.remove();
// changes are no longer watched
});
```
### `exec`
Type: [`(command: APICommands, ...args: any[]) => Promise<{ output: any } | { error: string }>`](../api/interfaces/Playground.md#exec)
Execute custom commands, including:
- `"setBroadcastToken"`: Sets [broadcast `userToken`](../features/broadcast.html.md)#technical-details).
```js
// in browser console of full app (e.g. https://livecodes.io)
await livecodes.exec('setBroadcastToken', 'my-token');
```
- `"showVersion"`: Logs the current LiveCodes app version, SDK version, git commit SHA, [permanent app URL](../features/permanent-url.html.md) and SDK URL in the browser console.
```js
// in browser console of full app (e.g. https://livecodes.io)
await livecodes.exec('showVersion');
```
### `destroy`
Type: [`() => Promise`](../api/interfaces/Playground.md#destroy)
Destroys the playground instance, and removes event listeners. Further call to any SDK methods throws an error.
```js
import { createPlayground } from 'livecodes';
createPlayground('#container').then(async (playground) => {
await playground.destroy();
// playground destroyed
// any further SDK call throws an error
});
```
## Styles
### Default Styles
By default, the container element is styled when the SDK is initialized (including width, height, border, etc.). To disable default styles, set the container element attribute `data-default-styles` to `"false"` before initializing.
Example:
```html
```
### Height
By default, the playground container height is set to `"300px"`. To change the height, either disable the default styles and override them, or simply set the `data-height` attribute to a number (in pixels) or any valid CSS value for `height` property (e.g. `"100%"` to take the full height of its parent element).
Example:
```html
```
## Demo
export const sdkDemo = {
js: `import { createPlayground } from "livecodes";\n\nconst params = {\n html: "
Hello World!
",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, LiveCodes!")',\n console: "open",\n};\n\ncreatePlayground('#container', { params });\n`,
html: '',
};
## Related
- [Preact SDK](./preact.html.md)
- [React SDK](./react.html.md)
- [Solid SDK](./solid.html.md)
- [Svelte SDK](./svelte.html.md)
- [Vue SDK](./vue.html.md)
- [Web Components SDK](./web-components.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)
---
# Preact SDK
import LiveCodes from '../../src/components/LiveCodes.tsx';
The Preact SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use Preact component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods).
## Demo
export const preactSDKDemo = {
jsx: `import LiveCodes from "livecodes/preact";\n\nconst App = () => {\n const params = {\n html: "
Hello World!
",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, World!")',\n console: "open",\n };\n\n return ;\n};\n\nexport default App;\n`,
};
## Installation
Please refer to the [SDK installation](./index.html.md)#installation) section.
## Usage
The Preact component is provided as the default export from `livecodes/preact`.
```jsx title="JSX" livecodes render=link
import LiveCodes from 'livecodes/preact';
export default () => ;
```
### TypeScript Support
Prop types are exported as `Props` from `livecodes/preact`.
```tsx title="TSX" livecodes render=link
import LiveCodes, { type Props } from 'livecodes/preact';
const options: Props = {
// embed options
};
export default () => ;
```
For convenience, the following types are also exported from `livecodes/preact`:
`Code`, `Config`, `EmbedOptions`, `Language`, `Playground`.
TypeScript types are [documented here](../api/globals.md).
### Props
All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types.
Example:
```jsx title="JSX" livecodes render=link
import LiveCodes from 'livecodes/preact';
const config = {
markup: {
language: 'markdown',
content: '# Hello World!',
},
};
export default () => ;
```
In addition, the following props are also available:
- `className`
Type: `string`.
Class name(s) to add to playground container element.
Example:
```jsx title="JSX" livecodes render=link
import LiveCodes from 'livecodes/preact';
export default () => ;
```
- `height`
Type: `string`.
Sets the [height of playground container](js-ts.html.md)#height) element.
Example:
```jsx title="JSX" livecodes render=link
import LiveCodes from 'livecodes/preact';
export default () => ;
```
- `style`
Type: `Record`.
Defines styles to add to playground container element. Styles set here override the [default styles](js-ts.html.md)#default-styles).
Example:
```tsx title="JSX" livecodes render=link
import LiveCodes from 'livecodes/preact';
const style = {
margin: 'auto',
width: '80%',
};
export default () => ;
```
- `sdkReady`
Type: `(sdk: Playground) => void`.
A callback function, that is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods).
Example:
```tsx title="TSX" livecodes render=link
import { useState } from 'preact/hooks';
import LiveCodes, { type Props } from 'livecodes/preact';
import type { Playground } from 'livecodes';
export default () => {
const [playground, setPlayground] = useState();
const onReady = (sdk: Playground) => {
setPlayground(sdk);
};
const run = async () => {
await playground?.run();
};
const options: Props = {
config: {
markup: {
language: 'html',
content: '
Hello World!
',
},
},
};
return (
<>
);
};
```
### Reactive Props
Changing any prop will cause the playground to reload with the new options.
However, changing the `config` prop is an exception — it updates the playground in place using the SDK method [`setConfig`](js-ts.html.md)#setconfig), without triggering a full reload.
This allows for a smooth update experience when only the configuration changes.
Example:
```jsx title="JSX" livecodes render=link
import { useState } from 'preact/hooks';
import LiveCodes from 'livecodes/preact';
export default () => {
const [config, setConfig] = useState({
markup: {
language: 'html',
content: '
Hello World!
',
},
});
function switchToMarkdown() {
setConfig({
markup: {
language: 'markdown',
content: '# Hello World! (from Markdown)',
},
});
}
return (
<>
);
};
```
## Storybook
See [storybook](pathname:///../stories/preact/) for usage examples.
## Related
- [SDK Installation](./index.html.md)#installation)
- [JS/TS SDK](./js-ts.html.md)
- [React SDK](./react.html.md)
- [Solid SDK](./solid.html.md)
- [Svelte SDK](./svelte.html.md)
- [Vue SDK](./vue.html.md)
- [Web Components SDK](./web-components.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)
---
# React SDK
import LiveCodes from '../../src/components/LiveCodes.tsx';
The React SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use react component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods).
## Demo
export const reactSDKDemo = {
jsx: `import LiveCodes from "livecodes/react";\n\nconst App = () => {\n const params = {\n html: "
Hello World!
",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, World!")',\n console: "open",\n };\n\n return ;\n};\n\nexport default App;\n`,
};
## Installation
Please refer to the [SDK installation](./index.html.md)#installation) section.
## Usage
The React component is provided as the default export from `livecodes/react`.
```jsx title="JSX" livecodes render=link lang=react
import LiveCodes from 'livecodes/react';
export default () => ;
```
### TypeScript Support
Prop types are exported as `Props` from `livecodes/react`.
```tsx title="TSX" livecodes render=link lang=react.tsx
import LiveCodes, { type Props } from 'livecodes/react';
const options: Props = {
// embed options
};
export default () => ;
```
For convenience, the following types are also exported from `livecodes/react`:
`Code`, `Config`, `EmbedOptions`, `Language`, `Playground`.
TypeScript types are [documented here](../api/globals.md).
### Props
All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types.
Example:
```jsx title="JSX" livecodes render=link lang=react
import LiveCodes from 'livecodes/react';
const config = {
markup: {
language: 'markdown',
content: '# Hello World!',
},
};
export default () => ;
```
In addition, the following props are also available:
- `className`
Type: `string`.
Class name(s) to add to playground container element.
Example:
```jsx title="JSX" livecodes render=link lang=react
import LiveCodes from 'livecodes/react';
export default () => ;
```
- `height`
Type: `string`.
Sets the [height of playground container](js-ts.html.md)#height) element.
Example:
```jsx title="JSX" livecodes render=link lang=react
import LiveCodes from 'livecodes/react';
export default () => ;
```
- `style`
Type: `Record`.
Defines styles to add to playground container element. Styles set here override the [default styles](js-ts.html.md)#default-styles).
Example:
```tsx title="JSX" livecodes render=link lang=react
import LiveCodes from 'livecodes/react';
const style = {
margin: 'auto',
width: '80%',
};
export default () => ;
```
- `sdkReady`
Type: `(sdk: Playground) => void`.
A callback function, that is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods).
Example:
```tsx title="TSX" livecodes render=link lang=react.tsx
import { useState } from 'react';
import LiveCodes, { type Props } from 'livecodes/react';
import type { Playground } from 'livecodes';
export default () => {
const [playground, setPlayground] = useState();
const onReady = (sdk: Playground) => {
setPlayground(sdk);
};
const run = async () => {
await playground?.run();
};
const options: Props = {
config: {
markup: {
language: 'html',
content: '
Hello World!
',
},
},
};
return (
<>
);
};
```
### Reactive Props
Changing any prop will cause the playground to reload with the new options.
However, changing the `config` prop is an exception — it updates the playground in place using the SDK method [`setConfig`](js-ts.html.md)#setconfig), without triggering a full reload.
This allows for a smooth update experience when only the configuration changes.
Example:
```jsx title="JSX" livecodes render=link lang=react
import { useState } from 'react';
import LiveCodes from 'livecodes/react';
export default () => {
const [config, setConfig] = useState({
markup: {
language: 'html',
content: '
Hello World!
',
},
});
function switchToMarkdown() {
setConfig({
markup: {
language: 'markdown',
content: '# Hello World! (from Markdown)',
},
});
}
return (
<>
);
};
```
## Storybook
See [storybook](pathname:///../stories/react/) for usage examples.
## Related
- [SDK Installation](./index.html.md)#installation)
- [Preact SDK](./preact.html.md)
- [Solid SDK](./solid.html.md)
- [Svelte SDK](./svelte.html.md)
- [Vue SDK](./vue.html.md)
- [Web Components SDK](./web-components.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)
---
# Solid SDK
import LiveCodes from '../../src/components/LiveCodes.tsx';
The Solid SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use Solid component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods).
## Demo
export const solidSDKDemo = {
solid: `import LiveCodes from "livecodes/solid";\n\nconst App = () => {\n const params = {\n html: "
Hello World!
",\n css: "h1 {color: blue;}",\n js: 'console.log("Hello, World!")',\n console: "open",\n };\n\n return ;\n};\n\nexport default App;\n`,
};
## Installation
Please refer to the [SDK installation](./index.html.md)#installation) section.
## Usage
The Solid component is provided as the default export from `livecodes/solid`.
```jsx title="JSX" livecodes render=link lang=solid
import LiveCodes from 'livecodes/solid';
export default () => ;
```
### TypeScript Support
Prop types are exported as `Props` from `livecodes/solid`.
```tsx title="TSX" livecodes render=link lang=solid.tsx
import LiveCodes, { type Props } from 'livecodes/solid';
const options: Props = {
// embed options
};
export default () => ;
```
For convenience, the following types are also exported from `livecodes/solid`:
`Code`, `Config`, `EmbedOptions`, `Language`, `Playground`.
TypeScript types are [documented here](../api/globals.md).
### Props
All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types.
Example:
```jsx title="JSX" livecodes render=link lang=solid
import LiveCodes from 'livecodes/solid';
const config = {
markup: {
language: 'markdown',
content: '# Hello World!',
},
};
export default () => ;
```
In addition, the following props are also available:
- `class`
Type: `string`.
Class name(s) to add to playground container element.
Example:
```jsx title="JSX" livecodes render=link lang=solid
import LiveCodes from 'livecodes/solid';
export default () => ;
```
- `height`
Type: `string`.
Sets the [height of playground container](js-ts.html.md)#height) element.
Example:
```jsx title="JSX" livecodes render=link lang=solid
import LiveCodes from 'livecodes/solid';
export default () => ;
```
- `style`
Type: `JSX.CSSProperties`.
Defines styles to add to playground container element. Styles set here override the [default styles](js-ts.html.md)#default-styles).
Example:
```tsx title="JSX" livecodes render=link lang=solid
import LiveCodes from 'livecodes/solid';
const style = {
margin: 'auto',
width: '80%',
};
export default () => ;
```
- `sdkReady`
Type: `(sdk: Playground) => void`.
A callback function, that is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods).
Example:
```tsx title="TSX" livecodes render=link lang=solid.tsx
import { createSignal } from 'solid-js';
import LiveCodes, { type Props } from 'livecodes/solid';
import type { Playground } from 'livecodes';
export default () => {
const [playground, setPlayground] = createSignal();
const onReady = (sdk: Playground) => {
setPlayground(sdk);
};
const run = async () => {
await playground()?.run();
};
const options: Props = {
config: {
markup: {
language: 'html',
content: '
Hello World!
',
},
},
};
return (
<>
);
};
```
### Reactive Props
Changing any prop will cause the playground to reload with the new options.
However, changing the `config` prop is an exception — it updates the playground in place using the SDK method [`setConfig`](js-ts.html.md)#setconfig), without triggering a full reload.
This allows for a smooth update experience when only the configuration changes.
Example:
```jsx title="JSX" livecodes render=link lang=solid
import { createSignal } from 'solid-js';
import LiveCodes from 'livecodes/solid';
export default () => {
const [config, setConfig] = createSignal({
markup: {
language: 'html',
content: '
Hello World!
',
},
});
function switchToMarkdown() {
setConfig({
markup: {
language: 'markdown',
content: '# Hello World! (from Markdown)',
},
});
}
return (
<>
);
};
```
## Storybook
See [storybook](pathname:///../stories/solid/) for usage examples.
## Related
- [SDK Installation](./index.html.md)#installation)
- [JS/TS SDK](./js-ts.html.md)
- [Preact SDK](./preact.html.md)
- [React SDK](./react.html.md)
- [Svelte SDK](./svelte.html.md)
- [Vue SDK](./vue.html.md)
- [Web Components SDK](./web-components.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)
---
# Svelte SDK
import LiveCodes from '../../src/components/LiveCodes.tsx';
The Svelte SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use Svelte component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods).
It requires Svelte 5 and uses [runes](https://svelte.dev/docs/svelte/what-are-runes) for reactivity.
## Demo
export const svelteSDKDemo = {
svelte: `\n\n\n`,
};
## Installation
Please refer to the [SDK installation](./index.html.md)#installation) section.
## Usage
The Svelte component is provided as the default export from `livecodes/svelte`.
```html title="Svelte" livecodes render=link lang=svelte
```
### TypeScript Support
Prop types are exported as `Props` from `livecodes/svelte`.
```html title="Svelte (TypeScript)" livecodes render=link lang=svelte
```
For convenience, the following types are also exported from `livecodes/svelte`:
`Code`, `Config`, `EmbedOptions`, `Language`, `Playground`.
TypeScript types are [documented here](../api/globals.md).
### Props
All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types.
Example:
```html title="Svelte" livecodes render=link lang=svelte
```
In addition, the following props are also available:
- `class`
Type: `string`.
Class name(s) to add to playground container element.
Example:
```html title="Svelte" livecodes render=link lang=svelte
```
- `height`
Type: `string`.
Sets the [height of playground container](js-ts.html.md)#height) element.
Example:
```html title="Svelte" livecodes render=link lang=svelte
```
- `style`
Type: `Record`.
Defines styles to add to playground container element. Styles set here override the [default styles](js-ts.html.md)#default-styles).
Example:
```html title="Svelte" livecodes render=link lang=svelte
```
- `sdkReady`
Type: `(sdk: Playground) => void`.
A callback function, that is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods).
Example:
```html title="Svelte (TypeScript)" livecodes render=link lang=svelte
```
### Reactive Props
Changing any prop will cause the playground to reload with the new options.
However, changing the `config` prop is an exception — it updates the playground in place using the SDK method [`setConfig`](js-ts.html.md)#setconfig), without triggering a full reload.
This allows for a smooth update experience when only the configuration changes.
Example:
```html title="Svelte" livecodes render=link lang=svelte
```
## Storybook
See [storybook](pathname:///../stories/svelte/) for usage examples.
## Related
- [SDK Installation](./index.html.md)#installation)
- [JS/TS SDK](./js-ts.html.md)
- [Preact SDK](./preact.html.md)
- [React SDK](./react.html.md)
- [Solid SDK](./solid.html.md)
- [Vue SDK](./vue.html.md)
- [Web Components SDK](./web-components.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)
---
# Vue SDK
import LiveCodes from '../../src/components/LiveCodes.tsx';
The Vue SDK is a thin wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use vue component, yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods).
## Demo
export const vueSDKDemo = {
vue: `\n\n\n \n\n`,
};
## Installation
Please refer to the [SDK installation](./index.html.md)#installation) section.
## Usage
The Vue component is provided as the default export from `livecodes/vue`.
```html title="Vue" livecodes render=link lang=vue
```
### TypeScript Support
Prop types are exported as `Props` from `livecodes/vue`.
```html title="Vue" livecodes render=link lang=vue
```
For convenience, the following types are also exported from `livecodes/vue`:
`Code`, `Config`, `EmbedOptions`, `Language`, `Playground`.
TypeScript types are [documented here](../api/globals.md).
### Props
All [embed options](js-ts.html.md)#embed-options) are available as props with the corresponding types.
Example:
```html title="Vue" livecodes render=link lang=vue
```
In addition, the following prop is also available:
- `height`
Type: `string`.
Sets the [height of playground container](js-ts.html.md)#height) element.
Example:
```html title="Vue" livecodes render=link lang=vue
```
### Events
- `"sdkReady"`
Type: `(sdk: Playground) => void`.
When the playground initializes, the event `"sdkReady"` is emitted. The event handler function is provided with an instance of the [JavaScript SDK](js-ts.html.md) representing the current playground. This allows making use of full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods).
Example:
```html title="Vue" livecodes render=link lang=vue
```
### Styles
Styles can be applied to the component [as usual](https://vuejs.org/guide/essentials/class-and-style.html#binding-html-classes).
By default, a set of [default styles](js-ts.html.md)#default-styles) are applied to the playground container. Styles passed to the component override these default styles.
Example:
```html title="Vue" livecodes render=link lang=vue
```
### Reactive Props
Changing any prop will cause the playground to reload with the new options.
However, changing the `config` prop is an exception — it updates the playground in place using the SDK method [`setConfig`](js-ts.html.md)#setconfig), without triggering a full reload.
This allows for a smooth update experience when only the configuration changes.
Example:
```html title="Vue" livecodes render=link lang=vue
```
## Storybook
See [storybook](pathname:///../stories/vue/) for usage examples.
## Related
- [SDK Installation](./index.html.md)#installation)
- [JS/TS SDK](./js-ts.html.md)
- [Preact SDK](./preact.html.md)
- [React SDK](./react.html.md)
- [Solid SDK](./solid.html.md)
- [Svelte SDK](./svelte.html.md)
- [Web Components SDK](./web-components.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)
---
# Web Components SDK
import LiveCodes from '../../src/components/LiveCodes.tsx';
The Web Components SDK is a wrapper around the [JavaScript SDK](js-ts.html.md) to provide an easy to use custom element (``), yet retaining the full power, by having access to the [SDK methods](js-ts.html.md)#sdk-methods).
## Demo
export const webComponentsSDKDemo = {
markup: {
language: 'html',
content: `
Hello World!
`,
},
};
## Installation
Please refer to the [SDK installation](./index.html.md)#installation) section.
## Usage
The custom element is registered by importing `livecodes/web-components`.
### Using a bundler
```html title="HTML"
```
### Using a CDN
Alternatively, you can load the web components SDK directly from a CDN using a script tag:
import CodeBlock from '@theme/CodeBlock';
export const UMDCode = () => (
{`
`}
);
### TypeScript Support
Types are exported from `livecodes/web-components` for convenience:
```ts title="TypeScript"
import type { EmbedOptions, Playground } from 'livecodes/web-components';
```
The following types are available:
`Code`, `Config`, `EmbedOptions`, `Language`, `Playground`.
TypeScript types are [documented here](../api/globals.md).
### Declarative Code via Children \{#declarative-children}
You can provide code for the playground declaratively using child elements inside a wrapper ``. This avoids the need to set code in JavaScript strings and gives you full IDE syntax highlighting and autocomplete.
The outer `` element (highlighted in the example below) ensures that inner `
```
If the `lang` attribute is omitted, the defaults are `html`, `css`, and `javascript`.
{/*
#### Multi-File Mode
Use a `filename` attribute instead of `lang` to provide multiple files. The language is inferred from the file extension. The element type (``, `
```
*/}
#### Active Editor
Use the `active` boolean attribute on a code element to set the initially active editor:
```html {5} title="HTML"
Hello
```
{/*
In multi-file mode, `active` sets the active file:
```html title="HTML"
Hello
```
*/}
#### Combining Children with Config
You can combine declarative children with `config` (attribute or property) and `params`. The merge precedence is:
1. **`config` property** (highest — explicit programmatic override)
2. **Children** (declarative defaults)
3. **`config` attribute** (lowest — inline JSON settings)
Children are best used for code content, while the `config` attribute is useful for non-code settings:
```html title="HTML"
Hello Tailwind
```
If the `config` property is set programmatically for the same editor, the property wins:
```html title="HTML"
Default from children
```
#### Reactivity
Children content is reactive. Programmatically changing the content inside the wrapper `` will trigger a call to [`setConfig`](js-ts.html.md)#setconfig) on the existing playground.
However, updating the [`config` property](#properties) is the preferred way to change the content.
```html title="HTML"
Hello World!
```
### Attributes
The following HTML attributes are supported and correspond to [embed options](js-ts.html.md)#embed-options):
| Attribute | Type | Description |
| ---------------------- | --------- | --------------------------------------------------------------------------------------------------------------------- |
| `app-url` | `string` | The URL of the LiveCodes app. |
| `config` | `string` | A JSON string representing the [config object](../api/interfaces/Config.md). |
| `import` | `string` | A resource to [import](../features/import.html.md). |
| `loading` | `string` | When to load the playground (`"click"`, `"lazy"`, or `"eager"`). |
| `params` | `string` | A JSON string representing [URL Query parameters](../configuration/query-params.html.md). |
| `template` | `string` | A [starter template](../features/templates.html.md) to load. |
| `headless` | `boolean` | Whether to use the headless mode of LiveCodes. |
| `height` | `string` | Sets the [height of playground container](js-ts.html.md)#height) element. |
| `data-default-styles` | `string` | If set to `"false"`, disables the [default styles](js-ts.html.md)#default-styles) applied to the playground container. |
Example:
```html title="HTML"
```
#### Default Styles
By default, the `` element is styled when the playground is initialized (including height, border, etc.). To disable default styles, set the `data-default-styles` attribute to `"false"`.
```html title="HTML"
```
### Properties
For complex values it is recommended to use JavaScript properties on the element.
- `config`
Type: `object | string`.
The [config object](../api/interfaces/Config.md) for the playground or the URL of the config file.
Example:
```html title="HTML"
```
- `params`
Type: `object`.
An object that represents [URL Query parameters](../configuration/query-params.html.md).
Example:
```html title="HTML"
```
- `sdk`
Type: `Playground | undefined` (read-only).
The playground SDK instance. Available after the playground has been initialized. This allows making use of the full capability of the SDK by calling [SDK methods](js-ts.html.md)#sdk-methods).
Example:
```html title="HTML"
```
### Events
- `sdkready`
Fired when the SDK is ready. The SDK instance is available via `event.detail.sdk` or via the [`sdk`](#properties) property on the element. Use this event to access the [SDK methods](js-ts.html.md)#sdk-methods).
Example:
```html title="HTML"
```
### Reactive Attributes and Properties
Changing any attribute or property will cause the playground to reload with the new options.
However, changing the `config` property is an exception — it updates the playground in place using the SDK method [`setConfig`](js-ts.html.md)#setconfig), without triggering a full reload.
This allows for a smooth update experience when only the configuration changes.
Similarly, changing the `height` attribute and [children content](#reactivity) also update the playground in place without triggering a full reload.
Example:
```html title="HTML"
```
### Methods
- `destroy()`
Destroys the playground instance and cleans up resources. This is also called automatically when the element is removed from the DOM.
Example:
```html title="HTML"
```
## Storybook
See [storybook](pathname:///../stories/web-components/) for usage examples.
## Related
- [SDK Installation](./index.html.md)#installation)
- [JS/TS SDK](./js-ts.html.md)
- [Preact SDK](./preact.html.md)
- [React SDK](./react.html.md)
- [Solid SDK](./solid.html.md)
- [Svelte SDK](./svelte.html.md)
- [Vue SDK](./vue.html.md)
- [Embedded Playgrounds](../features/embeds.html.md)
---
# Headless Mode
import LiveCodes from '../../src/components/LiveCodes.tsx';
The LiveCodes [SDK](../sdk/index.html.md) can be used to create playgrounds in headless mode. In this mode, no visible output is displayed in the embedding web page. However, all [SDK methods](../sdk/js-ts.html.md)#sdk-methods) are accessible (e.g. for [updating code](./js-ts.html.md)#setconfig), [getting compiled code](./js-ts.html.md)#getcode), console output, [result HTML](./js-ts.html.md)#getcode), [shareable URLs](./js-ts.html.md)#getshareurl), [formatting code](./js-ts.html.md)#format), [running tests](./js-ts.html.md)#runtests), etc).
This provides the power of leveraging the wide range of features and language support offered by LiveCodes, while retaining full control over the UI.
## Usage
To create a headless playground, set the [embed option](./js-ts.html.md)#embed-options) [`headless`](../sdk/js-ts.html.md)#headless) to `true`.
Please note that in headless mode, the first parameter (`container`) of the function [`createPlayground`](../sdk/js-ts.html.md)#createplayground) is optional and can be omitted.
Example:
```js {4}
import { createPlayground } from 'livecodes';
createPlayground({
headless: true,
config: {
markup: {
language: 'markdown',
content: '# Hello World!',
},
},
}).then(async (playground) => {
const code = await playground.getCode();
console.log(code.markup.compiled); // "
Hello World!
"
console.log(code.result); // (result page HTML)
});
```
## Examples
The following examples show how to use the headless mode to make a Markdown editor, an MDX editor and a Python interpreter.
:::tip
You may want to view the following playgrounds in full screen (using the full screen button in the top right of each playground).
:::
### Markdown Editor
In this demo, code changes are watched using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `code` and `config` (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). The compiled code is obtained as `code.markup.compiled`.
export const mdDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes";\n import debounce from "https://esm.sh/debounce";\n\n const initialCode = "# Hello, LiveCodes!\\n\\n";\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "markdown",\n });\n editor.setSize("100%", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n headless: true,\n };\n\n const livecodes = await createPlayground(options);\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: "markdown",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(compile, 1000));\n livecodes.watch("code", ({ code, config }) => {\n createSandbox(document.querySelector("#output"), code.markup.compiled);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement("iframe");\n iframe.src = "https://livecodes-sandbox.pages.dev/v9/";\n iframe.sandbox =\n "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, "*");\n };\n container.innerHTML = "";\n container.appendChild(iframe);\n return iframe;\n };\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }}
### MDX Editor
In this demo, code changes are watched using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `code` and `config` (see [`getCode`](./js-ts.html.md)#getcode) and [`getConfig`](./js-ts.html.md)#getconfig)). The result HTML is obtained as `code.result`.
:::tip
If you do not want to run the result page in the headless playground and only want to get the generated result HTML, you can set the configuration option [`autoupdate](../configuration/configuration-object.html.md)#autoupdate) to `false`.
:::
export const mdxDemo = { markup: { language: 'html', content: `\n
\n \n \n );\n};\n\n\n\n## MDX in short\n\n- ❤️ Powerful\n- 💻 Everything is a component\n- 🔧 Customizable\n- 📚 Markdown-based\n- 🔥 Blazingly blazing fast\n\n> from [mdxjs.com](https://mdxjs.com/)\n\`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "markdown",\n });\n editor.setSize("100%", 200);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n headless: true,\n config: { autoupdate: false },\n };\n\n const livecodes = await createPlayground(options);\n\n const compile = async () => {\n await livecodes.setConfig({\n autoupdate: false,\n markup: {\n language: "mdx",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(compile, 1000));\n livecodes.watch("code", ({ code, config }) => {\n createSandbox(document.querySelector("#output"), code.result);\n });\n\n await compile();\n\n // create a sandbox for safe execution of compiled code\n function createSandbox (container, html) {\n const iframe = document.createElement("iframe");\n iframe.src = "https://livecodes-sandbox.pages.dev/v7/";\n iframe.sandbox =\n "allow-same-origin allow-downloads allow-forms allow-modals allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts";\n iframe.onload = () => {\n iframe.contentWindow.postMessage({ html }, "*");\n };\n container.innerHTML = "";\n container.appendChild(iframe);\n return iframe;\n };\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/markdown/markdown.js">\x3C/script>\n\n\n` }}
### Python Interpreter
In this demo, console output is obtained using the SDK method [`watch('code', callback)`](./js-ts.html.md)#watch). The callback function accepts an argument which is an object with the properties `method` and `args` indicating the console method and the arguments that were passed (as an array).
export const pyDemo = { markup: { language: 'html', content: `\n
Loading...
\n\n\x3Cscript type="module">\n import { createPlayground } from "https://cdn.jsdelivr.net/npm/livecodes";\n import debounce from "https://esm.sh/debounce";\n\n const initialCode = \`def say_hello(name):\n return f"Hello, {name}!"\n\nprint(say_hello("LiveCodes"))\n\`;\n\n // the code editor\n const editor = CodeMirror.fromTextArea(document.getElementById("editor"), {\n lineNumbers: true,\n mode: "python",\n });\n editor.setSize("100%", 250);\n editor.setValue(initialCode);\n\n // the playground\n const options = {\n headless: true,\n };\n\n const livecodes = await createPlayground(options);\n\n const run = async () => {\n await livecodes.setConfig({\n autoupdate: true,\n script: {\n language: "python",\n content: editor.doc.getValue(),\n },\n });\n };\n\n // watch for changes\n editor.on("change", debounce(run, 1000));\n livecodes.watch("console", ({ method, args }) => {\n const output = document.querySelector("#output");\n output.innerHTML = args.join("\\n");\n if (method === "error") {\n output.style.color = "red";\n } else {\n output.style.color = "unset";\n }\n });\n\n await run();\n\x3C/script>\n\n\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/lib/codemirror.js">\x3C/script>\n\x3Cscript src="https://unpkg.com/codemirror@5.65.15/mode/python/python.js">\x3C/script>\n\n\n` }}
---
# Advanced Topics {#advanced-topics-custom-content-top}
```mdx-code-block
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
item.docId !== 'languages/index')}/>
```
---
# Custom Settings
---
# Services
LiveCodes (being a [client-side](../why.html.md)#client-side) app) uses multiple services (for example for short-URL [sharing](../features/share.html.md), [broadcast server](../features/broadcast.html.md), authentication, module resolution, etc).
Some of these services are not supported on _static_ [self-hosted](../features/self-hosting.html.md) deploys and are either replaced by other compatible services or require you to provide alternative ones.
Examples:
- The [share](../features/share.html.md) service in [self-hosted](../features/self-hosting.html.md) apps uses [dpaste](https://dpaste.com/) for short URLs, which are [**deleted after 365 days**](https://dpaste.com/help).
- [Firebase configuration](https://github.com/live-codes/livecodes/tree/develop/src/livecodes/services/firebase.ts) for authentication.
Demo for a static self-hosted app (on GitHub Pages): https://live-codes.github.io/livecodes
Most likely, you will not need to provide these services yourself, and the app will work just fine using the other compatible services (e.g. dpaste).
However, if you do need to provide them, you may wish to use the included [docker setup](../advanced/docker.html.md) which provides a self-hosted implementation for these services, very similar to the official [hosted app](https://livecodes.io).
You can find the list of provided services [here](../advanced/docker.html.md)#services).
Demo for a self-hosted app that uses the [docker setup](../advanced/docker.html.md) (on a VPS): https://vps.livecodes.io
:::info
LiveCodes [sponsors](../sponsor.html.md) (Bronze sponsors and above) get access to a hosted [docker setup](../advanced/docker.html.md) with managed [services](../advanced/docker.html.md)#services).
:::
---
# Docker Setup
This guide makes it easy to set up a self-hosted instance of LiveCodes on a VPS using Docker.
## Why?
LiveCodes is a [client-side app](../why.html.md)#client-side). It can be easily self-hosted on any static file server or CDN (See [Self-Hosting guide](../features/self-hosting.html.md)).
All core functionalities (e.g. editors, compilers, formatters, code execution, etc) run in the browser.
However, some features require [external services](./services.html.md) which depend on server-side implementations (e.g. [sharing](../features/share.html.md) short URLs, [broadcast server](../features/broadcast.html.md), etc).
The docker setup described here provides out-of-the-box implementations for self-hosting these services.
See below for the list of provided [services](#services).
This allows self-hosted instances to have the same features as the hosted app ([livecodes.io](https://livecodes.io)).
:::warning Note
Most self-hosted instances will not require this setup. The static app should work just fine using other simpler [self-hosting methods](../features/self-hosting.html.md)#guide).
Only use the docker setup if you need to self-host [these services](#services).
:::
## Example
This is an example of a self-hosted instance deployed to a VPS using the included Docker setup:
https://vps.livecodes.io/
Setting it up can be as simple as running the following command:
```sh
HOST_NAME=vps.livecodes.io docker compose up --build -d
```
## Requirements
- Docker and Docker Compose ([installation guide](https://docs.docker.com/engine/install/))
- Git: optional - for pulling updates ([installation guide](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git))
Example script to install Docker, Docker Compose and Git on Ubuntu
```sh title="install_docker_ubuntu.sh"
#!/bin/bash
# Update package lists
sudo apt update
# Install Docker
sudo apt install -y ca-certificates curl gnupg lsb-release
curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg
echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt update
sudo apt install -y docker-ce docker-ce-cli containerd.io
# Add current user to docker group
sudo usermod -aG docker $USER
newgrp docker # Apply group changes immediately
# Install Docker Compose
sudo apt install -y docker-compose
# Install Git
sudo apt install -y git
```
To use this script:
**Save**
Save the script to a file, for example: `install_docker_ubuntu.sh`.
**Make Executable**
Make the script executable with:
```sh
chmod +x install_docker_ubuntu.sh
```
**Run**
Execute the script using:
```sh
sudo ./install_docker_ubuntu.sh
```
**Verify**
Verify the installations with:
```sh
docker --version
docker compose version
git --version
```
## Getting Started
:::info note
When running in a non-local environment (e.g. VPS),
make sure your domain's A/AAAA DNS records properly point to the machine public IP **before** running the docker containers.
The hostname should be set using [environment variables](#environment-variables).
:::
Clone the repo:
```sh
git clone https://github.com/live-codes/livecodes.git
```
Enter the directory:
```sh
cd livecodes
```
Optionally, checkout a specific branch:
```sh
git checkout main
```
Run docker compose:
```sh
docker compose up -d
```
By default, the app is served at https://livecodes.localhost
(Yes, `localhost` can be served over HTTPS and have subdomains!).
The hostname and many other options can be set using [environment variables](#environment-variables).
## Services
- Automatic HTTPS
This is provided by [Caddy server](https://caddyserver.com), which automatically obtains and renews TLS certificates.
Local addresses (e.g. `localhost`, `livecodes.localhost`) are served over HTTPS using locally-trusted certificates.
- [Open Graph meta tags](https://ogp.me/)
Provide project-specific meta tags, for social media cards.
- [oEmbed](https://oembed.com/)
Allows embedded representations on third party sites.
- Adding [headers](https://github.com/live-codes/livecodes/blob/develop/src/_headers)
e.g. aggressive caching of static assets for improved performance.
- [Short-URL share service](../features/share.html.md)
Generates a short URL that can be shared. The project config is stored in a [Valkey](https://valkey.io/) store (a Redis fork with a permissive open-source license).
Data is persisted to disk every 60 seconds (See [Volumes](#volumes) section below).
- [Broadcast server](../features/broadcast.html.md)
Broadcasts updates to connected clients.
- CORS proxy
Allows [importing content](../features/import.html.md) from external URLs.
- Separate origin sandbox
Runs code in a separate origin [sandboxed iframe](https://www.html5rocks.com/en/tutorials/security/sandboxed-iframes/) to prevent cross-site scripting.
- [404 page](https://livecodes.io/404)
Custom 404 page for resources that are not found.
## Environment Variables
The app can be customized by setting different environment variables.
Environment variables can be defined in a `.env` file in the root of the repository (on the same level as `docker-compose.yml`).
```txt title=".env"
HOST_NAME=playground.website.com
```
Please note that some variables are used **during build**. So after setting environment variables, the app needs to be rebuilt. e.g.:
```sh
docker compose up --build -d
```
The following environment variables are supported:
| Variable | Description | Default |
| --- | --- | --- |
| `HOST_NAME` | Hostname of the app | `livecodes.localhost` |
| `PORT` | Port of the app | `443` |
| `SELF_HOSTED_SHARE` | Enable [share service](../features/share.html.md) | `true` |
| `SELF_HOSTED_BROADCAST` | Enable [broadcast server](../features/broadcast.html.md) | `true` |
| `BROADCAST_PORT` | Port of the broadcast server | `3030` |
| `BROADCAST_TOKENS` | Comma-separated list of broadcast [user tokens](../features/broadcast.html.md)#technical-details) | |
| `SANDBOX_HOST_NAME` | Hostname of the sandbox | `$HOST_NAME` |
| `SANDBOX_PORT` | Port of the sandbox | `8090` |
| `FIREBASE_CONFIG` | [Firebase config object](https://firebase.google.com/docs/web/learn-more#config-object) (JSON), used for [authentication](../features/github-integration.html.md) | |
| `DOCS_BASE_URL` | [Base URL](../features/self-hosting.html.md)#custom-build) of the documentation (e.g. `/docs/`) | `null` |
| `LOG_URL` | Full URL to send [server-side analytics](https://github.com/live-codes/livecodes/blob/develop/functions/index.ts) (e.g. `https://api.website.com/log`) | `null` |
:::info note
When running in a non-local environment (e.g. VPS),
setting the `HOST_NAME` environment variable is **required**. It should match the domain name set in [DNS records](#getting-started).
:::
## Volumes
The following docker [volumes](https://docs.docker.com/engine/storage/volumes/) are used:
- `./assets` - A [bind mount](https://docs.docker.com/engine/storage/bind-mounts/) for static assets that get served under the app URL (`/assets/`). This can be used to serve images, stylesheets, [custom modules](../features/module-resolution.html.md)#custom-module-resolution), [custom types](../features/intellisense.html.md)#custom-types), etc.
- `livecodes-share-data` - A [named volume](https://docs.docker.com/engine/storage/volumes/) where persistent data for the share service is saved. Make sure to **backup** this.
Example scripts to backup and restore Docker named volumes
```sh title="backup-volumes.sh"
#!/bin/bash
VOLUMES=("livecodes-share-data")
BACKUP_DIR="./backups"
mkdir -p $BACKUP_DIR
for VOLUME in "${VOLUMES[@]}"; do
echo "Backing up $VOLUME..."
docker run --rm \
-v $VOLUME:/data \
-v $(pwd)/$BACKUP_DIR:/backup \
alpine \
tar cvf /backup/$VOLUME.tar /data
done
echo "Backup complete. Files are in $BACKUP_DIR."
```
```sh title="restore-volumes.sh"
#!/bin/bash
VOLUMES=("livecodes-share-data")
BACKUP_DIR="./backups"
for VOLUME in "${VOLUMES[@]}"; do
echo "Restoring $VOLUME..."
docker volume create $VOLUME
docker run --rm \
-v $VOLUME:/data \
-v $(pwd)/$BACKUP_DIR:/backup \
alpine \
tar xvf /backup/$VOLUME.tar -C /data --strip 1
done
echo "Restore complete."
```
## Deployment
For continuous deployment, you can use the included [GitHub Actions workflow](https://github.com/live-codes/livecodes/blob/develop/.github/workflows/docker-deploy.yml) to deploy to a VPS when a new commit is pushed (e.g. to the `main` branch).
This assumses that you have followed the [Getting Started](#getting-started) instructions and have cloned the repo to your VPS.
The workflow uses [secrets](https://docs.github.com/en/actions/how-tos/security-for-github-actions/security-guides/using-secrets-in-github-actions) and [variables](https://docs.github.com/en/actions/how-tos/writing-workflows/choosing-what-your-workflow-does/store-information-in-variables) from your GitHub repo settings for SSH access and setting required [environment variables](#environment-variables).
---
# Languages
## Overview
The term "language" used in these documentations refer to any technology (in addition to web languages: HTML, CSS and JavaScript), that needs some form of transformation/compilation to run in the browser.
LiveCodes provides support for a wide range of languages, which include (but not limited to):
- Syntax used by web libraries/frameworks (e.g. JSX, TSX, Vue SFC, Svelte SFC, MDX, Astro).
- Languages that transpile to JavaScript (e.g. TypeScript, CoffeeScript, LiveScript, ReScript).
- Languages/frameworks that generate CSS (e.g. SCSS, Less, Stylus, Tailwind CSS, UnoCSS).
- CSS processors (e.g. PostCSS, Autoprefixer, Lightning CSS, CSS Modules, cssnano)
- Traditional programming languages (e.g. Python, Ruby, Go, PHP, C++, R, Lua, Scheme, Perl).
- Data manipulation/logic languages (e.g. SQL, Prolog).
- Authoring/templating languages (e.g Markdown, AsciiDoc, Pug, Handlebars, Haml).
- Low-code/visual editors (e.g. blockly, rich text editor).
- Modeling languages/diagram-as-code (e.g. Gnuplot, Graphviz, Mermaid, Vega, Plotly).
- Languages that target WebAssembly (e.g. AssemblyScript, WebAssembly Text Format)
- ... and others.
Below is the full list of supported languages with documentations for usage in LiveCodes.
## Language List
```mdx-code-block
import DocCardList from '@theme/DocCardList';
import {useCurrentSidebarCategory} from '@docusaurus/theme-common';
item.docId !== 'languages/index')}/>
```
---
# art-template
[art-template](https://aui.github.io/art-template/) is a high performance JavaScript templating engine.
## Usage
There are 2 modes for rendering:
### Pre-rendered (Default)
The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
Example: This provides the value of the expression `name`
```json title="Custom Settings"
{
"template": {
"data": {
"name": "LiveCodes"
}
}
}
```
[Full example below](#pre-rendered)
### Dynamic
To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
Example:
```json title="Custom Settings"
{
"template": {
"prerender": false
}
}
```
In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
Example:
```js title="Script Editor (JS)"
window.livecodes.templateData = { name: 'LiveCodes' };
```
[Full example below](#dynamic-1)
## Language Info
### Name
`art-template`
### Extensions
`.art`, `.art-template`
### Editor
`markup`
## Compiler
The official [art-template compiler](https://www.npmjs.com/package/art-template).
### Version
`art-template`: v4.13.2
## Code Formatting
Using [Prettier](https://prettier.io/).
## Custom Settings
[Custom settings](../advanced/custom-settings.html.md) added to the property `art-template` are passed as a JSON object to the [`compile`](https://aui.github.io/art-template/docs/api.html#compile-source-options) method during compile. Please check the [documentation](https://aui.github.io/art-template/docs/options.html) for full reference.
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
**Example:**
```json title="Custom Settings"
{
"art-template": {
"minimize": false
}
}
```
## Example Usage
import LiveCodes from '../../src/components/LiveCodes.tsx';
### Pre-rendered
export const config = {
markup: { language: 'art-template', content: 'Hello {{name}}!' },
customSettings: { template: { data: { name: 'LiveCodes' } } },
};
export const params = { compiled: 'open' };
### Dynamic
export const config2 = {
markup: { language: 'art-template', content: 'Hello {{name}}!' },
script: {
language: 'javascript',
content: 'window.livecodes.templateData = { name: "LiveCodes" };',
},
customSettings: { template: { prerender: false } },
activeEditor: 'script',
};
## Links
- [Official website](https://aui.github.io/art-template/)
- [Documentation](https://aui.github.io/art-template/docs/)
---
# AsciiDoc
import LiveCodes from '../../src/components/LiveCodes.tsx';
[AsciiDoc](https://asciidoc.org) is a plain text markup language for writing technical content. It’s packed with semantic elements and equipped with features to modularize and reuse content. AsciiDoc content can be composed using a text editor, managed in a version control system, and published to multiple output formats.
In LiveCodes, AsciiDoc is compiled to HTML using [Asciidoctor](https://asciidoctor.org/).
## Usage
### Demo
export const asciidocConfig = {
markup: {
language: 'asciidoc',
content: `= AsciiDoc Demo
== Features
* Simple
* Clean
* Dev-friendly
`,
},
}
## Language Info
### Name
`asciidoc`
### Extensions
`adoc`, `asc`
## Editor
`markup`
## Compiler
[Asciidoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/)
### Version
Asciidoctor.js: `v2.2.8`
## Code Formatting
Not supported.
## Custom Settings
[Custom settings](../advanced/custom-settings.html.md) added to the property `asciidoc` are passed as a JSON object to the [`convert()`](https://docs.asciidoctor.org/asciidoctor.js/latest/setup/quick-tour/#your-first-conversion) function during compile.
Please check the [documentation](https://docs.asciidoctor.org/asciidoctor.js/latest/processor/convert-options/) and [document attributes](https://docs.asciidoctor.org/asciidoc/latest/attributes/document-attributes-ref/) for full reference.
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
```json
{
"asciidoc": {
"attributes": {
"source-highlighter": "highlight.js",
"icons": "font"
}
}
}
```
## Limitations
- Some advanced extensions may not work (e.g. diagrams)
## Links
- [AsciiDoc](https://asciidoc.org)
- [Asciidoctor](https://asciidoctor.org/)
- [AsciiDoctor.js](https://docs.asciidoctor.org/asciidoctor.js/latest/)
---
# AssemblyScript
TODO...
---
# Astro
Astro is a modern static site builder focused on delivering fast, content-driven websites. It uses a “zero JavaScript by default” approach and supports multiple frameworks like React, Vue, and Svelte through an islands architecture.
## Usage
There are **two primary modes** for building and rendering Astro pages:
### Static (Default)
In this mode, pages are fully pre-rendered at build time.
All data must be available during the build process and can be supplied through **frontmatter**, **data fetching functions**, or **integrations**.
**Example:** Provide data to a page using frontmatter.
```astro
---
const name = "LiveCodes";
---
Hello {name}!
```
---
### Dynamic
To enable runtime rendering, configure the page as a server-rendered route or use an Astro server adapter (e.g., Node, Deno, or Vercel).
In this mode, values can be provided dynamically during request handling.
**Example:** Create a server-side API endpoint:
```js
export async function GET() {
return new Response(JSON.stringify({ name: 'LiveCodes' }), {
headers: { 'Content-Type': 'application/json' },
});
}
```
Then fetch and render it dynamically in Astro:
```astro
---
const res = await fetch('https://jsonplaceholder.typicode.com/users/1');
const data = await res.json();
---
Hello {data.name}!
```
---
## Language Info
### Name
`astro`
### Extension
`astro`
## Editor
`markup`
## Compiler
Astro compiler
### Version
`@astrojs/compiler`: `v2.2.8`
## Code Formatting
Using [Prettier](https://prettier.io/).
---
## Example Usage
### Static Example
```astro
---
const message = "Hello from Astro!";
---
{message}
```
### Dynamic Example
```astro
---
const res = await fetch('https://api.example.com/data');
const data = await res.json();
---
{data.title}
```
## Links
- [Astro Documentation](https://docs.astro.build)
- [Astro Starter Template](https://livecodes.io/?template=astro)
---
# Autoprefixer
TODO...
---
# Babel
[Babel](https://babeljs.io/) is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.
## Language Info
### Name
`babel`
### Extensions
`.es`, `.babel`
### Editor
`script`
## Compiler
The official [`@babel/standalone` compiler](https://babeljs.io/docs/babel-standalone).
### Version
`@babel/standalone`: v7.24.7
## Custom Settings
[Custom settings](../advanced/custom-settings.html.md) added to the property `babel` are passed as a JSON object to the [`Babel.transform`](https://babeljs.io/docs/babel-standalone#api) method during compile. Please check the [documentation](https://babeljs.io/docs/babel-core/) for full reference.
By default, the following configuration is used:
```json
{
"babel": { "presets": [["env", { "modules": false }], "typescript", "react"] }
}
```
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
## Example Usage
import LiveCodes from '../../src/components/LiveCodes.tsx';
export const params = {
babel:
'export const numbers = [1, 2, 3].map((x) => x * 2);\n\nexport const Greet = (name: string) => <>Hello {name}!;\n',
compiled: 'open',
};
## Links
- [Babel official website](https://babeljs.io/)
- [Babel documentation](https://babeljs.io/docs/)
---
# BBCode
[BBCode](https://www.bbcode.org/) ("Bulletin Board Code") is a lightweight markup language used to format messages in many Internet forum software.
## Language Info
### Name
`bbcode`
### Extensions
`.bbcode`, `.bb`
### Editor
`markup`
## Compiler
[BBob](https://github.com/JiLiZART/BBob).
### Version
`BBob`: v4.3.1
## Example Usage
import LiveCodes from '../../src/components/LiveCodes.tsx';
export const config = {markup: {language: 'bbcode', content: '[i]Text[/i]'}};
export const params = {compiled: 'open'};
## Links
- [bbcode.org](https://www.bbcode.org/)
- [BBCode guide](https://www.phpbb.com/community/help/bbcode)
- [BBCode on Wikipedia](https://en.wikipedia.org/wiki/BBCode)
---
# Blockly
TODO...
---
# Civet
TODO...
---
# Clio
TODO...
---
# ClojureScript
[ClojureScript](https://clojurescript.org/) is a robust, practical, and fast programming language with a set of useful features that together form a simple, coherent, and powerful tool.
ClojureScript is a compiler for [Clojure](https://clojure.org/) that targets
JavaScript. In LiveCodes, it runs in the browser using
[Cherry](https://github.com/squint-cljs/cherry).
:::info Note
Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md).
:::
## Language Info
### Name
`clojurescript`
### Extensions
`cljs`, `cljc`, `clj`, `edn`, `clojure`
### Editor
`script`
## Compiler
[Cherry](https://github.com/squint-cljs/cherry)
If `JSX` is used (using `#jsx` reader tag - [example](https://github.com/squint-cljs/cherry/blob/60adcf6e3a8fb940a80c6a193599da0272fe3058/examples/jsx/pages/component.cljs)), it is also compiled ([JSX](./jsx.html.md)). See [example usage](#example-usage).
### Version
`cherry-cljs`: v0.2.18
## Code Formatting
Using [Parinfer](https://shaunlebron.github.io/parinfer/).
## Example Usage
import LiveCodes from '../../src/components/LiveCodes.tsx';
export const params = {
cljs: `(ns demo\n${' '};; you can use npm modules\n${' '}(:require ["canvas-confetti$default" :as confetti]))\n\n(let [el (js/document.getElementById "test")]\n${' '}(.addEventListener el "click"\n ${' '}(fn []\n ${' '}(confetti)\n${' '}(println "test"))))\n`,
html: '',
console: 'open',
};
Using React (with JSX):
## Starter Template
https://livecodes.io/?template=clojurescript
## Links
- [ClojureScript official website](https://clojurescript.org/)
- [Clojure official website](https://clojure.org/)
- [Cherry repo](https://github.com/squint-cljs/cherry)
---
# CoffeeScript
[CoffeeScript](https://coffeescript.org/) is a little language that compiles into JavaScript.
## Usage
import LiveCodes from '../../src/components/LiveCodes.tsx';
This example demonstrates usage in LiveCodes:
## Language Info
### Name
`coffeescript`
### Extensions
`.coffee`
### Aliases
`coffee`, `coffeescript`
### Editor
`script`
## Compiler
The official [CoffeeScript compiler](https://www.npmjs.com/package/coffeescript).
### Version
`coffeescript`: v2.7.0
## Starter Template
https://livecodes.io/?template=coffeescript
## Links
- [Official website](https://coffeescript.org/)
- [Language Reference](https://coffeescript.org/#language)
- [CoffeeScript on GitHub](https://github.com/jashkenas/coffeescript)
---
# Common Lisp
[Common Lisp](https://common-lisp.net/) is a dialect of the Lisp programming language.
In LiveCodes, Common Lisp code runs in the browser using [JSCL](https://github.com/jscl-project/jscl), a Common Lisp to JavaScript compiler.
:::info Note
Lisp language family supported in LiveCodes includes [Common Lisp](./commonlisp.html.md), [Scheme](./scheme.html.md), [ClojureScript](./clojurescript.html.md) and [Fennel](./fennel.html.md).
:::
## Usage
LiveCodes runs Common Lisp code in the browser. JSCL implements a subset of Common Lisp, but covers enough functionality to write practical code.
import LiveCodes from '../../src/components/LiveCodes.tsx';
This example demonstrates basic Common Lisp syntax and functionality:
### JS Interoperability
Please see [JSCL docs](https://github.com/jscl-project/jscl/wiki/JSCL-and-manipulations-with-JS-objects)
## Language Info
### Name
`commonlisp`
### Aliases/Extensions
`common-lisp`, `lisp`
### Editor
`script`
## Compiler
[JSCL](https://github.com/jscl-project/jscl) - Common Lisp to JavaScript compiler
## Code Formatting
Using [Parinfer](https://shaunlebron.github.io/parinfer/).
## Limitations
Since JSCL is a subset of Common Lisp, it doesn't implement all Common Lisp features. See the [JSCL documentation](https://github.com/jscl-project/jscl#status) for more information.
## Starter Template
https://livecodes.io/?template=commonlisp
## Links
- [Common Lisp](https://common-lisp.net/)
- [JSCL](https://github.com/jscl-project/jscl)
- [Common Lisp: A Gentle Introduction to Symbolic Computation](https://www.cs.cmu.edu/~dst/LispBook/)
- [Practical Common Lisp](http://www.gigamonkeys.com/book/)
---
# C/C++ (Wasm)
TODO...
---
# C++
TODO...
---
# C# (Wasm)
C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft.
In LiveCodes, C# runs in the browser using Blazor WebAssembly with a WebAssembly-based .NET runtime.
## Usage
Demo:
import LiveCodes from '../../src/components/LiveCodes.tsx';
export const csharpConfig = {
activeEditor: 'script',
script: {
language: 'csharp-wasm',
content: `using System;
public class Program
{
public static void Main()
{
int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };
int itemToSearch = 7;
int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);
if (result == -1)
{
Console.WriteLine("Result: Item not found in the array.");
}
else
{
Console.WriteLine($"Result: Item found at index -> {result}");
}
}
public static int BinarySearch(int[] arr, int left, int right, int item)
{
if (right >= left)
{
int mid = left + (right - left) / 2;
if (arr[mid] == item)
{
return mid;
}
if (arr[mid] > item)
{
return BinarySearch(arr, left, mid - 1, item);
}
return BinarySearch(arr, mid + 1, right, item);
}
return -1;
}
}`,
},
mode: 'simple',
editor: 'auto',
tools: {
status: 'full',
},
};
### Communication with JavaScript
The C# code runs in the context of the result page. A few helper properties and methods are available in the browser global `livecodes.csharp` object:
- `livecodes.csharp.input`: The initial standard input passed to the C# code.
- `livecodes.csharp.loaded`: A promise that resolves when the C# environment (Blazor WebAssembly) is fully loaded. Other helpers should be used after this promise resolves.
- `livecodes.csharp.output`: The standard output from the C# code execution.
- `livecodes.csharp.run`: A function that runs the C# code with new input. This function takes a string as input and returns a promise that resolves with an object containing the `output`, `error`, and `exitCode` properties.
Example:
## Language Info
### Name
`csharp-wasm`
### Aliases / Extensions
`cs`, `csharp`, `wasm.cs`, `cs-wasm`
### Editor
`script`
## Compiler
Blazor WebAssembly with .NET WebAssembly runtime.
### Version
.NET 9.0
## Code Formatting
using [Prettier](https://prettier.io/)
## Live Reload
By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the Blazor environment. This behavior can be disabled by adding the code comment `// __livecodes_reload__` to the C# code, which forces a full page reload.
This comment can be added in the `hiddenContent` property of the editor for embedded playgrounds.
## Example Usage
```csharp
using System;
public class Program
{
public static void Main()
{
Console.WriteLine("Hello, LiveCodes C#!");
}
}
```
## Starter Template
https://livecodes.io/?template=csharp-wasm
## Links
- [C#](https://learn.microsoft.com/en-us/dotnet/csharp/)
- [Blazor WebAssembly](https://dotnet.microsoft.com/en-us/apps/aspnet/web-apps/blazor)
---
# CSS
import LiveCodes from '../../src/components/LiveCodes.tsx';
[CSS](https://developer.mozilla.org/docs/Web/CSS) (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in HTML. It controls layout, colors, fonts, and the overall visual appearance of web pages.
## Demo
export const cssConfig = {
activeEditor: 'style',
markup: {
language: 'html',
content: `
Hello, LiveCodes!
This is styled with CSS.
Flexible
Powerful
Beautiful
`,
},
style: {
language: 'css',
content: `.container {
font-family: sans-serif;
max-width: 600px;
margin: 2em auto;
padding: 1.5em;
border-radius: 8px;
background: #f0f4f8;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
h1 {
color: #2d3748;
}
p {
color: #4a5568;
line-height: 1.6;
}
ul {
list-style: none;
padding: 0;
display: flex;
gap: 1em;
}
li {
background: #3182ce;
color: white;
padding: 0.5em 1em;
border-radius: 4px;
}
`,
},
};
## Usage
CSS code added to the [style editor](../features/css.html.md)#style-editor) is added as-is without any compilation to the [result page](../features/result.html.md).
There is no need to add a full page structure (e.g. ``, ``, ``, `\n`,
};
### Module Imports
npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `` tags in the page `head`.
Example:
export const importsDemo = {
svelte: `\n
You clicked {count} times.
`,
};
Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations.
### Multiple Components
Svelte is supported in both [markup](../features/projects.html.md)#markup-editor) and [script](../features/projects.html.md)#script-editor) editors.
This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported.
This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor,
e.g. `./script.svelte`, `./Component.svelte`, `./Counter.svelte`, etc.
export const multi = {
markup: {
language: 'svelte',
content: `
`,
},
script: {
language: 'svelte',
content: `
{count}
`,
},
style: {
language: 'css',
content: '@import "tailwindcss";\n',
},
processors: ['tailwindcss'],
}
Please note that LiveCodes [does not have the concept of a file system](../features/projects.html.md). However, you can configure [editor options](../configuration/configuration-object.html.md)#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors.
Example:
export const multiFiles = {
...multi,
markup: {
...multi.markup,
title: 'App.svelte',
},
script: {
...multi.script,
title: 'Counter.svelte',
},
style: {
...multi.style,
title: 'styles.css',
order: 3,
},
};
When both markup and script editors use Svelte, the component in the markup editor is used as the main component rendered in the [root element](#root-element).
To render the component in the script editor, it has to be imported and used by the main component.
### Importing External Components
External Svelte components can be imported. The import URL has to be an absolute URL ending with `.svelte` extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
Example:
```html
```
### Root Element
To mount the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance.
Example:
export const customRoot = {
markup: {
language: 'html',
content: `
Custom Root Element
...other page content
`,
},
script: {
language: 'svelte',
content: `\n
I'm a {name} component
`,
},
};
## Language Info
### Name
`svelte`
### Extensions
`.svelte`
### Editor
`script`, `markup`
## Compiler
The official [Svelte compiler](https://svelte.dev/docs/svelte/svelte-compiler).
### Version
`svelte`: v5.39.12
## Code Formatting
Using [Prettier](https://prettier.io/).
## Starter Template
https://livecodes.io/?template=svelte
## Links
- [Svelte](https://svelte.dev/)
- [Svelte documentations](https://svelte.dev/docs/svelte/overview)
---
# Tailwind CSS
TODO...
---
# Tcl
TODO...
---
# Teal
Teal is a typed dialect of [Lua](https://www.lua.org/).
Teal code is compiled to Lua, which then runs in the browser using [Fengari](https://fengari.io/). See documentation for Lua language support in LiveCodes [here](./lua.html.md).
## Usage
JavaScript interoperability and DOM access is achieved using [`"js"` module](https://github.com/fengari-lua/fengari-interop).
import LiveCodes from '../../src/components/LiveCodes.tsx';
This example demonstrates usage, JavaScript interoperability and DOM access:
## Language Info
### Name
`teal`
### Extension
`.tl`
### Editor
`script`
## Compiler
[Teal](https://github.com/teal-language/tl)
### Version
Teal v0.15.2
## Code Formatting
Using [`lua-fmt`](https://github.com/trixnz/lua-fmt).
## Starter Template
https://livecodes.io/?template=teal
## Links
- [Teal](https://github.com/teal-language/tl)
- [Teal documentation](https://github.com/teal-language/tl/tree/master/docs)
- [Teal tutorial](https://github.com/teal-language/tl/blob/master/docs/tutorial.html.md)
- [Lua](https://www.lua.org/)
- [Lua documentation](https://www.lua.org/docs.html)
- [Fengari](https://fengari.io/)
- [lua](./lua.html.md) in LiveCodes
- [lua-wasm](./lua-wasm.html.md) in LiveCodes
---
# Token CSS
TODO...
---
# TSX
TSX is a syntax that allows using TypeScript in JSX.
[JSX](https://react.dev/learn/writing-markup-with-jsx) is a syntax extension for JavaScript that allows writing HTML-like markup inside JavaScript.
It has been popularized by [React](https://react.dev/), and then adopted by many other libraries/frameworks.
By default, when running JSX/TSX in LiveCodes, [React](https://react.dev/) runtime is used.
However, other libraries like [Preact](https://preactjs.com/), [nano JSX](https://nanojsx.io/) and others can be used as well (see [Custom JSX Runtimes](./jsx.html.md)#custom-jsx-runtimes)).
Please note that [React compiler](https://react.dev/learn/react-compiler) is also available in LiveCodes and is [documented here](./react.html.md).
## Usage
For usage and examples, see documentation for [JSX](./jsx.html.md) and [TypeScript](./typescript.html.md) support in LiveCodes.
## Language Info
### Name
`tsx`
### Extension
`.tsx`
### Editor
`script`
## Compiler
[TypeScript compiler](./typescript.html.md)
## Code Formatting
Using [Prettier](https://prettier.io/).
## Custom Settings
[Custom settings](../advanced/custom-settings.html.md) added to the property `tsx` are passed to the TypeScript compiler as [compiler options](https://www.typescriptlang.org/tsconfig#compilerOptions) while compiling TSX.
In addition, the option `disableAutoRender` can be set to `true` to disable [auto-rendering](./jsx#auto-rendering).
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
**Example:**
```json title="Custom Settings"
{
"tsx": {
"disableAutoRender": true,
"jsxFactory": "h",
"jsxFragmentFactory": "Fragment"
}
}
```
## Links
- [React](https://react.dev/)
- [JSX](https://react.dev/learn/writing-markup-with-jsx)
- [TypeScript](https://www.typescriptlang.org/)
---
# Twig
[Twig.js](https://github.com/twigjs/twig.js/) is a pure JavaScript implementation of the [Twig](https://twig.symfony.com/) PHP templating language.
## Usage
There are 2 modes for rendering:
### Pre-rendered (Default)
The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
Example: This provides the value of the expression `name`
```json title="Custom Settings"
{
"template": {
"data": {
"name": "LiveCodes"
}
}
}
```
[Full example below](#pre-rendered)
### Dynamic
To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
Example:
```json title="Custom Settings"
{
"template": {
"prerender": false
}
}
```
In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
Example:
```js title="Script Editor (JS)"
window.livecodes.templateData = { name: 'LiveCodes' };
```
[Full example below](#dynamic-1)
## Language Info
### Name
`twig`
### Extension
`.twig`
### Editor
`markup`
## Compiler
[Twig.js](https://www.npmjs.com/package/twig).
### Version
`twig`: v1.15.4
## Code Formatting
Using [Prettier](https://prettier.io/).
## Custom Settings
[Custom settings](../advanced/custom-settings.html.md) added to the property `twig` are passed as a JSON object to the [`twig`](https://github.com/twigjs/twig.js/wiki#browser-usage) method during compile. Please check the [documentation](https://github.com/twigjs/twig.js/wiki#browser-usage) for full reference.
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
## Example Usage
import LiveCodes from '../../src/components/LiveCodes.tsx';
### Pre-rendered
export const config = {
markup: { language: 'twig', content: 'Hello, {{ name }}!' },
customSettings: { template: { data: { name: 'LiveCodes' } } },
};
export const params = { compiled: 'open' };
### Dynamic
export const config2 = {
markup: { language: 'twig', content: 'Hello, {{ name }}!' },
script: {
language: 'javascript',
content: 'window.livecodes.templateData = { name: "LiveCodes" };',
},
customSettings: { template: { prerender: false } },
activeEditor: 'script',
};
## Links
- [Twig](https://twig.symfony.com/)
- [Twig documentation](https://twig.symfony.com/doc/3.x/)
- [Twig.js](https://github.com/twigjs/twig.js/)
- [Twig.js documentation](https://github.com/twigjs/twig.js/wiki)
---
# TypeScript
TODO...
---
# UnoCSS
TODO...
---
# Vento
[Vento](https://vento.js.org/) is a template engine for Deno. It's inspired by other engines, such as [Nunjucks](./nunjucks.html.md), [Liquid](./liquid.html.md), [Eta](./eta.html.md), and [Mustache](./mustache.html.md).
## Usage
There are 2 modes for rendering:
### Pre-rendered (Default)
The values of the expressions are evaluated and added to the template during compilation of the [result page](../features/result.html.md).
The values of all expressions should be supplied in advance using [custom settings](../advanced/custom-settings.html.md) to the property `template.data` which accepts an object of key-value pairs.
Example: This provides the value of the expression `name`
```json title="Custom Settings"
{
"template": {
"data": {
"name": "LiveCodes"
}
}
}
```
[Full example below](#pre-rendered)
### Dynamic
To use this mode, the property `template.prerender` in [custom settings](../advanced/custom-settings.html.md) should be set to `false`.
Example:
```json title="Custom Settings"
{
"template": {
"prerender": false
}
}
```
In this mode, in addition to values supplied in custom settings (see above), expressions can have values that are evaluated during the [result page](../features/result.html.md) runtime.
This can be achieved in JavaScript (or any [language](../languages/index.html.md) that compiles to it) by assigning `window.livecodes.templateData` to an object with the data.
Please note that template rendering occurs on [page load](https://developer.mozilla.org/en-US/docs/Web/API/Window/load_event), so the assignment must occur before that.
Example:
```js title="Script Editor (JS)"
window.livecodes.templateData = { name: 'LiveCodes' };
```
[Full example below](#dynamic-1)
## Language Info
### Name
`vento`
### Extension
`.vto`
### Editor
`markup`
## Compiler
[Vento](https://vento.js.org/).
### Version
`ventojs`: v2.2.0
## Code Formatting
Using [Prettier](https://prettier.io/).
## Custom Settings
[Custom settings](../advanced/custom-settings.html.md) added to the property `vento` are passed as a JSON object to the [`vento()`](https://vento.js.org/getting-started/#usage) function during compile. Please check the [documentation](https://vento.js.org/configuration/) for full reference.
Please note that custom settings should be valid JSON (i.e. functions are not allowed).
## Example Usage
import LiveCodes from '../../src/components/LiveCodes.tsx';
### Pre-rendered
export const config = {
markup: { language: 'vento', content: 'Hello, {{ name }}!' },
customSettings: { template: { data: { name: 'LiveCodes' } } },
};
export const params = { compiled: 'open' };
### Dynamic
export const config2 = {
markup: { language: 'vento', content: 'Hello, {{ name }}!' },
script: {
language: 'javascript',
content: 'window.livecodes.templateData = { name: "LiveCodes" };',
},
customSettings: { template: { prerender: false } },
activeEditor: 'script',
};
## Links
- [Vento](https://vento.js.org/)
---
# Vue SFC
[Vue.js](https://vuejs.org/), The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.
This is the documentation for LiveCodes language support for Vue [Single-File Component (SFC)](https://vuejs.org/api/sfc-spec.html).
The support for Vue 2 SFC (the older, EOL version) is [documented separately](./vue2.html.md).
## Usage
Vue SFC can be used as documented in the [specs](https://vuejs.org/api/sfc-spec.html), including support for [Scoped CSS](https://vuejs.org/api/sfc-css-features.html#scoped-css), [CSS Modules](https://vuejs.org/api/sfc-css-features.html#css-modules), [pre-processors](https://vuejs.org/api/sfc-spec.html#pre-processors), [JSX](https://vuejs.org/guide/extras/render-function.html#jsx-tsx) and [`src` imports](https://vuejs.org/api/sfc-spec.html#src-imports). See below for usage.
### Demo
import LiveCodes from '../../src/components/LiveCodes.tsx';
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
### Scoped CSS
> When a `\n\n\n
hi
\n`,
};
### CSS Modules
> A ``,
};
### CSS Frameworks
[CSS Frameworks](../features/css.html.md)#css-processors) supported in LiveCodes (e.g. [Tailwind CSS](./tailwindcss.html.md), [UnoCSS](./unocss.html.md), [WindiCSS](./windicss.html.md)) can detect class names added in Vue SFCs. Make sure that the required utility is enabled (from style editor menu or in `processors` property of [configuration object](../configuration/configuration-object.html.md)#processors)).
See [example below](#multiple-components).
### Languages and Pre-Processors
> Blocks can declare pre-processor languages using the `lang` attribute.
>
> — [docs](https://vuejs.org/api/sfc-spec.html#pre-processors)
Many of the [languages supported in LiveCodes](./index.html.md) can be used. The value of `lang` attribute can be the language name (specified in its documentation page) or any of its aliases (extensions).
export const processorsDemo = {
vue: `\nh1 {{ msg }}\n\n\n\n\n\n`,
};
### JSX
JSX can be used in render functions without needing any configuration.
export const jsxDemo = {
vue: `\n\n`,
};
### `src` Imports
The src attribute can be used to import an external file for a language block:
```html
```
The value of `src` attribute can be either:
- Absolute URL (e.g. `https://unpkg.com/todomvc-app-css/index.css`)
- Path in npm package (e.g. `todomvc-app-css/index.css`)
Relative paths (e.g. `./my-styles.css`) cannot be used (because there is no file system in LiveCodes).
The imported sources can use any of the supported languages/pre-processors (identified by the file extension or can be specified by `lang` attribute).
### Module Imports
npm modules can be imported as described in the section about [module resolution](../features/module-resolution.html.md), including bare module imports and importing from different CDNs. Stylesheets imported in the `script` block are added as `` tags in the page `head`.
Example:
export const importsDemo = {
vue: `\n\n\n
\n
You clicked {{ count }} times.
\n \n
\n\n`,
};
Module imports can be customized using import maps as described in [module resolution](../features/module-resolution.html.md)#custom-module-resolution) documentations.
### Multiple Components
Vue is supported in both [markup](../features/projects.html.md)#markup-editor) and [script](../features/projects.html.md)#script-editor) editors.
This allows having a component in the markup editor that imports (and passes props to) a component in the script editor. The opposite is not supported.
This can be done using relative import of a file name in the same directory. Any file name will resolve to the component in the script editor,
e.g. `./script.vue`, `./Component.vue`, `./Counter.vue`, etc.
export const multi = {
markup: {
language: 'vue',
content: `
`,
},
script: {
language: 'vue',
content: `
{{ count }}
`,
},
style: {
language: 'css',
content: '@import "tailwindcss";\n',
},
processors: ['tailwindcss'],
}
Please note that LiveCodes [does not have the concept of a file system](../features/projects.html.md). However, you can configure [editor options](../configuration/configuration-object.html.md)#markup) like `title`, `order` and `hideTitle` to simulate multiple files, change editor order or even hide editors.
Example:
export const multiFiles = {
...multi,
markup: {
...multi.markup,
title: 'App.vue',
},
script: {
...multi.script,
title: 'Counter.vue',
},
style: {
...multi.style,
title: 'styles.css',
order: 3,
},
};
When both markup and script editors use Vue, the component in the markup editor is used as the main component rendered in the [root element](#root-element).
To render the component in the script editor, it has to be imported and used by the main component.
### Importing External SFCs
External Vue SFCs can be imported. The import URL has to be an absolute URL ending with `.vue` extension. Any bare or relative imports in the imported files are resolved and compiled recursively.
This is an example of importing a Vue SFC, which in turn imports other Vue SFCs (the imported components use Tailwind CSS, which is enabled in this project as a CSS preprocessor):
export const importExternal = {
activeEditor: 'script',
script: {
language: 'vue',
content: `
`
},
style: {
language: 'css',
content: '@import "tailwindcss";\n',
},
processors: ['tailwindcss'],
}
### Importing Data URLs
You may want to import other SFCs without having to host them on a server.
These components can be encoded as [data URLs](https://developer.mozilla.org/en-US/docs/Web/URI/Reference/Schemes/data) and imported as usual.
The data URL has to start with `data:text/vue` to be recognized as a Vue SFC. Any imports in the imported URLs (even if they are also data URLs) are resolved and compiled recursively.
:::info
The code in any code editor can be encoded as data URL from the LiveCodes UI using the "Copy code as data URL" button below the code editor.
:::
This is the previous demo that uses data URLs (with nested imports) instead of external URLs:
export const importDataUrls = {
activeEditor: 'script',
script: {
language: 'vue',
content: `
`
},
style: {
language: 'css',
content: '@import "tailwindcss";\n',
},
processors: ['tailwindcss'],
}
In the above demo, this component is imported:
```
data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQppbXBvcnQgeyByZWYgfSBmcm9tICJ2dWUiOw0KaW1wb3J0IFByaW1hcnlCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdFozSmhlUzAxTURBZ2FHOTJaWEk2WW1jdFozSmhlUzAyTURBZ2RISmhibk5wZEdsdmJpQndlUzB4SUhCNExUUWdkR1Y0ZEMxM2FHbDBaU0J5YjNWdVpHVmtJR1J5YjNBdGMyaGhaRzkzTFhoc0lnMEtJQ0ErRFFvZ0lDQWdlM3NnZEdsMGJHVWdmWDBOQ2lBZ1BDOWlkWFIwYjI0K0RRbzhMM1JsYlhCc1lYUmxQZz09IjsNCmltcG9ydCBEYW5nZXJCdXR0b24gZnJvbSAiZGF0YTp0ZXh0L3Z1ZTtjaGFyc2V0PVVURi04O2Jhc2U2NCxQSE5qY21sd2RDQnpaWFIxY0NCc1lXNW5QU0owY3lJK0RRcGtaV1pwYm1WUWNtOXdjeWg3RFFvZ0lIUnBkR3hsT2lCN0RRb2dJQ0FnZEhsd1pUb2dVM1J5YVc1bkxBMEtJQ0FnSUdSbFptRjFiSFE2SUNKQ2RYUjBiMjRpTEEwS0lDQjlMQTBLZlNrN0RRbzhMM05qY21sd2RENE5DZzBLUEhSbGJYQnNZWFJsUGcwS0lDQThZblYwZEc5dURRb2dJQ0FnWTJ4aGMzTTlJblJsZUhRdGJXUWdabTl1ZEMxdFpXUnBkVzBnWW1jdGNtVmtMVFV3TUNCb2IzWmxjanBpWnkxeVpXUXROakF3SUhSeVlXNXphWFJwYjI0Z2NIa3RNU0J3ZUMwMElIUmxlSFF0ZDJocGRHVWdjbTkxYm1SbFpDQmtjbTl3TFhOb1lXUnZkeTE0YkNJTkNpQWdQZzBLSUNBZ0lIdDdJSFJwZEd4bElIMTlEUW9nSUR3dlluVjBkRzl1UGcwS1BDOTBaVzF3YkdGMFpUND0iOw0KDQpjb25zdCBjb3VudCA9IHJlZigwKTsNCjwvc2NyaXB0Pg0KDQo8dGVtcGxhdGU+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC04IGZsZXgganVzdGlmeS1jZW50ZXIiPg0KICAgIDxzcGFuIHJlZj0iY291bnRlciIgY2xhc3M9InRleHQtM3hsIGZvbnQtYm9sZCI+e3sgY291bnQgfX08L3NwYW4+DQogIDwvZGl2Pg0KICA8ZGl2IGNsYXNzPSJ3LWZ1bGwgbXQtNCBmbGV4IGZsZXgtcm93IHNwYWNlLXgtNCBqdXN0aWZ5LWNlbnRlciI+DQogICAgPHByaW1hcnktYnV0dG9uIHJlZj0iZGVjcmVtZW50QnV0dG9uIiB0aXRsZT0iLSIgQGNsaWNrPSJjb3VudC0tIiAvPg0KICAgIDxwcmltYXJ5LWJ1dHRvbiByZWY9ImluY3JlbWVudEJ1dHRvbiIgdGl0bGU9IisiIEBjbGljaz0iY291bnQrKyIgLz4NCiAgPC9kaXY+DQogIDxkaXYgY2xhc3M9InctZnVsbCBtdC00IGZsZXggZmxleC1yb3cgc3BhY2UteC00IGp1c3RpZnktY2VudGVyIj4NCiAgICA8ZGFuZ2VyLWJ1dHRvbiByZWY9InJlc2V0QnV0dG9uIiB0aXRsZT0iUmVzZXQiIEBjbGljaz0iY291bnQgPSAwIiAvPg0KICA8L2Rpdj4NCjwvdGVtcGxhdGU+
```
which imports these:
```
data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctZ3JheS01MDAgaG92ZXI6YmctZ3JheS02MDAgdHJhbnNpdGlvbiBweS0xIHB4LTQgdGV4dC13aGl0ZSByb3VuZGVkIGRyb3Atc2hhZG93LXhsIg0KICA+DQogICAge3sgdGl0bGUgfX0NCiAgPC9idXR0b24+DQo8L3RlbXBsYXRlPg==
```
```
data:text/vue;charset=UTF-8;base64,PHNjcmlwdCBzZXR1cCBsYW5nPSJ0cyI+DQpkZWZpbmVQcm9wcyh7DQogIHRpdGxlOiB7DQogICAgdHlwZTogU3RyaW5nLA0KICAgIGRlZmF1bHQ6ICJCdXR0b24iLA0KICB9LA0KfSk7DQo8L3NjcmlwdD4NCg0KPHRlbXBsYXRlPg0KICA8YnV0dG9uDQogICAgY2xhc3M9InRleHQtbWQgZm9udC1tZWRpdW0gYmctcmVkLTUwMCBob3ZlcjpiZy1yZWQtNjAwIHRyYW5zaXRpb24gcHktMSBweC00IHRleHQtd2hpdGUgcm91bmRlZCBkcm9wLXNoYWRvdy14bCINCiAgPg0KICAgIHt7IHRpdGxlIH19DQogIDwvYnV0dG9uPg0KPC90ZW1wbGF0ZT4=
```
### Root Element
To [mount](https://vuejs.org/api/application.html#app-mount) the application instance to a specific DOM element use `"livecodes-app"` as the element `id` in the HTML. Otherwise, if that element is not found, a new `div` element is added to `document.body` and is used to mount the instance.
Example:
export const customRoot = {
markup: {
language: 'html',
content: `
Custom Root Element
...other page content
`,
},
script: {
language: 'vue',
content: `I'm a Vue SFC`,
},
};
## Language Info
### Name
`vue`
### Extensions
`.vue`, `.vue3`
### Editor
`script`, `markup`
## Compiler
The official [@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc).
### Version
`@vue/compiler-sfc`: v3.5.22
## Code Formatting
Using [Prettier](https://prettier.io/).
## Limitations
Currently, Vue support has the following limitations:
- SSR is not supported.
- The [`defineProps()`](https://vuejs.org/guide/components/props#props-declaration) macro cannot infer props from TypeScript types not defined in the same file.
[PRs are welcome](https://github.com/live-codes/livecodes/issues/757).
## Starter Template
https://livecodes.io/?template=vue
## Links
- [Vue.js](https://vuejs.org/)
- [Vue SFC specs](https://vuejs.org/api/sfc-spec.html)
- [CSS Modules](https://github.com/css-modules/css-modules)
---
# Vue 2 SFC
[Vue.js](https://vuejs.org/), The Progressive JavaScript Framework, is an approachable, performant and versatile framework for building web user interfaces.
This is the documentation for LiveCodes language support for the older **Vue 2** [Single-File Component (SFC)](https://v2.vuejs.org/v2/guide/single-file-components.html). For the latest Vue SFC head to [Vue 3 SFC documentations](./vue.html.md).
:::caution
Please note that, officially, Vue 2 has reached [End of Life (EOL)](https://v2.vuejs.org/eol/) on December 31st, 2023.
:::
## Important Note
Vue 2 SFC language support in LiveCodes is different from that for Vue 3.
Unlike Vue 3, which uses the official SFC compiler ([@vue/compiler-sfc](https://github.com/vuejs/core/tree/main/packages/compiler-sfc)) to compile SFC to regular JavaScript which is then sent to the result page, Vue 2 SFC support uses [vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader), which is loaded in the result page and the SFC is compiled on the fly in the end user's browser. This has a significant performance impact.
[vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader) is currently at version 0.8.4, which is compatible with Vue 2 version 2.6.14.
Vue 2.7 is not supported.
## Usage
Vue 2 SFC support includes Scoped CSS, pre-processors, JSX and `src` imports.
## Language Info
### Name
`vue2`
### Extensions
`.vue2`
### Editor
`script`
## Compiler
[vue3-sfc-loader](https://github.com/FranckFreiburger/vue3-sfc-loader).
### Version
`vue3-sfc-loader`: v0.9.5, which is compatible with Vue v2.6.14
## Code Formatting
Using [Prettier](https://prettier.io/).
## Links
- [Vue 2 docs](https://v2.vuejs.org/)
- [Vue 2 SFC](https://v2.vuejs.org/v2/guide/single-file-components.html)
---
# WebAssembly Text
TODO...
---
# Windi CSS
TODO...
---
# Guides & Tutorials
Welcome to the LiveCodes guides and tutorials! These step-by-step guides will help you learn how to use LiveCodes effectively.
## Getting Started
- [Getting Started Guide](./getting-started-guide.html.md) - Your first steps with LiveCodes
- [Building Your First App](./building-your-first-app.html.md) - Create a complete project from scratch
## SDK & Integration
- [Embedding Playgrounds](./embedding-playgrounds.html.md) - Add an interactive code editor to your website
- [Creating Shareable URLs](./creating-shareable-urls.html.md) - Create custom share links for embedded playgrounds
Choose a guide above to get started!
---
import CodeBlock from '@theme/CodeBlock';
import LiveCodes from '../../src/components/LiveCodes.tsx';
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
export const gettingStartedParams = {
html: `
Hello, World!
`,
css: `.container {
max-width: 600px;
margin: 50px auto;
text-align: center;
font-family: Arial, sans-serif;
}
h1 {
color: #007bff;
font-size: 2.5rem;
}
input {
padding: 10px;
font-size: 1rem;
margin: 10px;
border: 2px solid #007bff;
border-radius: 5px;
}
button {
padding: 10px 20px;
font-size: 1rem;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
`,
js: `const greeting = document.getElementById('greeting');
const nameInput = document.getElementById('nameInput');
const greetBtn = document.getElementById('greetBtn');
greetBtn.addEventListener('click', () => {
const name = nameInput.value.trim();
if (name) {
greeting.textContent = \`Hello, \${name}!\`;
} else {
greeting.textContent = 'Hello, World!';
}
});
`,
};
# Getting Started Guide
This guide will walk you through creating your first project in LiveCodes.
Try the completed project below:
.
## Prerequisites
- A web browser (Chrome, Firefox, Safari, or Edge)
- Basic knowledge of HTML, CSS, and JavaScript
## Step 1: Open LiveCodes
1. Navigate to [livecodes.io](https://livecodes.io)
2. You'll see the editor interface with three panels:
- **HTML**
- **CSS**
- **JavaScript**
## Step 2: Create a Simple Page
Let's create a simple interactive greeting card.
### HTML Panel
{gettingStartedParams.html}
### CSS Panel
{gettingStartedParams.css}
### JavaScript Panel
{gettingStartedParams.js}
## Step 3: See Your Results
The result panel automatically updates as you type. Try:
- Entering your name in the input field
- Clicking the "Greet Me!" button
- Modifying the colors in the CSS
## Step 4: Save Your Project
1. Click on the "**Project**" menu button in the toolbar
2. Click "**Save**" to save the project (on this device)
3. You can open it later from "**Project menu > Open**"
4. Use "**Project menu > Share**" to get a permanent URL to your project that you can share
## Congratulations!
You've just built your first interactive app with LiveCodes!
Compare your version with the completed project above. Did you add any personal touches?
## Next Steps
Now that you've created your first project, explore:
- [Building Your First App](building-your-first-app) - Create more complex applications
- [Features](../features/index.html.md) - Learn about all LiveCodes features
- [Templates](../features/templates.html.md) - Use pre-built templates
- [External Resources](../features/external-resources.html.md) - Add libraries to your projects
## Tips
- Use **Ctrl/Cmd + S** to manually save
- Press **Ctrl/Cmd + Alt + S** to open share panel
- Press **Ctrl/Cmd + K** to open the command menu
- Enable **Auto-save** in user settings for automatic saving
---
import CodeBlock from '@theme/CodeBlock';
import LiveCodes from '../../src/components/LiveCodes.tsx';
import RunInLiveCodes from '../../src/components/RunInLiveCodes.tsx';
export const colorGeneratorParams = {
html: `
Color Generator
#3498db
Click the button to generate a random color!
`,
css: `body {
margin: 0;
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #3498db;
transition: background 0.5s ease;
}
.container {
text-align: center;
background: white;
padding: 40px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
h1 {
margin: 0 0 30px 0;
color: #333;
}
.color-display {
background: #f0f0f0;
padding: 30px;
border-radius: 10px;
margin-bottom: 30px;
}
#colorCode {
font-size: 2rem;
font-weight: bold;
font-family: 'Courier New', monospace;
color: #333;
}
#generateBtn {
background: #333;
color: white;
border: none;
padding: 15px 40px;
font-size: 1.1rem;
border-radius: 10px;
cursor: pointer;
transition: transform 0.2s;
}
#generateBtn:hover {
transform: scale(1.05);
}
#generateBtn:active {
transform: scale(0.95);
}
.hint {
margin-top: 20px;
color: #666;
font-size: 0.9rem;
}
`,
js: `const colorDisplay = document.getElementById('colorDisplay');
const colorCode = document.getElementById('colorCode');
const generateBtn = document.getElementById('generateBtn');
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function updateColor() {
const newColor = getRandomColor();
document.body.style.background = newColor;
colorCode.textContent = newColor;
}
generateBtn.addEventListener('click', updateColor);
// Generate a color on page load
updateColor();
`,
};
# Building Your First App
Learn how to build a simple color generator app using LiveCodes. This app will let users click a button to generate random background colors.
Try the completed project below:
.
## What We'll Build
A fun color generator with:
- Random color generation
- Display the color code
- Simple, clean interface
## Project Setup
1. Open [LiveCodes](https://livecodes.io)
2. We'll use HTML, CSS, and JavaScript
## Implementation
### HTML Structure
{colorGeneratorParams.html}
### Styling
{colorGeneratorParams.css}
### JavaScript Logic
{colorGeneratorParams.js}
## How It Works
1. **HTML**: Creates a simple layout with a color display and button
2. **CSS**: Styles the interface and adds smooth transitions
3. **JavaScript**:
- `getRandomColor()`: Generates a random hex color
- `updateColor()`: Changes the background and displays the color code
- Event listener: Triggers color change on button click
## Testing Your App
Try these features:
1. Click "Generate Color" multiple times
2. Watch the smooth color transitions
3. See the color code update
4. Notice the button hover and click effects
## Challenge: Enhance Your App
Try adding these features:
- Copy color code to clipboard when clicked
- Add a history of recent colors
- Let users save their favorite colors
- Add different color format options (RGB, HSL)
## Congratulations!
You've just built your color generator app with LiveCodes!
Compare your version with the completed project above. Did you add any personal touches?
## Next Steps
- [External Resources](../features/external-resources.html.md) - Add libraries like color manipulation tools
- [Getting Started Guide](./getting-started-guide.html.md) - Review the basics
## Complete Code Summary
**Concepts Covered**: DOM manipulation, events, random generation, CSS transitions
**Time to Build**: 10-15 minutes
---
import CodeBlock from '@theme/CodeBlock';
import LiveCodes from '../../src/components/LiveCodes';
import RunInLiveCodes from '../../src/components/RunInLiveCodes';
export const embedDemoParams = {
html: `
`;
# Embedding a Code Playground
Learn how to embed a LiveCodes playground into any web page so your users can write, edit, and run code directly on your site.
Try the live demo below:
## What We'll Build
A web page that:
1. Embeds a LiveCodes playground in a styled container
2. Pre-fills the playground with starter code
3. Lets users edit HTML, CSS, and JavaScript directly
4. Shows live results as they type
## Basic Embedding
The simplest way to embed LiveCodes is with `createPlayground`:
```js
import { createPlayground } from 'livecodes';
const config = {
markup: { language: 'html', content: '
Hello!
' },
style: { language: 'css', content: 'h1 { color: blue; }' },
script: { language: 'javascript', content: 'console.log("hi")' },
};
await createPlayground('#playground', { config });
```
This creates an interactive editor inside the `#playground` element.
## Loading Modes
LiveCodes supports three loading modes:
### Eager Loading (Default)
The playground loads immediately:
```js
createPlayground('#playground', {
config,
loading: 'eager',
});
```
### Lazy Loading
The playground only loads when it scrolls into view:
```js
createPlayground('#playground', {
config,
loading: 'lazy',
});
```
### Click-to-Load
Shows a "Click to load" screen until the user clicks:
```js
createPlayground('#playground', {
config,
loading: 'click',
});
```
## Full Example
Save this as `index.html` and open it in a browser:
{fullHtmlExample}
## How It Works
### Container Setup
LiveCodes needs a container element. You can use any `div`:
```html
```
By default, the playground has a height of `300px`. You can override this with CSS:
```css
#playground {
height: 500px;
}
```
Or use the `data-height` attribute:
```html
```
### Configuration
Pass a [config object](../configuration/configuration-object.html.md) to pre-fill the playground:
```js
const config = {
markup: {
language: 'html',
content: '
Hello World
',
},
style: {
language: 'css',
content: 'h1 { color: royalblue; }',
},
script: {
language: 'javascript',
content: 'console.log("Hello!");',
},
};
```
### CDN Import
For quick testing without a build step, import from jsDelivr:
```html
```
## Testing Your App
1. Save the HTML example to a file
2. Open it in your browser
3. Edit the code in the embedded playground
4. Watch the result update live
## Challenge: Enhance Your Playground
Try adding these features:
- [Configure](../configuration/configuration-object.html.md) the playground with a custom theme
- Add a "Reset" button to restore the original config
- Add a language selector to switch between different starter templates
- Style the playground container to match your site's design
## Next Steps
- [Creating Shareable URLs](./creating-shareable-urls.html.md): Let users share their edited code
- [SDK Methods](../sdk/js-ts.html.md): Learn more about controlling the playground programmatically
- [Configuration](../configuration/configuration-object.html.md): Explore all configuration options
## Complete Code Summary
**Concepts Covered**: Embedding, container setup, loading modes, configuration, CDN import
**Key SDK Functions**: `createPlayground`
---
# Creating Shareable URLs
Learn how to add a **Share** button to an embedded LiveCodes playground so users can save and share the exact code they have edited.
Try the [live demo](https://hatemhosny.github.io/livecodes-custom-share/).
## What We'll Build
A web page that:
1. Embeds a LiveCodes playground with default starter code
2. Lets users edit the code directly in the playground
3. Provides a **Share** button that captures the current playground state
4. Compresses the config into the page URL hash and copies it to clipboard
5. When someone opens that shared URL, the page decompresses the hash and loads the exact same playground state
## Why Compress/Decompress?
The LiveCodes SDK exports two standalone utility functions:
- **[`compress(string)`](../sdk/js-ts.html.md)#compress)**: Compresses a string into a URI-safe base64 format
- **[`decompress(string)`](../sdk/js-ts.html.md)#decompress)**: Decompresses it back to the original string
These are re-exports from `lz-string` and are useful when you want to:
- Build your own share URL logic
- Store compressed configs in `localStorage` or a database
- Modify the config object before loading it
- Add custom data to the URL hash
- Create bookmarklets or browser extensions
:::info
If you only need a playground URL that opens in LiveCodes App, use instead the SDK method [`getShareUrl`](../sdk/js-ts.html.md)#getshareurl) of the playground instance or the standalone function [`getPlaygroundUrl`](../sdk/js-ts.html.md)#getplaygroundurl).
[`compress`](../sdk/js-ts.html.md)#compress)/[`decompress`](../sdk/js-ts.html.md)#decompress) are lower-level utilities for custom use cases.
:::
## Full Example
Save this as `index.html` and open it in a browser:
```html
LiveCodes Share Demo
```
## How It Works
### Loading from URL Hash
When the page loads, we check the URL hash for a compressed config:
```js
function getConfigFromHash() {
const hash = location.hash.slice(1);
if (!hash) return defaultConfig;
try {
const decompressed = decompress(hash);
if (decompressed) {
return JSON.parse(decompressed);
}
} catch {
// invalid hash
}
return defaultConfig;
}
```
If a hash is present, we decompress it and parse it as JSON. If not (or if it's invalid), we fall back to the default starter config.
### Creating the Playground
We pass the loaded config to `createPlayground`:
```js
const config = getConfigFromHash();
const playground = await createPlayground('#playground', { config });
```
### Sharing the Current State
When the user clicks **Share**, we get the current config from the playground, compress it, update the URL hash, and copy the URL to clipboard:
```js
document.getElementById('shareBtn').addEventListener('click', async () => {
const currentConfig = await playground.getConfig();
const compressed = compress(JSON.stringify(currentConfig));
const url = new URL(location.href);
url.hash = compressed;
await navigator.clipboard.writeText(url.href);
});
```
:::caution
`decompress` returns `null` if the input is invalid. Always check the result before parsing.
:::
## Testing Your App
1. Open the page: it shows the default starter code
2. Edit the code in the playground
3. Click **Share**: the URL is copied to clipboard
4. Paste the URL in a new tab: it loads the exact code you edited
## Challenge: Enhance Your App
Try adding these features:
- Add a "Reset" button to restore the default config
- [Watch for code changes](../sdk/js-ts.html.md)#watch) and store the config in `localStorage` for "Recover Unsaved" feature
- Add a dropdown to select different starter templates
- Show a QR code for the share URL
## Next Steps
- [SDK Methods](../sdk/js-ts.html.md): Learn more about the LiveCodes SDK
- [Configuration](../configuration/configuration-object.html.md): Explore the full config object
- [Import/Export](../features/import.html.md): Import and export projects
## Complete Code Summary
**Concepts Covered**: Embedded playground, URL hash manipulation, compression, config objects, clipboard API
**Key SDK Functions**: [`createPlayground`](../sdk/js-ts.html.md)#createplayground), [`getConfig`](../sdk/js-ts.html.md)#getconfig), [`compress`](../sdk/js-ts.html.md)#compress), [`decompress`](../sdk/js-ts.html.md)#decompress)
---
# Bookmarklet
LiveCodes allows [importing code](./features/import.html.md) from a [wide variety of sources](./features/import.html.md)#sources).
Instead of manually copy/pasting URLs to import, adding **"Edit in LiveCodes"** bookmarklet to the browser bookmarks bar can be a more convenient way. It opens LiveCodes in a new window and imports the current webpage URL.
## Add Bookmarklet
Drag this link to the browser bookmarks bar:
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:**
For usage and more information, see the [action docs](https://github.com/live-codes/preview-in-livecodes) on GitHub. Also check the [example repo](https://github.com/hatemhosny/preview-in-livecodes-demo) for a working demo.
---
# Markdown to LiveCodes
Markdown and MDX code blocks can be easily converted to interactive LiveCodes playgrounds.
The playgrounds can run any of the supported [languages](./languages/index.html.md) in LiveCodes, and can be customized to any of the [configuration options](./configuration/index.html.md).
A fenced code block in Markdown can be rendered as a LiveCodes playground by adding the `livecodes` parameter to the code block language meta.
This is provided as [plugins](#packages) for [markdown-it](https://github.com/markdown-it/markdown-it), [marked](https://github.com/markedjs/marked) and [remark](https://github.com/remarkjs/remark).
These plugins allow the seamless integration with most of the popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc. See the section "[Using with Frameworks](#using-with-frameworks)" for getting started.
## Demo
This is an example code block:
````md
```jsx
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
You clicked {count} times.
);
}
export default App;
```
````
The above code block is normally rendered like this:
```jsx
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
You clicked {count} times.
);
}
export default App;
```
The code block can instead be rendered as an interactive playground by adding the `livecodes` parameter to the code block language meta:
````md {1}
```jsx livecodes
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
You clicked {count} times.
);
}
export default App;
```
````
to be displayed like this:
```jsx livecodes
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
You clicked {count} times.
);
}
export default App;
```
The playground can be customized by setting [options](#options) that are applied to all code blocks or by [meta parameters](#meta-parameters) that are applied to individual code blocks.
Alternatively, the code block can be kept as it is, and a button or a link (**Edit in LiveCodes**) is appended, below the code block, that opens the code in a LiveCodes playground.
This is achieved by adding the `render=button` or `render=link` parameter to the code block language meta.
This displays a button:
````md {1}
```jsx livecodes render=button
import { useState } from "react";
function App() {
const [count, setCount] = useState(0);
return (
);
}
export default App;
```
## Packages
All the functionality described here can be achieved using *any* of the following packages:
- [`markdown-it-livecodes`](https://www.npmjs.com/package/markdown-it-livecodes): A [markdown-it](https://github.com/markdown-it/markdown-it) plugin.
- [`marked-livecodes`](https://www.npmjs.com/package/marked-livecodes): A [marked](https://github.com/markedjs/marked) plugin.
- [`remark-livecodes`](https://www.npmjs.com/package/remark-livecodes): A [remark](https://github.com/remarkjs/remark) plugin.
- [`gatsby-remark-livecodes`](https://www.npmjs.com/package/gatsby-remark-livecodes): A [gatsby](https://github.com/gatsbyjs/gatsby) plugin.
See the section "[Using with Frameworks](#using-with-frameworks)" for using the plugins with popular frameworks like Astro, Docusaurus, Next.js, Storybook, VitePress, etc.
## Usage
### markdown-it-livecodes
To use the `markdown-it-livecodes` plugin, first install it:
```bash npm2yarn
npm install markdown-it markdown-it-livecodes
```
Then it can be used like this:
````js
import markdownIt from "markdown-it";
import markdownItLivecodes from "markdown-it-livecodes";
const input = "```js livecodes \nconsole.log('Hello World!');\n```";
const output = markdownIt()
.use(markdownItLivecodes, {
/* options */
})
.render(input);
console.log(output); //
````
### marked-livecodes
To use the `marked-livecodes` plugin, first install it:
```bash npm2yarn
npm install marked marked-livecodes
```
Then it can be used like this:
````js
import marked from "marked";
import markedLivecodes from "marked-livecodes";
const input = "```js livecodes \nconsole.log('Hello World!');\n```";
const output = await marked
.use(markedLivecodes, {
/* options */
})
.parse(input);
console.log(output); //
````
### remark-livecodes
To use the `remark-livecodes` plugin, first install it:
```bash npm2yarn
npm install remark remark-livecodes
```
Then it can be used like this:
````js
import { remark } from "remark";
import remarkLivecodes from "remark-livecodes";
const input = "```js livecodes \nconsole.log('Hello World!');\n```";
const output = await remark()
.use(remarkLivecodes, {
/* options */
})
.process(input);
console.log(String(output)); //
````
### gatsby-remark-livecodes
See usage with [Gatsby](#gatsby).
## Options
Options can be passed to the plugins. These options apply to all code blocks.
These options include LiveCodes SDK [embed options](./sdk/js-ts.html.md)#embed-options) (except `headless`).
Example:
````js
const output = await remark()
.use(remarkLivecodes, {
// highlight-start
loading: "click",
params: {
console: "open"
theme: "light",
}
// highlight-end
})
.process(input);
````
In addition, the following options are also available:
- `render`: The render mode for the LiveCodes playgrounds. This can be one of the following:
- `playground` (default): Replaces the code block with an iframe that displays the LiveCodes playground. By default, [`"simple"` mode](./features/display-modes.html.md) is used, but this can be changed in [options](#options) or [meta parameters](#meta-parameters).
- `link`: Keeps the code block as it is, and appends a link (**Edit in LiveCodes**), below the code block, that opens the code in a LiveCodes playground.
- `button`: Keeps the code block as it is, and appends a button (Edit in LiveCodes), below the code block, that opens the code in a LiveCodes playground.
- `meta`: Keeps the code block as it is, and adds the URL of the playground to the `data-livecodes-url` attribute of the `` element. In addition, in `remark-livecodes` the URL is added to the AST (`node.data.livecodesUrl` and `node.data.hProperties.dataLivecodesUrl`). In `markdown-it-livecodes` the URL is added to `env.livecodesUrl`.
This can be used by other plugins (e.g. to display a custom run button overlying the code block).
- `height`: The height of the playground iframe.
- `className`: The class name to be applied to the iframe, link or button.
Note: If the class name of the button contains `"dark"` (e.g. `"dark-btn"`), the dark button will be used.
- `auto`: When set to `true`, it automatically enables the `livecodes` parameter for all code blocks without having to explicitly add it.
This is useful when you have a large number of code blocks and don't want to add the `livecodes` parameter to each code block.
To disable this for a specific code block, add the `livecodes=false` [meta parameter](#meta-parameters) to the code block.
## Meta Parameters
Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name.
Meta parameters of code blocks override the [options](#options) passed to the plugin.
Example:
````markdown {1}
```jsx livecodes render=button className=dark-btn console=open
import { useState, useEffect } from "react";
export default () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("count:", count);
}, [count]);
return (
You clicked {count} times.
);
};
```
````
All LiveCodes [configuration query parameters](./configuration/query-params.html.md) can be used as code block meta parameters (e.g. ` ```js livecodes console=open theme=light`). See the [LiveCodes configuration docs](./configuration/configuration-object.html.md) for more information.
In addition, the following meta parameters are available:
- `livecodes`: Enables the LiveCodes playground for the code block. This can be omitted if the `auto` option is set to `true`. When `livecodes` is set to `false`, the code block is not handled by the plugin.
- `render`: The render mode. See the [Options](#options) section for more information.
- `height`: The height of the playground iframe.
- `className`: The class name for the playground iframe, link or button.
- `lang`: This overrides the language of the code block (e.g. ` ```jsx livecodes lang=react` or ` ```py livecodes lang=py-wasm`). See the [Languages](./languages/index.html.md) docs for more language information.
## Using with Frameworks
This guide shows how to use the suitable plugin in different frameworks.
### Astro
([demo](https://markdown-to-livecodes-astro.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-astro))
Install the `remark-livecodes` plugin:
```bash npm2yarn
npm install -D remark-livecodes
```
This is an example for adding the `remark-livecodes` plugin to `astro.config.mjs` file:
```js title="astro.config.js"
import { defineConfig } from "astro/config";
import mdx from "@astrojs/mdx";
import remarkLivecodes from "remark-livecodes";
export default defineConfig({
// ...
integrations: [mdx()],
markdown: {
remarkPlugins: [
[remarkLivecodes, { /* options */ }],
],
},
});
```
### Docusaurus
([demo](https://markdown-to-livecodes-docusaurus.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-docusaurus))
Install the `remark-livecodes` plugin:
```bash npm2yarn
npm install -D remark-livecodes
```
This is an example for adding the `remark-livecodes` plugin to `docusaurus.config.js` file:
```js title="docusaurus.config.js"
export default {
presets: [
[
'classic',
{
docs: {
// ...
remarkPlugins: [
[require('remark-livecodes'), { /* options */ }],
],
},
},
],
],
// ...
};
```
### Eleventy
([demo](https://markdown-to-livecodes-11ty.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-11ty))
Install the `markdown-it-livecodes` plugin:
```bash npm2yarn
npm install -D markdown-it-livecodes
```
This is an example for adding the `markdown-it-livecodes` plugin to `eleventy.config.js` file:
```js title="eleventy.config.js"
import markdownItLivecodes from "markdown-it-livecodes";
export default async function (eleventyConfig) {
eleventyConfig.amendLibrary("md", (mdLib) =>
mdLib.use(markdownItLivecodes, { /* options */ }),
);
// ...
}
```
### Gatsby
([demo](https://markdown-to-livecodes-gatsby.pages.dev/markdown-to-livecodes/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-gatsby))
Install the `gatsby-remark-livecodes` plugin:
```bash npm2yarn
npm install -D gatsby-remark-livecodes
```
This is an example for adding the `gatsby-remark-livecodes` plugin to `gatsby-config.js` file:
```js title="gatsby-config.js"
module.exports = {
// ...
plugins: [
// ...
{
resolve: 'gatsby-transformer-remark',
options: {
plugins: [
{
resolve: 'gatsby-remark-livecodes',
options: { /* options */ },
},
],
},
},
],
};
```
### Next.js
([demo](https://markdown-to-livecodes-nextjs.pages.dev/mdx-page) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-nextjs))
See [Next.js docs](https://nextjs.org/docs/app/guides/mdx) for using markdown and MDX in Next.js.
Install the `remark-livecodes` plugin:
```bash npm2yarn
npm install -D remark-livecodes
```
This is an example for adding the `remark-livecodes` plugin to `next.config.js` file:
```js title="next.config.js"
import createMDX from "@next/mdx";
import remarkLivecodes from "remark-livecodes";
const nextConfig = {
// ...
pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
};
const withMDX = createMDX({
options: {
remarkPlugins: [
[remarkLivecodes, { /* other options */ }],
],
},
});
export default withMDX(nextConfig);
```
When using Turbopack for local development, check the guide for [using plugins with Turbopack](https://nextjs.org/docs/app/guides/mdx#using-plugins-with-turbopack).
### react-markdown
`react-markdown` is a React component to render markdown.
This is an example for using the `remark-livecodes` plugin with `react-markdown`:
Install the `remark-livecodes` plugin:
```bash npm2yarn
npm install remark-livecodes
```
```jsx title="App.jsx" livecodes render=button
import Markdown from 'react-markdown';
import remarkLivecodes from 'remark-livecodes';
const markdown =
'```jsx livecodes\nexport default () =>
Hello World
\n```';
export default () => (
{markdown}
);
```
### Storybook
([demo](https://markdown-to-livecodes-storybook.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-storybook))
Install the `remark-livecodes` plugin:
```bash npm2yarn
npm install -D remark-livecodes
```
This is an example for adding the `remark-livecodes` plugin to `storybook/main.js` file:
```js title="storybook/main.js"
import remarkLivecodes from "remark-livecodes";
export default {
// ...
addons: [
// ...
{
name: "@storybook/addon-docs",
options: {
mdxPluginOptions: {
mdxCompileOptions: {
remarkPlugins: [
[remarkLivecodes, { /* options */ }],
],
},
},
},
},
],
};
```
### VitePress
([demo](https://markdown-to-livecodes-vitepress.pages.dev/) - [code on GitHub](https://github.com/hatemhosny/markdown-to-livecodes-vitepress))
Install the `markdown-it-livecodes` plugin:
```bash npm2yarn
npm install -D markdown-it-livecodes
```
This is an example for adding the `markdown-it-livecodes` plugin to `vitepress.config.js` file:
```js title=".vitepress/config.js"
import { defineConfig } from "vitepress";
import markDownItLivecodes from "markdown-it-livecodes";
export default defineConfig({
// ...
markdown: {
config: (md) => {
md.use(markDownItLivecodes, { /* options */ });
},
},
});
```
### Xlog
([demo](https://xlog.emadelsaid.com/docs/Features%20Test/#blocks))
LiveCodes is natively supported by [Xlog](https://xlog.emadelsaid.com/) as an [official extension](https://xlog.emadelsaid.com/docs/official%20extensions/#livecodes-interactive-playgrounds).
---
# Contribution
Contributions are always welcome. Before contributing,
please read the [code of conduct](https://github.com/live-codes/livecodes/blob/HEAD/CODE_OF_CONDUCT.md).
For code contribution, please refer to the [contribution introduction](https://github.com/live-codes/livecodes/blob/HEAD/CONTRIBUTING.md).
The internal architecture and system documentation are detailed in the [contribution guide](https://github.com/live-codes/livecodes/blob/HEAD/docs/docs/contribution/README.md).
For AI agents, see the section [AI Guide](./ai-guide.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 :)
---
# AI Guide
This guide is specifically designed for AI Large Language Models (LLMs) and autonomous agents to effectively use the LiveCodes library for creating and embedding code playgrounds.
## llms.txt
For optimal context when working with LiveCodes, use these specially formatted documentation files:
**📄 [llms.txt](pathname:///llms.txt)** - Concise overview of the library, installation, basic usage, and key concepts
**📄 [llms-full.txt](pathname:///llms-full.txt)** - Complete documentation including all guides, API reference, and examples
These files are specifically structured for AI consumption with:
- Clear API signatures and type definitions
- Code examples with expected outputs
- Language and framework reference lists
- Best practices and common patterns
See [https://llmstxt.org/](https://llmstxt.org/) for more information about llms.txt standards.
## Skills
LiveCodes provides skills for enhanced AI-assisted development.
### Installation for AI Agents
```bash
# Add skills into your project
npx skills add live-codes/livecodes
```
### Available Skills
| Skill | Description |
| ----------------------------------- | ------------------------------------------------ |
| `livecodes/getting-started` | Quick start, installation, first playground |
| `livecodes/sdk-embedding` | createPlayground, EmbedOptions, containers |
| `livecodes/sdk-methods` | run, getCode, setConfig, watch, format |
| `livecodes/configuration` | Config object, query params, processors |
| `livecodes/display-modes` | full, simple, lite, editor, result modes |
| `livecodes/headless-mode` | Run without visible UI |
| `livecodes/import-export` | GitHub, gists, URLs, files, ZIP, HTML |
| `livecodes/language-support` | 90+ languages, compilers, CSS processors |
| `livecodes/module-resolution` | npm, jsr, GitHub imports, CDN resolution |
| `livecodes/testing` | Jest and Testing Library in the browser |
| `livecodes/framework-wrappers` | React, Vue, Svelte, Solid, Preact wrappers |
| `livecodes/markdown-integration` | Docusaurus, Astro, VitePress, Next.js |
| `livecodes/self-hosting` | Static servers, GitHub Pages, Docker |
| `livecodes/gh-action` | Preview PRs in LiveCodes |
### Using Skills
AI agents can load relevant skills automatically based on context:
- Creating a new embedded playground → loads `sdk-embedding`
- Configuring languages or processors → loads `language-support`
- Using React/Vue/Svelte wrappers → loads `framework-wrappers`
- Running tests in the playground → loads `testing`
- Importing npm packages → loads `module-resolution`
- Self-hosting LiveCodes → loads `self-hosting`
## Key Concepts for AI Agents
### 1. Creating a Playground
```typescript
import { createPlayground } from 'livecodes';
// Always await createPlayground - it returns a Promise
const playground = await createPlayground('#container', {
config: {
markup: { language: 'html', content: '
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)
- [ScreenName](type-aliases/ScreenName.md)
- [TemplateName](type-aliases/TemplateName.md)
- [Theme](type-aliases/Theme.md)
- [ToolName](type-aliases/ToolName.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
The SDK API interface for playground interaction.
## 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
[src/sdk/models.ts:1605](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1605)
***
### 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
[src/sdk/models.ts:1588](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1588)
***
### 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
[src/sdk/models.ts:1421](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1421)
***
### 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
[src/sdk/models.ts:1499](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1499)
***
### 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
[src/sdk/models.ts:1454](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1454)
***
### 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
[src/sdk/models.ts:1438](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1438)
***
### ~~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
[src/sdk/models.ts:1536](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1536)
***
### 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
[src/sdk/models.ts:1404](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1404)
***
### 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
[src/sdk/models.ts:1529](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1529)
***
### setConfig()
> **setConfig**: (`config`) => `Promise`\<[`Config`](../../interfaces/Config.md)\>
Loads a new project using the passed configuration object.
If the config is a string, it is assumed to be a URL to a JSON file that contains the configuration object.
#### Parameters
• **config**: `string` \| `Partial`\<[`Config`](../../interfaces/Config.md)\>
#### Returns
`Promise`\<[`Config`](../../interfaces/Config.md)\>
#### Throws
It throws an error if the config object (or URL) is invalid.
#### 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
[src/sdk/models.ts:1478](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1478)
***
### show()
> **show**: (`panel`, `options`?) => `Promise`\<`void`\>
Shows the selected panel.
See [docs](https://livecodes.io/docs/sdk/js-ts#show) for details.
#### Parameters
• **panel**: `"editor"` \| `"result"` \| [`EditorId`](../type-aliases/EditorId.md) \| [`ToolName`](../type-aliases/ToolName.md) \| `"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
[src/sdk/models.ts:1513](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1513)
***
### 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
[src/sdk/models.ts:1581](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1581)
---
# 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
[src/sdk/models.ts:1037](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1037)
***
### mode
> **mode**: `"editor"` \| `"result"` \| `"full"` \| `"focus"` \| `"lite"` \| `"simple"` \| `"codeblock"`
Sets the [display mode](https://livecodes.io/docs/features/display-modes).
#### Default
```ts
"full"
```
#### Defined in
[src/sdk/models.ts:1049](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1049)
***
### 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
[src/sdk/models.ts:1031](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1031)
***
### 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**: `""` \| [`ToolName`](../type-aliases/ToolName.md)
##### enabled
> **enabled**: [`ToolName`](../type-aliases/ToolName.md)[] \| `"all"`
##### 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
[src/sdk/models.ts:1065](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1065)
***
### view?
> `optional` **view**: `"split"` \| `"editor"` \| `"result"`
Sets the [default view](https://livecodes.io/docs/features/default-view) for the playground.
#### Default
```ts
"split"
```
#### Defined in
[src/sdk/models.ts:1043](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1043)
***
### zoom
> **zoom**: `0.25` \| `0.5` \| `1`
Sets result page [zoom level](https://livecodes.io/docs/features/result#result-page-zoom).
#### Defined in
[src/sdk/models.ts:1074](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1074)
---
# 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
[src/sdk/models.ts:1124](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1124)
***
### cssPreset
> **cssPreset**: [`CssPresetId`](../type-aliases/CssPresetId.md)
[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use.
#### Defined in
[src/sdk/models.ts:1171](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1171)
***
### customSettings
> **customSettings**: `object`
Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project.
#### adoc
> **adoc**: `any`
#### app.svelte
> **svelte**: `any`
#### app.vue
> **vue**: `any`
#### art
> **art**: `any`
#### art-template
> **art-template**: `any`
#### as
> **as**: `any`
#### asc
> **asc**: `any`
#### asciidoc
> **asciidoc**: `any`
#### assemblyscript
> **assemblyscript**: `any`
#### astro
> **astro**: `any`
#### autoprefixer
> **autoprefixer**: `any`
#### babel
> **babel**: `any`
#### bb
> **bb**: `any`
#### bbcode
> **bbcode**: `any`
#### Binary
> **Binary**: `any`
#### blockly
> **blockly**: `any`
#### blockly.xml
> **xml**: `any`
#### c
> **c**: `any`
#### C
> **C**: `any`
#### c++
> **c++**: `any`
#### civet
> **civet**: `any`
#### clang
> **clang**: `any`
#### clang.cpp
> **cpp**: `any`
#### clio
> **clio**: `any`
#### clj
> **clj**: `any`
#### cljc
> **cljc**: `any`
#### cljs
> **cljs**: `any`
#### clojure
> **clojure**: `any`
#### clojurescript
> **clojurescript**: `any`
#### coffee
> **coffee**: `any`
#### coffeescript
> **coffeescript**: `any`
#### common-lisp
> **common-lisp**: `any`
#### commonlisp
> **commonlisp**: `any`
#### convertCommonjs?
> `optional` **convertCommonjs**: `boolean`
#### cp
> **cp**: `any`
#### cpp
> **cpp**: `any`
#### cpp-wasm
> **cpp-wasm**: `any`
#### cppm
> **cppm**: `any`
#### cppwasm
> **cppwasm**: `any`
#### cs
> **cs**: `any`
#### cs-wasm
> **cs-wasm**: `any`
#### csharp
> **csharp**: `any`
#### csharp-wasm
> **csharp-wasm**: `any`
#### css
> **css**: `any`
#### cssmodules
> **cssmodules**: `any`
#### cssnano
> **cssnano**: `any`
#### cwasm
> **cwasm**: `any`
#### cxx
> **cxx**: `any`
#### defaultCDN?
> `optional` **defaultCDN**: [`CDN`](../type-aliases/CDN.md)
#### diagram
> **diagram**: `any`
#### diagrams
> **diagrams**: `any`
#### dot
> **dot**: `any`
#### dzn
> **dzn**: `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`
#### go-wasm
> **go-wasm**: `any`
#### golang
> **golang**: `any`
#### gowasm
> **gowasm**: `any`
#### graph
> **graph**: `any`
#### h
> **h**: `any`
#### haml
> **haml**: `any`
#### handlebars
> **handlebars**: `any`
#### hbs
> **hbs**: `any`
#### hpp
> **hpp**: `any`
#### htm
> **htm**: `any`
#### html
> **html**: `any`
#### ii
> **ii**: `any`
#### imba
> **imba**: `any`
#### imports?
> `optional` **imports**: `Record`\<`string`, `string`\>
#### ixx
> **ixx**: `any`
#### jade
> **jade**: `any`
#### java
> **java**: `any`
#### javascript
> **javascript**: `any`
#### jinja
> **jinja**: `any`
#### jl
> **jl**: `any`
#### js
> **js**: `any`
#### json
> **json**: `any`
#### jsx
> **jsx**: `any`
#### julia
> **julia**: `any`
#### less
> **less**: `any`
#### lightningcss
> **lightningcss**: `any`
#### liquid
> **liquid**: `any`
#### liquidjs
> **liquidjs**: `any`
#### lisp
> **lisp**: `any`
#### livescript
> **livescript**: `any`
#### ls
> **ls**: `any`
#### lua
> **lua**: `any`
#### lua-wasm
> **lua-wasm**: `any`
#### luawasm
> **luawasm**: `any`
#### malina
> **malina**: `any`
#### malinajs
> **malinajs**: `any`
#### mapImports?
> `optional` **mapImports**: `boolean`
#### markdown
> **markdown**: `any`
#### md
> **md**: `any`
#### mdown
> **mdown**: `any`
#### mdx
> **mdx**: `any`
#### minizinc
> **minizinc**: `any`
#### mjml
> **mjml**: `any`
#### mjs
> **mjs**: `any`
#### mkdn
> **mkdn**: `any`
#### ml
> **ml**: `any`
#### mli
> **mli**: `any`
#### mts
> **mts**: `any`
#### mustache
> **mustache**: `any`
#### mzn
> **mzn**: `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`
#### ripple
> **ripple**: `any`
#### ripplejs
> **ripplejs**: `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"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"text/minizinc"` \| `"text/go-wasm"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"`
#### 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`
#### swift
> **swift**: `any`
#### tailwindcss
> **tailwindcss**: `any`
#### tcl
> **tcl**: `any`
#### teal
> **teal**: `any`
#### template?
> `optional` **template**: `object`
#### template.data?
> `optional` **data**: `any`
#### template.prerender?
> `optional` **prerender**: `boolean`
#### tl
> **tl**: `any`
#### tokencss
> **tokencss**: `any`
#### ts
> **ts**: `any`
#### tsx
> **tsx**: `any`
#### twig
> **twig**: `any`
#### types?
> `optional` **types**: [`Types`](Types.md)
#### typescript
> **typescript**: `any`
#### unocss
> **unocss**: `any`
#### vento
> **vento**: `any`
#### vto
> **vto**: `any`
#### vue
> **vue**: `any`
#### vue-app
> **vue-app**: `any`
#### vue2
> **vue2**: `any`
#### vue3
> **vue3**: `any`
#### wasm
> **wasm**: `any`
#### wasm.cpp
> **cpp**: `any`
#### wasm.cs
> **cs**: `any`
#### wasm.go
> **go**: `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
[src/sdk/models.ts:1183](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1183)
***
### 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
[src/sdk/models.ts:1094](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1094)
***
### head
> **head**: `string`
Content added to the [result page](https://livecodes.io/docs/features/result) `` element.
#### Default
```ts
'\n'
```
#### Defined in
[src/sdk/models.ts:1100](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1100)
***
### 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
[src/sdk/models.ts:1109](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1109)
***
### 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
[src/sdk/models.ts:1209](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1209)
***
### languages
> **languages**: `undefined` \| (`"html"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"dot"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"stylus"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"mjs"` \| `"json"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"flow"` \| `"ts"` \| `"mts"` \| `"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"` \| `"ripple"` \| `"ripplejs"` \| `"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"` \| `"go-wasm"` \| `"wasm.go"` \| `"gowasm"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"teal"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"swift"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"reason"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"minizinc"` \| `"mzn"` \| `"dzn"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"postcssImportUrl"` \| `"tailwindcss"` \| `"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
[src/sdk/models.ts:1131](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1131)
***
### markup
> **markup**: `object`
An object that configures the language and content of the markup editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
#### content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### language
> **language**: [`Language`](../../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### position?
> `optional` **position**: [`EditorPosition`](EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### Default
```ts
{ language: "html", content: "" }
```
#### Defined in
[src/sdk/models.ts:1139](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1139)
***
### 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
[src/sdk/models.ts:1178](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1178)
***
### script
> **script**: `object`
An object that configures the language and content of the script editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
#### content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### language
> **language**: [`Language`](../../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### position?
> `optional` **position**: [`EditorPosition`](EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### Default
```ts
{ language: "javascript", content: "" }
```
#### Defined in
[src/sdk/models.ts:1155](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1155)
***
### 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
[src/sdk/models.ts:1165](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1165)
***
### style
> **style**: `object`
An object that configures the language and content of the style editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
#### content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### language
> **language**: [`Language`](../../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### position?
> `optional` **position**: [`EditorPosition`](EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### Default
```ts
{ language: "css", content: "" }
```
#### Defined in
[src/sdk/models.ts:1147](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1147)
***
### 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
[src/sdk/models.ts:1160](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1160)
***
### tags
> **tags**: `string`[]
Project tags.
Used in [project](https://livecodes.io/docs/features/projects) filter and search.
#### Default
```ts
[]
```
#### Defined in
[src/sdk/models.ts:1116](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1116)
***
### 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
[src/sdk/models.ts:1245](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1245)
***
### 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
[src/sdk/models.ts:1087](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1087)
***
### 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
[src/sdk/models.ts:1239](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1239)
***
### 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
[src/sdk/models.ts:1252](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1252)
---
# Interface: EditorConfig
Configuration for code editor settings.
## Extended by
- [`UserConfig`](UserConfig.md)
## Properties
### closeBrackets
> **closeBrackets**: `boolean`
Use auto-complete to close brackets and quotes.
#### Default
```ts
true
```
#### Defined in
[src/sdk/models.ts:930](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L930)
***
### editor
> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"`
Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use.
If `undefined` (the default), Monaco editor is used on desktop,
CodeMirror is used on mobile and in `simple` mode,
while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds.
If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.
#### Default
```ts
undefined
```
#### Defined in
[src/sdk/models.ts:851](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L851)
***
### editorMode
> **editorMode**: `undefined` \| `"vim"` \| `"emacs"`
Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes).
#### Defined in
[src/sdk/models.ts:947](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L947)
***
### 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
[src/sdk/models.ts:877](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L877)
***
### emmet
> **emmet**: `boolean`
Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet).
#### Default
```ts
true
```
#### Defined in
[src/sdk/models.ts:942](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L942)
***
### foldRegions
> **foldRegions**: `boolean`
When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded.
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:924](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L924)
***
### fontFamily
> **fontFamily**: `undefined` \| `string`
Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family.
#### Defined in
[src/sdk/models.ts:882](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L882)
***
### 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
[src/sdk/models.ts:890](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L890)
***
### lineNumbers
> **lineNumbers**: `boolean` \| `"relative"`
Show line numbers in [code editor](https://livecodes.io/docs/features/editor-settings).
#### Default
```ts
true
```
#### Defined in
[src/sdk/models.ts:912](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L912)
***
### minimap
> **minimap**: `boolean`
Enables minimap in code editor.
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:936](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L936)
***
### 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
[src/sdk/models.ts:906](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L906)
***
### 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
[src/sdk/models.ts:857](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L857)
***
### themeColor
> **themeColor**: `undefined` \| `string`
Sets the app theme color.
If `undefined`, it is set to `"hsl(214, 40%, 50%)"`.
#### Default
```ts
undefined
```
#### Defined in
[src/sdk/models.ts:864](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L864)
***
### 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
[src/sdk/models.ts:898](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L898)
***
### wordWrap
> **wordWrap**: `boolean`
Enables word-wrap for long lines.
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:918](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L918)
---
# Interface: EditorPosition
Represents a position in a code editor,
with 1-based line number and (optional) 1-based column number.
## Properties
### column?
> `optional` **column**: `number`
1-based column number (optional)
#### Defined in
[src/sdk/models.ts:261](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L261)
***
### lineNumber
> **lineNumber**: `number`
1-based line number
#### Defined in
[src/sdk/models.ts:258](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L258)
---
# Interface: FormatterConfig
Configuration for code formatting options.
## 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
[src/sdk/models.ts:822](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L822)
***
### 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
[src/sdk/models.ts:827](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L827)
***
### tabSize
> **tabSize**: `number`
The number of spaces per indentation-level.
#### Default
```ts
2
```
#### Defined in
[src/sdk/models.ts:816](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L816)
***
### 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
[src/sdk/models.ts:833](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L833)
***
### useTabs
> **useTabs**: `boolean`
If `true`, lines are indented with tabs instead of spaces.
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:810](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L810)
---
# Interface: TestResult
Represents the result of a single test.
## Properties
### duration
> **duration**: `number`
Time taken to run the test in milliseconds.
#### Defined in
[src/sdk/models.ts:653](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L653)
***
### errors
> **errors**: `string`[]
Array of error messages if the test failed.
#### Defined in
[src/sdk/models.ts:655](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L655)
***
### status
> **status**: `"pass"` \| `"fail"` \| `"skip"`
The status of the test.
#### Defined in
[src/sdk/models.ts:657](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L657)
***
### testPath
> **testPath**: `string`[]
The path to the test in the test suite.
#### Defined in
[src/sdk/models.ts:659](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L659)
---
# Interface: Types
Custom type declarations for module imports.
## Indexable
\[`key`: `string`\]: `string` \| `object`
---
# Interface: UserConfig
User preferences and settings for the playground.
## 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
[src/sdk/models.ts:1017](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1017)
***
### 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
[src/sdk/models.ts:966](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L966)
***
### autotest
> **autotest**: `boolean`
If `true`, the project is watched for code changes which trigger tests to auto-run.
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:972](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L972)
***
### 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
[src/sdk/models.ts:959](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L959)
***
### 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
[src/sdk/models.ts:930](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L930)
***
### 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
[src/sdk/models.ts:980](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L980)
***
### editor
> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"`
Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use.
If `undefined` (the default), Monaco editor is used on desktop,
CodeMirror is used on mobile and in `simple` mode,
while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds.
If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.
#### Default
```ts
undefined
```
#### Inherited from
[`EditorConfig`](EditorConfig.md).[`editor`](EditorConfig.md#editor)
#### Defined in
[src/sdk/models.ts:851](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L851)
***
### 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
[src/sdk/models.ts:947](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L947)
***
### 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
[src/sdk/models.ts:877](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L877)
***
### 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
[src/sdk/models.ts:942](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L942)
***
### foldRegions
> **foldRegions**: `boolean`
When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded.
#### Default
```ts
false
```
#### Inherited from
[`EditorConfig`](EditorConfig.md).[`foldRegions`](EditorConfig.md#foldregions)
#### Defined in
[src/sdk/models.ts:924](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L924)
***
### 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
[src/sdk/models.ts:882](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L882)
***
### 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
[src/sdk/models.ts:890](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L890)
***
### 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
[src/sdk/models.ts:986](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L986)
***
### layout
> **layout**: `undefined` \| `"responsive"` \| `"horizontal"` \| `"vertical"`
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
[src/sdk/models.ts:995](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L995)
***
### 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
[src/sdk/models.ts:912](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L912)
***
### minimap
> **minimap**: `boolean`
Enables minimap in code editor.
#### Default
```ts
false
```
#### Inherited from
[`EditorConfig`](EditorConfig.md).[`minimap`](EditorConfig.md#minimap)
#### Defined in
[src/sdk/models.ts:936](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L936)
***
### recoverUnsaved
> **recoverUnsaved**: `boolean`
Enables [recovering last unsaved project](https://livecodes.io/docs/features/recover) when the app is reopened.
#### Default
```ts
true
```
#### Defined in
[src/sdk/models.ts:1001](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1001)
***
### 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
[src/sdk/models.ts:822](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L822)
***
### showSpacing
> **showSpacing**: `boolean`
Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page.
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:1007](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1007)
***
### 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
[src/sdk/models.ts:827](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L827)
***
### 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
[src/sdk/models.ts:906](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L906)
***
### 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
[src/sdk/models.ts:857](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L857)
***
### 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
[src/sdk/models.ts:864](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L864)
***
### 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
[src/sdk/models.ts:833](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L833)
***
### 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
[src/sdk/models.ts:898](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L898)
***
### welcome
> **welcome**: `boolean`
If `true`, the [welcome screen](https://livecodes.io/docs/features/welcome) is displayed when the app loads.
#### Defined in
[src/sdk/models.ts:1012](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1012)
***
### wordWrap
> **wordWrap**: `boolean`
Enables word-wrap for long lines.
#### Default
```ts
false
```
#### Inherited from
[`EditorConfig`](EditorConfig.md).[`wordWrap`](EditorConfig.md#wordwrap)
#### Defined in
[src/sdk/models.ts:918](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L918)
---
# Type Alias: APICommands
> **APICommands**: `"setBroadcastToken"` \| `"showVersion"`
API commands for the SDK.
## Defined in
[src/sdk/models.ts:430](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L430)
---
# Type Alias: AppLanguage
> **AppLanguage**: `"auto"` \| `"ar"` \| `"bn"` \| `"de"` \| `"en"` \| `"es"` \| `"fa"` \| `"fr"` \| `"hi"` \| `"id"` \| `"it"` \| `"ja"` \| `"nl"` \| `"pt"` \| `"tr"` \| `"ru"` \| `"ur"` \| `"zh-CN"`
Supported UI/app languages for localization.
## Defined in
[src/sdk/models.ts:323](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L323)
---
# 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"`
CDN providers for external resources.
## Defined in
[src/sdk/models.ts:294](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L294)
---
# 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"`
Themes for the CodeJar editor.
## Defined in
[src/sdk/models.ts:576](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L576)
---
# 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"`
Themes for the CodeMirror editor.
## Defined in
[src/sdk/models.ts:533](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L533)
---
# Type Alias: CssPresetId
> **CssPresetId**: `""` \| `"normalize.css"` \| `"reset-css"`
CSS presets.
## Defined in
[src/sdk/models.ts:289](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L289)
---
# Type Alias: EditorId
> **EditorId**: `"markup"` \| `"style"` \| `"script"`
The identifier for each code editor pane in the playground.
## Defined in
[src/sdk/models.ts:250](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L250)
---
# 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\}\`
Editor theme that can be a Monaco, CodeMirror, or CodeJar theme,
optionally with editor prefix and/or a theme suffix (light/dark).
See [docs](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details.
## Defined in
[src/sdk/models.ts:634](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L634)
---
# 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"`
Themes for the Monaco editor.
## Defined in
[src/sdk/models.ts:463](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L463)
---
# Type Alias: Processor
> **Processor**: `"postcss"` \| `"postcssImportUrl"` \| `"tailwindcss"` \| `"windicss"` \| `"unocss"` \| `"tokencss"` \| `"lightningcss"` \| `"autoprefixer"` \| `"postcssPresetEnv"` \| `"cssmodules"` \| `"purgecss"` \| `"cssnano"`
CSS preprocessors and PostCSS plugins.
## Defined in
[src/sdk/models.ts:272](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L272)
---
# Type Alias: ScreenName
> **ScreenName**: `"login"` \| `"info"` \| `"new"` \| `"open"` \| `"assets"` \| `"add-asset"` \| `"snippets"` \| `"add-snippet"` \| `"import"` \| `"resources"` \| `"share"` \| `"embed"` \| `"deploy"` \| `"sync"` \| `"backup"` \| `"broadcast"` \| `"welcome"` \| `"about"` \| `"custom-settings"` \| `"editor-settings"` \| `"code-to-image"` \| `"test-editor"` \| `"keyboard-shortcuts"`
Screen names in the app.
## Defined in
[src/sdk/models.ts:435](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L435)
---
# 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"` \| `"python-wasm"` \| `"r"` \| `"ruby"` \| `"ruby-wasm"` \| `"go"` \| `"go-wasm"` \| `"php"` \| `"php-wasm"` \| `"cpp"` \| `"cpp-wasm"` \| `"java"` \| `"csharp-wasm"` \| `"perl"` \| `"lua"` \| `"lua-wasm"` \| `"teal"` \| `"fennel"` \| `"julia"` \| `"scheme"` \| `"commonlisp"` \| `"clojurescript"` \| `"gleam"` \| `"tcl"` \| `"markdown"` \| `"assemblyscript"` \| `"wat"` \| `"sql"` \| `"postgresql"` \| `"prolog"` \| `"minizinc"` \| `"blockly"` \| `"diagrams"`
Starter template names.
## Defined in
[src/sdk/models.ts:346](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L346)
---
# Type Alias: Theme
> **Theme**: `"light"` \| `"dark"`
The app theme mode.
## Defined in
[src/sdk/models.ts:267](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L267)
---
# Type Alias: ToolName
> **ToolName**: `"console"` \| `"compiled"` \| `"tests"`
Tools in the tools pane.
## Defined in
[src/sdk/models.ts:420](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L420)
---
# Type Alias: ToolsPaneStatus
> **ToolsPaneStatus**: `"closed"` \| `"open"` \| `"full"` \| `"none"` \| `""`
Status of the tools pane.
## Defined in
[src/sdk/models.ts:425](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L425)
---
# Type Alias: WatchCode()
> **WatchCode**: (`event`, `fn`) => `object`
Watch function type for code changes in the playground.
## Parameters
• **event**: `"code"`
• **fn**
## Returns
`object`
### remove()
> **remove**: () => `void`
#### Returns
`void`
## Defined in
[src/sdk/models.ts:1347](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1347)
---
# Type Alias: WatchConsole()
> **WatchConsole**: (`event`, `fn`) => `object`
Called when console methods are called in the result page.
## Parameters
• **event**: `"console"`
• **fn**
## Returns
`object`
### remove()
> **remove**: () => `void`
#### Returns
`void`
## Defined in
[src/sdk/models.ts:1355](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1355)
---
# Type Alias: WatchDestroy()
> **WatchDestroy**: (`event`, `fn`) => `object`
Called when the playground is destroyed.
## Parameters
• **event**: `"destroy"`
• **fn**
## Returns
`object`
### remove()
> **remove**: () => `void`
#### Returns
`void`
## Defined in
[src/sdk/models.ts:1371](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1371)
---
# 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
[src/sdk/models.ts:1320](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1320)
---
# 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
[src/sdk/models.ts:1325](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1325)
---
# Type Alias: WatchTests()
> **WatchTests**: (`event`, `fn`) => `object`
Called when test results are available.
## Parameters
• **event**: `"tests"`
• **fn**
## Returns
`object`
### remove()
> **remove**: () => `void`
#### Returns
`void`
## Defined in
[src/sdk/models.ts:1363](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1363)
---
# 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`
Markup editor code.
#### compiled
> **compiled**: `string`
The compiled code.
#### content
> **content**: `string`
The source code.
#### language
> **language**: [`Language`](../type-aliases/Language.md)
The language of the code.
#### Defined in
[src/sdk/models.ts:1276](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1276)
***
### result
> **result**: `string`
The HTML content of the result page.
#### Defined in
[src/sdk/models.ts:1303](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1303)
***
### script
> **script**: `object`
Script editor code.
#### compiled
> **compiled**: `string`
The compiled code.
#### content
> **content**: `string`
The source code.
#### language
> **language**: [`Language`](../type-aliases/Language.md)
The language of the code.
#### Defined in
[src/sdk/models.ts:1294](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1294)
***
### style
> **style**: `object`
Style editor code.
#### compiled
> **compiled**: `string`
The compiled code.
#### content
> **content**: `string`
The source code.
#### language
> **language**: [`Language`](../type-aliases/Language.md)
The language of the code.
#### Defined in
[src/sdk/models.ts:1285](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1285)
---
# Interface: Config
The playground configuration interface combining content, app, and user settings.
## 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
[src/sdk/models.ts:1124](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1124)
***
### 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
[src/sdk/models.ts:1037](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1037)
***
### 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
[src/sdk/models.ts:1017](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1017)
***
### 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
[src/sdk/models.ts:966](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L966)
***
### 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
[src/sdk/models.ts:972](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L972)
***
### 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
[src/sdk/models.ts:959](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L959)
***
### 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
[src/sdk/models.ts:930](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L930)
***
### 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
[src/sdk/models.ts:1171](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1171)
***
### customSettings
> **customSettings**: `object`
Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project.
#### adoc
> **adoc**: `any`
#### app.svelte
> **svelte**: `any`
#### app.vue
> **vue**: `any`
#### art
> **art**: `any`
#### art-template
> **art-template**: `any`
#### as
> **as**: `any`
#### asc
> **asc**: `any`
#### asciidoc
> **asciidoc**: `any`
#### assemblyscript
> **assemblyscript**: `any`
#### astro
> **astro**: `any`
#### autoprefixer
> **autoprefixer**: `any`
#### babel
> **babel**: `any`
#### bb
> **bb**: `any`
#### bbcode
> **bbcode**: `any`
#### Binary
> **Binary**: `any`
#### blockly
> **blockly**: `any`
#### blockly.xml
> **xml**: `any`
#### c
> **c**: `any`
#### C
> **C**: `any`
#### c++
> **c++**: `any`
#### civet
> **civet**: `any`
#### clang
> **clang**: `any`
#### clang.cpp
> **cpp**: `any`
#### clio
> **clio**: `any`
#### clj
> **clj**: `any`
#### cljc
> **cljc**: `any`
#### cljs
> **cljs**: `any`
#### clojure
> **clojure**: `any`
#### clojurescript
> **clojurescript**: `any`
#### coffee
> **coffee**: `any`
#### coffeescript
> **coffeescript**: `any`
#### common-lisp
> **common-lisp**: `any`
#### commonlisp
> **commonlisp**: `any`
#### convertCommonjs?
> `optional` **convertCommonjs**: `boolean`
#### cp
> **cp**: `any`
#### cpp
> **cpp**: `any`
#### cpp-wasm
> **cpp-wasm**: `any`
#### cppm
> **cppm**: `any`
#### cppwasm
> **cppwasm**: `any`
#### cs
> **cs**: `any`
#### cs-wasm
> **cs-wasm**: `any`
#### csharp
> **csharp**: `any`
#### csharp-wasm
> **csharp-wasm**: `any`
#### css
> **css**: `any`
#### cssmodules
> **cssmodules**: `any`
#### cssnano
> **cssnano**: `any`
#### cwasm
> **cwasm**: `any`
#### cxx
> **cxx**: `any`
#### defaultCDN?
> `optional` **defaultCDN**: [`CDN`](../internal/type-aliases/CDN.md)
#### diagram
> **diagram**: `any`
#### diagrams
> **diagrams**: `any`
#### dot
> **dot**: `any`
#### dzn
> **dzn**: `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`
#### go-wasm
> **go-wasm**: `any`
#### golang
> **golang**: `any`
#### gowasm
> **gowasm**: `any`
#### graph
> **graph**: `any`
#### h
> **h**: `any`
#### haml
> **haml**: `any`
#### handlebars
> **handlebars**: `any`
#### hbs
> **hbs**: `any`
#### hpp
> **hpp**: `any`
#### htm
> **htm**: `any`
#### html
> **html**: `any`
#### ii
> **ii**: `any`
#### imba
> **imba**: `any`
#### imports?
> `optional` **imports**: `Record`\<`string`, `string`\>
#### ixx
> **ixx**: `any`
#### jade
> **jade**: `any`
#### java
> **java**: `any`
#### javascript
> **javascript**: `any`
#### jinja
> **jinja**: `any`
#### jl
> **jl**: `any`
#### js
> **js**: `any`
#### json
> **json**: `any`
#### jsx
> **jsx**: `any`
#### julia
> **julia**: `any`
#### less
> **less**: `any`
#### lightningcss
> **lightningcss**: `any`
#### liquid
> **liquid**: `any`
#### liquidjs
> **liquidjs**: `any`
#### lisp
> **lisp**: `any`
#### livescript
> **livescript**: `any`
#### ls
> **ls**: `any`
#### lua
> **lua**: `any`
#### lua-wasm
> **lua-wasm**: `any`
#### luawasm
> **luawasm**: `any`
#### malina
> **malina**: `any`
#### malinajs
> **malinajs**: `any`
#### mapImports?
> `optional` **mapImports**: `boolean`
#### markdown
> **markdown**: `any`
#### md
> **md**: `any`
#### mdown
> **mdown**: `any`
#### mdx
> **mdx**: `any`
#### minizinc
> **minizinc**: `any`
#### mjml
> **mjml**: `any`
#### mjs
> **mjs**: `any`
#### mkdn
> **mkdn**: `any`
#### ml
> **ml**: `any`
#### mli
> **mli**: `any`
#### mts
> **mts**: `any`
#### mustache
> **mustache**: `any`
#### mzn
> **mzn**: `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`
#### ripple
> **ripple**: `any`
#### ripplejs
> **ripplejs**: `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"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"text/minizinc"` \| `"text/go-wasm"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"`
#### 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`
#### swift
> **swift**: `any`
#### tailwindcss
> **tailwindcss**: `any`
#### tcl
> **tcl**: `any`
#### teal
> **teal**: `any`
#### template?
> `optional` **template**: `object`
#### template.data?
> `optional` **data**: `any`
#### template.prerender?
> `optional` **prerender**: `boolean`
#### tl
> **tl**: `any`
#### tokencss
> **tokencss**: `any`
#### ts
> **ts**: `any`
#### tsx
> **tsx**: `any`
#### twig
> **twig**: `any`
#### types?
> `optional` **types**: [`Types`](../internal/interfaces/Types.md)
#### typescript
> **typescript**: `any`
#### unocss
> **unocss**: `any`
#### vento
> **vento**: `any`
#### vto
> **vto**: `any`
#### vue
> **vue**: `any`
#### vue-app
> **vue-app**: `any`
#### vue2
> **vue2**: `any`
#### vue3
> **vue3**: `any`
#### wasm
> **wasm**: `any`
#### wasm.cpp
> **cpp**: `any`
#### wasm.cs
> **cs**: `any`
#### wasm.go
> **go**: `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
[src/sdk/models.ts:1183](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1183)
***
### 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
[src/sdk/models.ts:980](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L980)
***
### 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
[src/sdk/models.ts:1094](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1094)
***
### editor
> **editor**: `undefined` \| `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"`
Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use.
If `undefined` (the default), Monaco editor is used on desktop,
CodeMirror is used on mobile and in `simple` mode,
while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds.
If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.
#### Default
```ts
undefined
```
#### Inherited from
[`UserConfig`](../internal/interfaces/UserConfig.md).[`editor`](../internal/interfaces/UserConfig.md#editor)
#### Defined in
[src/sdk/models.ts:851](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L851)
***
### 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
[src/sdk/models.ts:947](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L947)
***
### 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
[src/sdk/models.ts:877](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L877)
***
### 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
[src/sdk/models.ts:942](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L942)
***
### foldRegions
> **foldRegions**: `boolean`
When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded.
#### Default
```ts
false
```
#### Inherited from
[`UserConfig`](../internal/interfaces/UserConfig.md).[`foldRegions`](../internal/interfaces/UserConfig.md#foldregions)
#### Defined in
[src/sdk/models.ts:924](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L924)
***
### 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
[src/sdk/models.ts:882](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L882)
***
### 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
[src/sdk/models.ts:890](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L890)
***
### 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
[src/sdk/models.ts:986](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L986)
***
### 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
[src/sdk/models.ts:1100](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1100)
***
### 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
[src/sdk/models.ts:1109](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1109)
***
### 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
[src/sdk/models.ts:1209](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1209)
***
### languages
> **languages**: `undefined` \| (`"html"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"dot"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"stylus"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"mjs"` \| `"json"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"flow"` \| `"ts"` \| `"mts"` \| `"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"` \| `"ripple"` \| `"ripplejs"` \| `"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"` \| `"go-wasm"` \| `"wasm.go"` \| `"gowasm"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"teal"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"swift"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"reason"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"minizinc"` \| `"mzn"` \| `"dzn"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"` \| `"postcssImportUrl"` \| `"tailwindcss"` \| `"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
[src/sdk/models.ts:1131](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1131)
***
### layout
> **layout**: `undefined` \| `"responsive"` \| `"horizontal"` \| `"vertical"`
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
[src/sdk/models.ts:995](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L995)
***
### 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
[src/sdk/models.ts:912](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L912)
***
### markup
> **markup**: `object`
An object that configures the language and content of the markup editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
#### content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### language
> **language**: [`Language`](../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### position?
> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### Default
```ts
{ language: "html", content: "" }
```
#### Inherited from
[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`markup`](../internal/interfaces/ContentConfig.md#markup)
#### Defined in
[src/sdk/models.ts:1139](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1139)
***
### minimap
> **minimap**: `boolean`
Enables minimap in code editor.
#### Default
```ts
false
```
#### Inherited from
[`UserConfig`](../internal/interfaces/UserConfig.md).[`minimap`](../internal/interfaces/UserConfig.md#minimap)
#### Defined in
[src/sdk/models.ts:936](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L936)
***
### mode
> **mode**: `"editor"` \| `"result"` \| `"full"` \| `"focus"` \| `"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
[src/sdk/models.ts:1049](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1049)
***
### 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
[src/sdk/models.ts:1178](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1178)
***
### 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
[src/sdk/models.ts:1031](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1031)
***
### 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
[src/sdk/models.ts:1001](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1001)
***
### script
> **script**: `object`
An object that configures the language and content of the script editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
#### content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### language
> **language**: [`Language`](../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### position?
> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### Default
```ts
{ language: "javascript", content: "" }
```
#### Inherited from
[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`script`](../internal/interfaces/ContentConfig.md#script)
#### Defined in
[src/sdk/models.ts:1155](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1155)
***
### 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
[src/sdk/models.ts:1165](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1165)
***
### 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
[src/sdk/models.ts:822](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L822)
***
### 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
[src/sdk/models.ts:1007](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1007)
***
### 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
[src/sdk/models.ts:827](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L827)
***
### style
> **style**: `object`
An object that configures the language and content of the style editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
#### content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### language
> **language**: [`Language`](../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### position?
> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### Default
```ts
{ language: "css", content: "" }
```
#### Inherited from
[`ContentConfig`](../internal/interfaces/ContentConfig.md).[`style`](../internal/interfaces/ContentConfig.md#style)
#### Defined in
[src/sdk/models.ts:1147](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1147)
***
### 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
[src/sdk/models.ts:1160](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1160)
***
### 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
[src/sdk/models.ts:906](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L906)
***
### 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
[src/sdk/models.ts:1116](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1116)
***
### 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
[src/sdk/models.ts:1245](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1245)
***
### 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
[src/sdk/models.ts:857](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L857)
***
### 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
[src/sdk/models.ts:864](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L864)
***
### 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
[src/sdk/models.ts:1087](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1087)
***
### 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**: `""` \| [`ToolName`](../internal/type-aliases/ToolName.md)
##### enabled
> **enabled**: [`ToolName`](../internal/type-aliases/ToolName.md)[] \| `"all"`
##### 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
[src/sdk/models.ts:1065](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1065)
***
### 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
[src/sdk/models.ts:833](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L833)
***
### 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
[src/sdk/models.ts:1239](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1239)
***
### 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
[src/sdk/models.ts:898](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L898)
***
### 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
[src/sdk/models.ts:1252](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1252)
***
### view?
> `optional` **view**: `"split"` \| `"editor"` \| `"result"`
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
[src/sdk/models.ts:1043](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1043)
***
### 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
[src/sdk/models.ts:1012](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1012)
***
### 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
[src/sdk/models.ts:918](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L918)
***
### 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
[src/sdk/models.ts:1074](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1074)
---
# 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
[src/sdk/models.ts:1697](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1697)
***
### 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
[src/sdk/models.ts:1729](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1729)
***
### headless?
> `optional` **headless**: `boolean`
If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless).
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:1735](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1735)
***
### 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
[src/sdk/models.ts:1740](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1740)
***
### ~~lite?~~
> `optional` **lite**: `boolean`
If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite).
#### Deprecated
Use `{ config: { mode: "lite" } }` instead
#### Default
```ts
false
```
#### Defined in
[src/sdk/models.ts:1751](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1751)
***
### loading?
> `optional` **loading**: `"lazy"` \| `"click"` \| `"eager"`
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
[src/sdk/models.ts:1761](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1761)
***
### 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` \| [`EditorId`](../internal/type-aliases/EditorId.md) \| `1` \| `2`
#### activeEditor?
> `optional` **activeEditor**: `0` \| [`EditorId`](../internal/type-aliases/EditorId.md) \| `1` \| `2`
#### 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` \| `""` \| `"full"` \| `"closed"` \| `"open"` \| `"none"` \| `"true"`
#### 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` \| `""` \| `"full"` \| `"closed"` \| `"open"` \| `"none"` \| `"true"`
#### cp
> **cp**: `undefined` \| `string`
#### cp-selector
> **cp-selector**: `undefined` \| `string`
#### cpp
> **cpp**: `undefined` \| `string`
#### cpp-selector
> **cpp-selector**: `undefined` \| `string`
#### cpp-wasm
> **cpp-wasm**: `undefined` \| `string`
#### cpp-wasm-selector
> **cpp-wasm-selector**: `undefined` \| `string`
#### cppm
> **cppm**: `undefined` \| `string`
#### cppm-selector
> **cppm-selector**: `undefined` \| `string`
#### cppwasm
> **cppwasm**: `undefined` \| `string`
#### cppwasm-selector
> **cppwasm-selector**: `undefined` \| `string`
#### cs
> **cs**: `undefined` \| `string`
#### cs-selector
> **cs-selector**: `undefined` \| `string`
#### cs-wasm
> **cs-wasm**: `undefined` \| `string`
#### cs-wasm-selector
> **cs-wasm-selector**: `undefined` \| `string`
#### csharp
> **csharp**: `undefined` \| `string`
#### csharp-selector
> **csharp-selector**: `undefined` \| `string`
#### csharp-wasm
> **csharp-wasm**: `undefined` \| `string`
#### csharp-wasm-selector
> **csharp-wasm-selector**: `undefined` \| `string`
#### css
> **css**: `undefined` \| `string`
#### css-selector
> **css-selector**: `undefined` \| `string`
#### cssPreset?
> `optional` **cssPreset**: [`CssPresetId`](../internal/type-aliases/CssPresetId.md)
[CSS Preset](https://livecodes.io/docs/features/external-resources#css-presets) to use.
#### customSettings?
> `optional` **customSettings**: `object`
Defines [custom settings](https://livecodes.io/docs/advanced/custom-settings) for the current project.
#### customSettings.adoc
> **adoc**: `any`
#### customSettings.app.svelte
> **svelte**: `any`
#### customSettings.app.vue
> **vue**: `any`
#### customSettings.art
> **art**: `any`
#### customSettings.art-template
> **art-template**: `any`
#### customSettings.as
> **as**: `any`
#### customSettings.asc
> **asc**: `any`
#### customSettings.asciidoc
> **asciidoc**: `any`
#### customSettings.assemblyscript
> **assemblyscript**: `any`
#### customSettings.astro
> **astro**: `any`
#### customSettings.autoprefixer
> **autoprefixer**: `any`
#### customSettings.babel
> **babel**: `any`
#### customSettings.bb
> **bb**: `any`
#### customSettings.bbcode
> **bbcode**: `any`
#### customSettings.Binary
> **Binary**: `any`
#### customSettings.blockly
> **blockly**: `any`
#### customSettings.blockly.xml
> **xml**: `any`
#### customSettings.c
> **c**: `any`
#### customSettings.C
> **C**: `any`
#### customSettings.c++
> **c++**: `any`
#### customSettings.civet
> **civet**: `any`
#### customSettings.clang
> **clang**: `any`
#### customSettings.clang.cpp
> **cpp**: `any`
#### customSettings.clio
> **clio**: `any`
#### customSettings.clj
> **clj**: `any`
#### customSettings.cljc
> **cljc**: `any`
#### customSettings.cljs
> **cljs**: `any`
#### customSettings.clojure
> **clojure**: `any`
#### customSettings.clojurescript
> **clojurescript**: `any`
#### customSettings.coffee
> **coffee**: `any`
#### customSettings.coffeescript
> **coffeescript**: `any`
#### customSettings.common-lisp
> **common-lisp**: `any`
#### customSettings.commonlisp
> **commonlisp**: `any`
#### customSettings.convertCommonjs?
> `optional` **convertCommonjs**: `boolean`
#### customSettings.cp
> **cp**: `any`
#### customSettings.cpp
> **cpp**: `any`
#### customSettings.cpp-wasm
> **cpp-wasm**: `any`
#### customSettings.cppm
> **cppm**: `any`
#### customSettings.cppwasm
> **cppwasm**: `any`
#### customSettings.cs
> **cs**: `any`
#### customSettings.cs-wasm
> **cs-wasm**: `any`
#### customSettings.csharp
> **csharp**: `any`
#### customSettings.csharp-wasm
> **csharp-wasm**: `any`
#### customSettings.css
> **css**: `any`
#### customSettings.cssmodules
> **cssmodules**: `any`
#### customSettings.cssnano
> **cssnano**: `any`
#### customSettings.cwasm
> **cwasm**: `any`
#### customSettings.cxx
> **cxx**: `any`
#### customSettings.defaultCDN?
> `optional` **defaultCDN**: [`CDN`](../internal/type-aliases/CDN.md)
#### customSettings.diagram
> **diagram**: `any`
#### customSettings.diagrams
> **diagrams**: `any`
#### customSettings.dot
> **dot**: `any`
#### customSettings.dzn
> **dzn**: `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.go-wasm
> **go-wasm**: `any`
#### customSettings.golang
> **golang**: `any`
#### customSettings.gowasm
> **gowasm**: `any`
#### customSettings.graph
> **graph**: `any`
#### customSettings.h
> **h**: `any`
#### customSettings.haml
> **haml**: `any`
#### customSettings.handlebars
> **handlebars**: `any`
#### customSettings.hbs
> **hbs**: `any`
#### customSettings.hpp
> **hpp**: `any`
#### customSettings.htm
> **htm**: `any`
#### customSettings.html
> **html**: `any`
#### customSettings.ii
> **ii**: `any`
#### customSettings.imba
> **imba**: `any`
#### customSettings.imports?
> `optional` **imports**: `Record`\<`string`, `string`\>
#### customSettings.ixx
> **ixx**: `any`
#### customSettings.jade
> **jade**: `any`
#### customSettings.java
> **java**: `any`
#### customSettings.javascript
> **javascript**: `any`
#### customSettings.jinja
> **jinja**: `any`
#### customSettings.jl
> **jl**: `any`
#### customSettings.js
> **js**: `any`
#### customSettings.json
> **json**: `any`
#### customSettings.jsx
> **jsx**: `any`
#### customSettings.julia
> **julia**: `any`
#### customSettings.less
> **less**: `any`
#### customSettings.lightningcss
> **lightningcss**: `any`
#### customSettings.liquid
> **liquid**: `any`
#### customSettings.liquidjs
> **liquidjs**: `any`
#### customSettings.lisp
> **lisp**: `any`
#### customSettings.livescript
> **livescript**: `any`
#### customSettings.ls
> **ls**: `any`
#### customSettings.lua
> **lua**: `any`
#### customSettings.lua-wasm
> **lua-wasm**: `any`
#### customSettings.luawasm
> **luawasm**: `any`
#### customSettings.malina
> **malina**: `any`
#### customSettings.malinajs
> **malinajs**: `any`
#### customSettings.mapImports?
> `optional` **mapImports**: `boolean`
#### customSettings.markdown
> **markdown**: `any`
#### customSettings.md
> **md**: `any`
#### customSettings.mdown
> **mdown**: `any`
#### customSettings.html.md)
> **mdx**: `any`
#### customSettings.minizinc
> **minizinc**: `any`
#### customSettings.mjml
> **mjml**: `any`
#### customSettings.mjs
> **mjs**: `any`
#### customSettings.mkdn
> **mkdn**: `any`
#### customSettings.ml
> **ml**: `any`
#### customSettings.mli
> **mli**: `any`
#### customSettings.mts
> **mts**: `any`
#### customSettings.mustache
> **mustache**: `any`
#### customSettings.mzn
> **mzn**: `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.ripple
> **ripple**: `any`
#### customSettings.ripplejs
> **ripplejs**: `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"` \| `"application/javascript"` \| `"application/ecmascript"` \| `"text/javascript"` \| `"text/ecmascript"` \| `"text/liquid"` \| `"text/python"` \| `"text/r"` \| `"text/ruby-wasm"` \| `"text/x-uniter-php"` \| `"text/php-wasm"` \| `"text/cpp"` \| `"text/java"` \| `"text/csharp-wasm"` \| `"text/perl"` \| `"text/julia"` \| `"text/biwascheme"` \| `"text/commonlisp"` \| `"text/tcl"` \| `"text/prolog"` \| `"text/minizinc"` \| `"text/go-wasm"` \| `"application/json"` \| `"application/lua"` \| `"text/fennel"` \| `"application/wasm-uint8"`
#### 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.swift
> **swift**: `any`
#### customSettings.tailwindcss
> **tailwindcss**: `any`
#### customSettings.tcl
> **tcl**: `any`
#### customSettings.teal
> **teal**: `any`
#### customSettings.template?
> `optional` **template**: `object`
#### customSettings.template.data?
> `optional` **data**: `any`
#### customSettings.template.prerender?
> `optional` **prerender**: `boolean`
#### customSettings.tl
> **tl**: `any`
#### customSettings.tokencss
> **tokencss**: `any`
#### customSettings.ts
> **ts**: `any`
#### customSettings.tsx
> **tsx**: `any`
#### customSettings.twig
> **twig**: `any`
#### customSettings.types?
> `optional` **types**: [`Types`](../internal/interfaces/Types.md)
#### customSettings.typescript
> **typescript**: `any`
#### customSettings.unocss
> **unocss**: `any`
#### customSettings.vento
> **vento**: `any`
#### customSettings.vto
> **vto**: `any`
#### customSettings.vue
> **vue**: `any`
#### customSettings.vue-app
> **vue-app**: `any`
#### customSettings.vue2
> **vue2**: `any`
#### customSettings.vue3
> **vue3**: `any`
#### customSettings.wasm
> **wasm**: `any`
#### customSettings.wasm.cpp
> **cpp**: `any`
#### customSettings.wasm.cs
> **cs**: `any`
#### customSettings.wasm.go
> **go**: `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`
#### dzn
> **dzn**: `undefined` \| `string`
#### dzn-selector
> **dzn-selector**: `undefined` \| `string`
#### editor?
> `optional` **editor**: `"auto"` \| `"monaco"` \| `"codemirror"` \| `"codejar"`
Selects the [code editor](https://livecodes.io/docs/features/editor-settings#code-editor) to use.
If `undefined` (the default), Monaco editor is used on desktop,
CodeMirror is used on mobile and in `simple` mode,
while CodeJar is used in `codeblock` mode, in `lite` mode and in `readonly` playgrounds.
If set to `auto`, Monaco editor is used on desktop and CodeMirror is used on mobile regardless of other settings.
##### Default
```ts
undefined
```
#### editorMode?
> `optional` **editorMode**: `"vim"` \| `"emacs"`
Sets [editor mode](https://livecodes.io/docs/features/editor-settings#editor-modes).
#### editorTheme?
> `optional` **editorTheme**: `string` \| [`EditorTheme`](../internal/type-aliases/EditorTheme.md)[]
Sets the [code editor](https://livecodes.io/docs/features/editor-settings) themes.
See docs for [editor themes](https://livecodes.io/docs/configuration/configuration-object#editortheme) for details.
##### Examples
```ts
"vs"
```
```ts
"monaco:twilight, codemirror:one-dark"
```
```ts
["vs@light"]
```
```ts
["vs@light", "vs-dark@dark"]
```
```ts
["monaco:vs@light", "codemirror:github-light@light", "dracula@dark"]
```
#### edn
> **edn**: `undefined` \| `string`
#### edn-selector
> **edn-selector**: `undefined` \| `string`
#### ejs
> **ejs**: `undefined` \| `string`
#### ejs-selector
> **ejs-selector**: `undefined` \| `string`
#### embed?
> `optional` **embed**: `boolean`
#### emmet?
> `optional` **emmet**: `boolean`
Enables [Emmet](https://livecodes.io/docs/features/editor-settings#emmet).
##### Default
```ts
true
```
#### es
> **es**: `undefined` \| `string`
#### es-selector
> **es-selector**: `undefined` \| `string`
#### eta
> **eta**: `undefined` \| `string`
#### eta-selector
> **eta-selector**: `undefined` \| `string`
#### fennel
> **fennel**: `undefined` \| `string`
#### fennel-selector
> **fennel-selector**: `undefined` \| `string`
#### files?
> `optional` **files**: `string`
#### flow
> **flow**: `undefined` \| `string`
#### flow-selector
> **flow-selector**: `undefined` \| `string`
#### fnl
> **fnl**: `undefined` \| `string`
#### fnl-selector
> **fnl-selector**: `undefined` \| `string`
#### foldRegions?
> `optional` **foldRegions**: `boolean`
When set to `true`, regions marked by `#region` and `#endregion` comments are folded when the project is loaded.
##### Default
```ts
false
```
#### fontFamily?
> `optional` **fontFamily**: `string`
Sets the [code editor](https://livecodes.io/docs/features/editor-settings) font family.
#### fontSize?
> `optional` **fontSize**: `number`
Sets the font size.
If `undefined` (the default), the font size is set to 14 for the full app and 12 for [embeds](https://livecodes.io/docs/features/embeds).
##### Default
```ts
undefined
```
#### formatOnsave?
> `optional` **formatOnsave**: `boolean`
If `true`, the code is automatically [formatted](https://livecodes.io/docs/features/code-format) on saving the project.
##### Default
```ts
false
```
#### gleam
> **gleam**: `undefined` \| `string`
#### gleam-selector
> **gleam-selector**: `undefined` \| `string`
#### go
> **go**: `undefined` \| `string`
#### go-selector
> **go-selector**: `undefined` \| `string`
#### go-wasm
> **go-wasm**: `undefined` \| `string`
#### go-wasm-selector
> **go-wasm-selector**: `undefined` \| `string`
#### golang
> **golang**: `undefined` \| `string`
#### golang-selector
> **golang-selector**: `undefined` \| `string`
#### gowasm
> **gowasm**: `undefined` \| `string`
#### gowasm-selector
> **gowasm-selector**: `undefined` \| `string`
#### graph
> **graph**: `undefined` \| `string`
#### graph-selector
> **graph-selector**: `undefined` \| `string`
#### h
> **h**: `undefined` \| `string`
#### h-selector
> **h-selector**: `undefined` \| `string`
#### haml
> **haml**: `undefined` \| `string`
#### haml-selector
> **haml-selector**: `undefined` \| `string`
#### handlebars
> **handlebars**: `undefined` \| `string`
#### handlebars-selector
> **handlebars-selector**: `undefined` \| `string`
#### hbs
> **hbs**: `undefined` \| `string`
#### hbs-selector
> **hbs-selector**: `undefined` \| `string`
#### head?
> `optional` **head**: `string`
Content added to the [result page](https://livecodes.io/docs/features/result) `` element.
##### Default
```ts
'\n'
```
#### headless?
> `optional` **headless**: `boolean`
If `true`, the playground is loaded in [headless mode](https://livecodes.io/docs/sdk/headless).
##### Default
```ts
false
```
#### hpp
> **hpp**: `undefined` \| `string`
#### hpp-selector
> **hpp-selector**: `undefined` \| `string`
#### htm
> **htm**: `undefined` \| `string`
#### htm-selector
> **htm-selector**: `undefined` \| `string`
#### html
> **html**: `undefined` \| `string`
#### html-selector
> **html-selector**: `undefined` \| `string`
#### htmlAttrs?
> `optional` **htmlAttrs**: `string` \| `Record`\<`string`, `string`\>
Attributes added to the [result page](https://livecodes.io/docs/features/result) `` element.
It can be an object or a string.
##### Example
```ts
{ lang: "en", class: "dark" }
'lang="en" class="dark"'
```
#### ii
> **ii**: `undefined` \| `string`
#### ii-selector
> **ii-selector**: `undefined` \| `string`
#### imba
> **imba**: `undefined` \| `string`
#### imba-selector
> **imba-selector**: `undefined` \| `string`
#### import?
> `optional` **import**: `string`
A resource to [import](https://livecodes.io/docs/features/import) (from any of the supported [sources](https://livecodes.io/docs/features/import#sources)).
#### imports?
> `optional` **imports**: `object`
Allows specifying custom [import maps](https://github.com/WICG/import-maps) for [module imports](https://livecodes.io/docs/features/module-resolution#custom-module-resolution).
**Example**
Setting `imports` like this:
```js
"imports": {
"moment": "https://cdn.jsdelivr.net/npm/moment@2.29.4/dist/moment.js"
}
```
results in the following import map:
```html
```
See docs for [Imports](https://livecodes.io/docs/configuration/configuration-object#imports)
and [Custom Module Resolution](https://livecodes.io/docs/features/module-resolution/#custom-module-resolution)
##### Index Signature
\[`key`: `string`\]: `string`
#### ixx
> **ixx**: `undefined` \| `string`
#### ixx-selector
> **ixx-selector**: `undefined` \| `string`
#### jade
> **jade**: `undefined` \| `string`
#### jade-selector
> **jade-selector**: `undefined` \| `string`
#### java
> **java**: `undefined` \| `string`
#### java-selector
> **java-selector**: `undefined` \| `string`
#### javascript
> **javascript**: `undefined` \| `string`
#### javascript-selector
> **javascript-selector**: `undefined` \| `string`
#### jinja
> **jinja**: `undefined` \| `string`
#### jinja-selector
> **jinja-selector**: `undefined` \| `string`
#### jl
> **jl**: `undefined` \| `string`
#### jl-selector
> **jl-selector**: `undefined` \| `string`
#### js
> **js**: `undefined` \| `string`
#### js-selector
> **js-selector**: `undefined` \| `string`
#### json
> **json**: `undefined` \| `string`
#### json-selector
> **json-selector**: `undefined` \| `string`
#### jsx
> **jsx**: `undefined` \| `string`
#### jsx-selector
> **jsx-selector**: `undefined` \| `string`
#### julia
> **julia**: `undefined` \| `string`
#### julia-selector
> **julia-selector**: `undefined` \| `string`
#### lang?
> `optional` **lang**: [`Language`](../type-aliases/Language.md)
#### language?
> `optional` **language**: [`Language`](../type-aliases/Language.md)
#### languages?
> `optional` **languages**: `string`
#### layout?
> `optional` **layout**: `"responsive"` \| `"horizontal"` \| `"vertical"`
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`
If `true`, the playground is loaded in [lite mode](https://livecodes.io/docs/features/lite).
##### Deprecated
Use `{ config: { mode: "lite" } }` instead
##### Default
```ts
false
```
#### livescript
> **livescript**: `undefined` \| `string`
#### livescript-selector
> **livescript-selector**: `undefined` \| `string`
#### loading?
> `optional` **loading**: `"lazy"` \| `"click"` \| `"eager"`
Sets how the playground loads:
- `"eager"`: The playground loads immediately.
- `"lazy"`: A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport.
- `"click"`: The playground does not load automatically. Instead, a "Click-to-load" screen is shown.
##### Default
```ts
"lazy"
```
#### ls
> **ls**: `undefined` \| `string`
#### ls-selector
> **ls-selector**: `undefined` \| `string`
#### lua
> **lua**: `undefined` \| `string`
#### lua-selector
> **lua-selector**: `undefined` \| `string`
#### lua-wasm
> **lua-wasm**: `undefined` \| `string`
#### lua-wasm-selector
> **lua-wasm-selector**: `undefined` \| `string`
#### luawasm
> **luawasm**: `undefined` \| `string`
#### luawasm-selector
> **luawasm-selector**: `undefined` \| `string`
#### malina
> **malina**: `undefined` \| `string`
#### malina-selector
> **malina-selector**: `undefined` \| `string`
#### malinajs
> **malinajs**: `undefined` \| `string`
#### malinajs-selector
> **malinajs-selector**: `undefined` \| `string`
#### markdown
> **markdown**: `undefined` \| `string`
#### markdown-selector
> **markdown-selector**: `undefined` \| `string`
#### markup?
> `optional` **markup**: `object`
An object that configures the language and content of the markup editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
##### Default
```ts
{ language: "html", content: "" }
```
#### markup.content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### markup.contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### markup.foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### markup.hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### markup.hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### markup.hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### markup.language
> **language**: [`Language`](../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### markup.order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### markup.position?
> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### markup.selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### markup.title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### md
> **md**: `undefined` \| `string`
#### md-selector
> **md-selector**: `undefined` \| `string`
#### mdown
> **mdown**: `undefined` \| `string`
#### mdown-selector
> **mdown-selector**: `undefined` \| `string`
#### mdx
> **mdx**: `undefined` \| `string`
#### mdx-selector
> **mdx-selector**: `undefined` \| `string`
#### minimap?
> `optional` **minimap**: `boolean`
Enables minimap in code editor.
##### Default
```ts
false
```
#### minizinc
> **minizinc**: `undefined` \| `string`
#### minizinc-selector
> **minizinc-selector**: `undefined` \| `string`
#### mjml
> **mjml**: `undefined` \| `string`
#### mjml-selector
> **mjml-selector**: `undefined` \| `string`
#### mjs
> **mjs**: `undefined` \| `string`
#### mjs-selector
> **mjs-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**: `"editor"` \| `"result"` \| `"full"` \| `"focus"` \| `"lite"` \| `"simple"` \| `"codeblock"`
Sets the [display mode](https://livecodes.io/docs/features/display-modes).
##### Default
```ts
"full"
```
#### mts
> **mts**: `undefined` \| `string`
#### mts-selector
> **mts-selector**: `undefined` \| `string`
#### mustache
> **mustache**: `undefined` \| `string`
#### mustache-selector
> **mustache-selector**: `undefined` \| `string`
#### mzn
> **mzn**: `undefined` \| `string`
#### mzn-selector
> **mzn-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; ... 497 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`
#### ripple
> **ripple**: `undefined` \| `string`
#### ripple-selector
> **ripple-selector**: `undefined` \| `string`
#### ripplejs
> **ripplejs**: `undefined` \| `string`
#### ripplejs-selector
> **ripplejs-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**: [`ScreenName`](../internal/type-aliases/ScreenName.md)
#### script?
> `optional` **script**: `object`
An object that configures the language and content of the script editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
##### Default
```ts
{ language: "javascript", content: "" }
```
#### script.content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### script.contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### script.foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### script.hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### script.hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### script.hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### script.language
> **language**: [`Language`](../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### script.order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### script.position?
> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### script.selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### script.title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### scripts?
> `optional` **scripts**: `string`
#### scrollPosition?
> `optional` **scrollPosition**: `boolean`
#### scss
> **scss**: `undefined` \| `string`
#### scss-selector
> **scss-selector**: `undefined` \| `string`
#### sdkVersion?
> `optional` **sdkVersion**: `string`
#### semicolons?
> `optional` **semicolons**: `boolean`
Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use semi-colons.
##### Default
```ts
true
```
#### showSpacing?
> `optional` **showSpacing**: `boolean`
Enables [showing element spacing](https://livecodes.io/docs/features/result#show-spacings) in the result page.
##### Default
```ts
false
```
#### singleQuote?
> `optional` **singleQuote**: `boolean`
Configures Prettier [code formatter](https://livecodes.io/docs/features/code-format) to use single quotes instead of double quotes.
##### Default
```ts
false
```
#### solid
> **solid**: `undefined` \| `string`
#### solid-selector
> **solid-selector**: `undefined` \| `string`
#### solid.jsx
> **jsx**: `undefined` \| `string`
#### solid.jsx-selector
> **jsx-selector**: `undefined` \| `string`
#### solid.tsx
> **tsx**: `undefined` \| `string`
#### solid.tsx-selector
> **tsx-selector**: `undefined` \| `string`
#### sql
> **sql**: `undefined` \| `string`
#### sql-selector
> **sql-selector**: `undefined` \| `string`
#### sqlite
> **sqlite**: `undefined` \| `string`
#### sqlite-selector
> **sqlite-selector**: `undefined` \| `string`
#### sqlite3
> **sqlite3**: `undefined` \| `string`
#### sqlite3-selector
> **sqlite3-selector**: `undefined` \| `string`
#### stencil
> **stencil**: `undefined` \| `string`
#### stencil-selector
> **stencil-selector**: `undefined` \| `string`
#### stencil.tsx
> **tsx**: `undefined` \| `string`
#### stencil.tsx-selector
> **tsx-selector**: `undefined` \| `string`
#### styl
> **styl**: `undefined` \| `string`
#### styl-selector
> **styl-selector**: `undefined` \| `string`
#### style?
> `optional` **style**: `object`
An object that configures the language and content of the style editor.
See [docs](https://livecodes.io/docs/configuration/configuration-object/#markup) for details.
##### Default
```ts
{ language: "css", content: "" }
```
#### style.content?
> `optional` **content**: `string`
The initial content of the code editor.
##### Default
```ts
""
```
#### style.contentUrl?
> `optional` **contentUrl**: `string`
A URL to load `content` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `content` property had no value.
#### style.foldedLines?
> `optional` **foldedLines**: `object`[]
Lines that get folded when the editor loads.
This can be used for less relevant content.
##### Example
```ts
[{ from: 5, to: 8 }, { from: 15, to: 20 }]
```
#### style.hiddenContent?
> `optional` **hiddenContent**: `string`
Hidden content that gets evaluated without being visible in the code editor.
This can be useful in embedded playgrounds (e.g. for adding helper functions, utilities or tests)
#### style.hiddenContentUrl?
> `optional` **hiddenContentUrl**: `string`
A URL to load `hiddenContent` from. It has to be a valid URL that is CORS-enabled.
The URL is only fetched if `hiddenContent` property had no value.
#### style.hideTitle?
> `optional` **hideTitle**: `boolean`
If `true`, the title of the code editor is hidden, however its code is still evaluated.
This can be useful in embedded playgrounds (e.g. for hiding unnecessary code).
#### style.language
> **language**: [`Language`](../type-aliases/Language.md)
A language name, extension or alias (as defined in [language documentations](https://livecodes.io/docs/languages/)).
For the list of supported values, see [Language](https://livecodes.io/docs/api/type-aliases/Language)
#### style.order?
> `optional` **order**: `number`
The order of the editor in the UI.
##### Default
```ts
0
```
#### style.position?
> `optional` **position**: [`EditorPosition`](../internal/interfaces/EditorPosition.md)
The initial position of the cursor in the code editor.
##### Example
```ts
{lineNumber: 5, column: 10}
```
#### style.selector?
> `optional` **selector**: `string`
A CSS selector to load content from [DOM import](https://livecodes.io/docs/features/import#import-code-from-dom).
#### style.title?
> `optional` **title**: `string`
If set, this is used as the title of the editor in the UI,
overriding the default title set to the language name
(e.g. `"Python"` can be used instead of `"Py (Wasm)"`).
#### stylesheets?
> `optional` **stylesheets**: `string`
#### stylis
> **stylis**: `undefined` \| `string`
#### stylis-selector
> **stylis-selector**: `undefined` \| `string`
#### stylus
> **stylus**: `undefined` \| `string`
#### stylus-selector
> **stylus-selector**: `undefined` \| `string`
#### sucrase
> **sucrase**: `undefined` \| `string`
#### sucrase-selector
> **sucrase-selector**: `undefined` \| `string`
#### svelte
> **svelte**: `undefined` \| `string`
#### svelte-app
> **svelte-app**: `undefined` \| `string`
#### svelte-app-selector
> **svelte-app-selector**: `undefined` \| `string`
#### svelte-selector
> **svelte-selector**: `undefined` \| `string`
#### swift
> **swift**: `undefined` \| `string`
#### swift-selector
> **swift-selector**: `undefined` \| `string`
#### tabSize?
> `optional` **tabSize**: `number`
The number of spaces per indentation-level.
Also used in [code formatting](https://livecodes.io/docs/features/code-format).
##### Default
```ts
2
```
#### tags?
> `optional` **tags**: `string` \| `string`[]
#### tcl
> **tcl**: `undefined` \| `string`
#### tcl-selector
> **tcl-selector**: `undefined` \| `string`
#### teal
> **teal**: `undefined` \| `string`
#### teal-selector
> **teal-selector**: `undefined` \| `string`
#### template?
> `optional` **template**: [`TemplateName`](../internal/type-aliases/TemplateName.md)
A [starter template](https://livecodes.io/docs/features/templates) to load.
Allowed valued can be found [here](https://livecodes.io/docs/api/internal/type-aliases/TemplateName).
#### tests?
> `optional` **tests**: (\{ language?: Language \| undefined; content?: string \| undefined; contentUrl?: string \| undefined; hiddenContent?: string \| undefined; hiddenContentUrl?: string \| undefined; ... 5 more ...; position?: EditorPosition \| undefined; \} \| undefined) & ("" \| ... 4 more ... \| "true")
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**: `"full"` \| `"console"` \| `"compiled"` \| `"tests"` \| `"closed"` \| `"open"` \| `"none"` \| "console\|undefined" \| "console\|" \| "console\|full" \| "console\|closed" \| "console\|open" \| "console\|none" \| "compiled\|undefined" \| "compiled\|" \| "compiled\|full" \| "compiled\|closed" \| "compiled\|open" \| "compiled\|none" \| "tests\|undefined" \| "tests\|" \| "tests\|full" \| "tests\|closed" \| "tests\|open" \| "tests\|none" \| "console,console\|undefined" \| "console,console\|" \| "console,console\|full" \| "console,console\|closed" \| "console,console\|open" \| "console,console\|none" \| "console,compiled\|undefined" \| "console,compiled\|" \| "console,compiled\|full" \| "console,compiled\|closed" \| "console,compiled\|open" \| "console,compiled\|none" \| "console,tests\|undefined" \| "console,tests\|" \| "console,tests\|full" \| "console,tests\|closed" \| "console,tests\|open" \| "console,tests\|none" \| "compiled,console\|undefined" \| "compiled,console\|" \| "compiled,console\|full" \| "compiled,console\|closed" \| "compiled,console\|open" \| "compiled,console\|none" \| "compiled,compiled\|undefined" \| "compiled,compiled\|" \| "compiled,compiled\|full" \| "compiled,compiled\|closed" \| "compiled,compiled\|open" \| "compiled,compiled\|none" \| "compiled,tests\|undefined" \| "compiled,tests\|" \| "compiled,tests\|full" \| "compiled,tests\|closed" \| "compiled,tests\|open" \| "compiled,tests\|none" \| "tests,console\|undefined" \| "tests,console\|" \| "tests,console\|full" \| "tests,console\|closed" \| "tests,console\|open" \| "tests,console\|none" \| "tests,compiled\|undefined" \| "tests,compiled\|" \| "tests,compiled\|full" \| "tests,compiled\|closed" \| "tests,compiled\|open" \| "tests,compiled\|none" \| "tests,tests\|undefined" \| "tests,tests\|" \| "tests,tests\|full" \| "tests,tests\|closed" \| "tests,tests\|open" \| "tests,tests\|none" \| "console,console,console\|undefined" \| "console,console,console\|" \| "console,console,console\|full" \| "console,console,console\|closed" \| "console,console,console\|open" \| "console,console,console\|none" \| "console,console,compiled\|undefined" \| "console,console,compiled\|" \| "console,console,compiled\|full" \| "console,console,compiled\|closed" \| "console,console,compiled\|open" \| "console,console,compiled\|none" \| "console,console,tests\|undefined" \| "console,console,tests\|" \| "console,console,tests\|full" \| "console,console,tests\|closed" \| "console,console,tests\|open" \| "console,console,tests\|none" \| "console,compiled,console\|undefined" \| "console,compiled,console\|" \| "console,compiled,console\|full" \| "console,compiled,console\|closed" \| "console,compiled,console\|open" \| "console,compiled,console\|none" \| "console,compiled,compiled\|undefined" \| "console,compiled,compiled\|" \| "console,compiled,compiled\|full" \| "console,compiled,compiled\|closed" \| "console,compiled,compiled\|open" \| "console,compiled,compiled\|none" \| "console,compiled,tests\|undefined" \| "console,compiled,tests\|" \| "console,compiled,tests\|full" \| "console,compiled,tests\|closed" \| "console,compiled,tests\|open" \| "console,compiled,tests\|none" \| "console,tests,console\|undefined" \| "console,tests,console\|" \| "console,tests,console\|full" \| "console,tests,console\|closed" \| "console,tests,console\|open" \| "console,tests,console\|none" \| "console,tests,compiled\|undefined" \| "console,tests,compiled\|" \| "console,tests,compiled\|full" \| "console,tests,compiled\|closed" \| "console,tests,compiled\|open" \| "console,tests,compiled\|none" \| "console,tests,tests\|undefined" \| "console,tests,tests\|" \| "console,tests,tests\|full" \| "console,tests,tests\|closed" \| "console,tests,tests\|open" \| "console,tests,tests\|none" \| "compiled,console,console\|undefined" \| "compiled,console,console\|" \| "compiled,console,console\|full" \| "compiled,console,console\|closed" \| "compiled,console,console\|open" \| "compiled,console,console\|none" \| "compiled,console,compiled\|undefined" \| "compiled,console,compiled\|" \| "compiled,console,compiled\|full" \| "compiled,console,compiled\|closed" \| "compiled,console,compiled\|open" \| "compiled,console,compiled\|none" \| "compiled,console,tests\|undefined" \| "compiled,console,tests\|" \| "compiled,console,tests\|full" \| "compiled,console,tests\|closed" \| "compiled,console,tests\|open" \| "compiled,console,tests\|none" \| "compiled,compiled,console\|undefined" \| "compiled,compiled,console\|" \| "compiled,compiled,console\|full" \| "compiled,compiled,console\|closed" \| "compiled,compiled,console\|open" \| "compiled,compiled,console\|none" \| "compiled,compiled,compiled\|undefined" \| "compiled,compiled,compiled\|" \| "compiled,compiled,compiled\|full" \| "compiled,compiled,compiled\|closed" \| "compiled,compiled,compiled\|open" \| "compiled,compiled,compiled\|none" \| "compiled,compiled,tests\|undefined" \| "compiled,compiled,tests\|" \| "compiled,compiled,tests\|full" \| "compiled,compiled,tests\|closed" \| "compiled,compiled,tests\|open" \| "compiled,compiled,tests\|none" \| "compiled,tests,console\|undefined" \| "compiled,tests,console\|" \| "compiled,tests,console\|full" \| "compiled,tests,console\|closed" \| "compiled,tests,console\|open" \| "compiled,tests,console\|none" \| "compiled,tests,compiled\|undefined" \| "compiled,tests,compiled\|" \| "compiled,tests,compiled\|full" \| "compiled,tests,compiled\|closed" \| "compiled,tests,compiled\|open" \| "compiled,tests,compiled\|none" \| "compiled,tests,tests\|undefined" \| "compiled,tests,tests\|" \| "compiled,tests,tests\|full" \| "compiled,tests,tests\|closed" \| "compiled,tests,tests\|open" \| "compiled,tests,tests\|none" \| "tests,console,console\|undefined" \| "tests,console,console\|" \| "tests,console,console\|full" \| "tests,console,console\|closed" \| "tests,console,console\|open" \| "tests,console,console\|none" \| "tests,console,compiled\|undefined" \| "tests,console,compiled\|" \| "tests,console,compiled\|full" \| "tests,console,compiled\|closed" \| "tests,console,compiled\|open" \| "tests,console,compiled\|none" \| "tests,console,tests\|undefined" \| "tests,console,tests\|" \| "tests,console,tests\|full" \| "tests,console,tests\|closed" \| "tests,console,tests\|open" \| "tests,console,tests\|none" \| "tests,compiled,console\|undefined" \| "tests,compiled,console\|" \| "tests,compiled,console\|full" \| "tests,compiled,console\|closed" \| "tests,compiled,console\|open" \| "tests,compiled,console\|none" \| "tests,compiled,compiled\|undefined" \| "tests,compiled,compiled\|" \| "tests,compiled,compiled\|full" \| "tests,compiled,compiled\|closed" \| "tests,compiled,compiled\|open" \| "tests,compiled,compiled\|none" \| "tests,compiled,tests\|undefined" \| "tests,compiled,tests\|" \| "tests,compiled,tests\|full" \| "tests,compiled,tests\|closed" \| "tests,compiled,tests\|open" \| "tests,compiled,tests\|none" \| "tests,tests,console\|undefined" \| "tests,tests,console\|" \| "tests,tests,console\|full" \| "tests,tests,console\|closed" \| "tests,tests,console\|open" \| "tests,tests,console\|none" \| "tests,tests,compiled\|undefined" \| "tests,tests,compiled\|" \| "tests,tests,compiled\|full" \| "tests,tests,compiled\|closed" \| "tests,tests,compiled\|open" \| "tests,tests,compiled\|none" \| "tests,tests,tests\|undefined" \| "tests,tests,tests\|" \| "tests,tests,tests\|full" \| "tests,tests,tests\|closed" \| "tests,tests,tests\|open" \| "tests,tests,tests\|none"
#### 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"` \| `"editor"` \| `"result"`
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).
##### Deprecated
The `view` option has been moved to `config.view`. For headless mode use `headless: true`.
##### Default
```ts
"split"
```
#### vto
> **vto**: `undefined` \| `string`
#### vto-selector
> **vto-selector**: `undefined` \| `string`
#### vue
> **vue**: `undefined` \| `string`
#### vue-app
> **vue-app**: `undefined` \| `string`
#### vue-app-selector
> **vue-app-selector**: `undefined` \| `string`
#### vue-selector
> **vue-selector**: `undefined` \| `string`
#### vue2
> **vue2**: `undefined` \| `string`
#### vue2-selector
> **vue2-selector**: `undefined` \| `string`
#### vue3
> **vue3**: `undefined` \| `string`
#### vue3-selector
> **vue3-selector**: `undefined` \| `string`
#### wasm
> **wasm**: `undefined` \| `string`
#### wasm-selector
> **wasm-selector**: `undefined` \| `string`
#### wasm.cpp
> **cpp**: `undefined` \| `string`
#### wasm.cpp-selector
> **cpp-selector**: `undefined` \| `string`
#### wasm.cs
> **cs**: `undefined` \| `string`
#### wasm.cs-selector
> **cs-selector**: `undefined` \| `string`
#### wasm.go
> **go**: `undefined` \| `string`
#### wasm.go-selector
> **go-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
[src/sdk/models.ts:1721](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1721)
***
### 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
[src/sdk/models.ts:1767](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1767)
***
### ~~view?~~
> `optional` **view**: `"split"` \| `"editor"` \| `"result"` \| `"headless"`
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).
#### Deprecated
The `view` option has been moved to `config.view`. For headless mode use `headless: true`.
#### Default
```ts
"split"
```
#### Defined in
[src/sdk/models.ts:1780](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1780)
---
# 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
[src/sdk/models.ts:1605](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1605)
***
### 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
[src/sdk/models.ts:1588](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1588)
***
### 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
[src/sdk/models.ts:1421](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1421)
***
### 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
[src/sdk/models.ts:1499](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1499)
***
### 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
[src/sdk/models.ts:1454](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1454)
***
### 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
[src/sdk/models.ts:1438](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1438)
***
### 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
[src/sdk/models.ts:1624](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1624)
***
### ~~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
[src/sdk/models.ts:1536](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1536)
***
### 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
[src/sdk/models.ts:1404](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1404)
***
### 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
[src/sdk/models.ts:1529](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1529)
***
### setConfig()
> **setConfig**: (`config`) => `Promise`\<[`Config`](Config.md)\>
Loads a new project using the passed configuration object.
If the config is a string, it is assumed to be a URL to a JSON file that contains the configuration object.
#### Parameters
• **config**: `string` \| `Partial`\<[`Config`](Config.md)\>
#### Returns
`Promise`\<[`Config`](Config.md)\>
#### Throws
It throws an error if the config object (or URL) is invalid.
#### 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
[src/sdk/models.ts:1478](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1478)
***
### show()
> **show**: (`panel`, `options`?) => `Promise`\<`void`\>
Shows the selected panel.
See [docs](https://livecodes.io/docs/sdk/js-ts#show) for details.
#### Parameters
• **panel**: `"editor"` \| `"result"` \| [`EditorId`](../internal/type-aliases/EditorId.md) \| [`ToolName`](../internal/type-aliases/ToolName.md) \| `"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
[src/sdk/models.ts:1513](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1513)
***
### 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
[src/sdk/models.ts:1581](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L1581)
---
# Type Alias: Language
> **Language**: `"html"` \| `"htm"` \| `"markdown"` \| `"md"` \| `"mdown"` \| `"mkdn"` \| `"mdx"` \| `"astro"` \| `"pug"` \| `"jade"` \| `"haml"` \| `"asciidoc"` \| `"adoc"` \| `"asc"` \| `"mustache"` \| `"handlebars"` \| `"hbs"` \| `"ejs"` \| `"eta"` \| `"nunjucks"` \| `"njk"` \| `"liquid"` \| `"liquidjs"` \| `"dot"` \| `"twig"` \| `"vento"` \| `"vto"` \| `"art-template"` \| `"art"` \| `"jinja"` \| `"bbcode"` \| `"bb"` \| `"mjml"` \| `"diagrams"` \| `"diagram"` \| `"graph"` \| `"plt"` \| `"richtext"` \| `"rte"` \| `"rich"` \| `"rte.html"` \| `"css"` \| `"scss"` \| `"sass"` \| `"less"` \| `"stylus"` \| `"styl"` \| `"stylis"` \| `"postcss"` \| `"javascript"` \| `"js"` \| `"mjs"` \| `"json"` \| `"babel"` \| `"es"` \| `"sucrase"` \| `"typescript"` \| `"flow"` \| `"ts"` \| `"mts"` \| `"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"` \| `"ripple"` \| `"ripplejs"` \| `"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"` \| `"go-wasm"` \| `"wasm.go"` \| `"gowasm"` \| `"php"` \| `"php-wasm"` \| `"phpwasm"` \| `"wasm.php"` \| `"cpp"` \| `"c"` \| `"C"` \| `"cp"` \| `"cxx"` \| `"c++"` \| `"cppm"` \| `"ixx"` \| `"ii"` \| `"hpp"` \| `"h"` \| `"cpp-wasm"` \| `"cppwasm"` \| `"cwasm"` \| `"wasm.cpp"` \| `"clang"` \| `"clang.cpp"` \| `"java"` \| `"csharp"` \| `"csharp-wasm"` \| `"cs"` \| `"cs-wasm"` \| `"wasm.cs"` \| `"perl"` \| `"pl"` \| `"pm"` \| `"lua"` \| `"lua-wasm"` \| `"luawasm"` \| `"wasm.lua"` \| `"teal"` \| `"tl"` \| `"fennel"` \| `"fnl"` \| `"julia"` \| `"jl"` \| `"scheme"` \| `"scm"` \| `"commonlisp"` \| `"common-lisp"` \| `"lisp"` \| `"clojurescript"` \| `"clojure"` \| `"cljs"` \| `"clj"` \| `"cljc"` \| `"edn"` \| `"gleam"` \| `"swift"` \| `"rescript"` \| `"res"` \| `"resi"` \| `"reason"` \| `"re"` \| `"rei"` \| `"ocaml"` \| `"ml"` \| `"mli"` \| `"tcl"` \| `"wat"` \| `"wast"` \| `"webassembly"` \| `"wasm"` \| `"Binary"` \| `"sql"` \| `"sqlite"` \| `"sqlite3"` \| `"pg.sql"` \| `"pgsql.sql"` \| `"pgsql"` \| `"pg"` \| `"pglite"` \| `"pglite.sql"` \| `"postgresql"` \| `"postgres"` \| `"postgre.sql"` \| `"postgresql.sql"` \| `"prolog.pl"` \| `"prolog"` \| `"minizinc"` \| `"mzn"` \| `"dzn"` \| `"blockly"` \| `"blockly.xml"` \| `"xml"` \| `"pintora"`
Language name, alias or extension.
## Defined in
[src/sdk/models.ts:32](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/models.ts#L32)
---
# Function: compress()
> **compress**(`uncompressed`): `string`
A utility function that allows compressing the stringified config object (e.g. for sharing in URL hash)
It encodes it in base64 with a few tweaks to make it URI safe.
This is the `compressToEncodedURIComponent` function re-exported from `lz-string` for convenience.
## Parameters
• **uncompressed**: `string`
A string which should be compressed.
## Returns
`string`
The compressed string
## Param
The string to be compressed (e.g. stringified config object)
## Example
```ts
const compressed = compress(JSON.stringify(config));
```
## Defined in
[src/sdk/index.ts:522](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/index.ts#L522)
---
# 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
[src/sdk/index.ts:36](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/index.ts#L36)
## createPlayground(options)
> **createPlayground**(`options`): `Promise`\<[`Playground`](../interfaces/Playground.md)\>
### Parameters
• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) & `object`
### Returns
`Promise`\<[`Playground`](../interfaces/Playground.md)\>
### Defined in
[src/sdk/index.ts:40](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/index.ts#L40)
---
# Function: decompress()
> **decompress**(`compressed`): `null` \| `string`
A utility function that allows decompressing the config object (compressed by [compress](compress.md)).
It decodes it to a string that should be JSON.parsed.
This is the `decompressFromEncodedURIComponent` function re-exported from `lz-string` for convenience.
## Parameters
• **compressed**: `string`
A string obtained from a call to compressToEncodedURIComponent().
## Returns
`null` \| `string`
The decompressed string or `null` if it fails
## Param
The string to be decompressed
## Example
```ts
const decompressed = decompress(str);
if (decompressed) {
try {
const config = JSON.parse(decompressed);
} catch {
// invalid JSON
}
}
```
## Defined in
[src/sdk/index.ts:545](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/index.ts#L545)
---
# Function: getPlaygroundUrl()
> **getPlaygroundUrl**(`options`): `string`
Gets the URL to a LiveCodes playground (as a string) from the provided [options](https://livecodes.io/docs/sdk/js-ts#embed-options).
This can be useful for providing links to run code in playgrounds.
## Parameters
• **options**: [`EmbedOptions`](../interfaces/EmbedOptions.md) = `{}`
The [options](https://livecodes.io/docs/sdk/js-ts#embed-options) for the playground.
## Returns
`string`
The URL of the playground (as a string).
large objects like config and params are store in the url hash params while the rest are in the search params
unless config is a string in which case it is stored in searchParams
## Defined in
[src/sdk/index.ts:411](https://github.com/live-codes/livecodes/blob/efaf9d57a674b98cb3db89d7d7a9c83938276cb8/src/sdk/index.ts#L411)
- `meta`: Keeps the code block as it is, and adds the URL of the playground to the `data-livecodes-url` attribute of the `
- `auto`: When set to `true`, it automatically enables the `livecodes` parameter for all code blocks without having to explicitly add it.
This is useful when you have a large number of code blocks and don't want to add the `livecodes` parameter to each code block.
To disable this for a specific code block, add the `livecodes=false` [meta parameter](#meta-parameters) to the code block.
## Meta Parameters
Individual code blocks can be configured using meta parameters. These are key/value pairs, separated by spaces, that are added after the language name.
Meta parameters of code blocks override the [options](#options) passed to the plugin.
Example:
````markdown {1}
```jsx livecodes render=button className=dark-btn console=open
import { useState, useEffect } from "react";
export default () => {
const [count, setCount] = useState(0);
useEffect(() => {
console.log("count:", count);
}, [count]);
return (
