### Install LiveCodes SDK

Source: https://livecodes.io/docs/getting-started.html

The command to install the LiveCodes SDK package via npm for use in bundler-based projects.

```bash
npm install livecodes
```

--------------------------------

### Prefill Playground with Custom Content

Source: https://livecodes.io/docs/getting-started.html

Demonstrates how to configure the playground with specific markup, style, and script content using the SDK.

```javascript
import { createPlayground } from 'livecodes';

const config = {
  markup: {
    language: 'markdown',
    content: '# Hello LiveCodes!',
  },
  style: {
    language: 'css',
    content: 'body { color: blue; }',
  },
  script: {
    language: 'javascript',
    content: 'console.log("hello from JavaScript!");',
  },
  activeEditor: 'script',
};

createPlayground('#container', { config, params: { console: 'open' } });
```

--------------------------------

### Install Docker, Docker Compose, and Git on Ubuntu

Source: https://livecodes.io/docs/advanced/docker.html

A bash script to automate the installation of Docker, Docker Compose, and Git on Ubuntu systems. It updates package lists, installs Docker engine, adds the current user to the docker group, installs Docker Compose, and finally installs Git. After running, it's recommended to verify the installations.

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

```

--------------------------------

### Manage and Verify Installation

Source: https://livecodes.io/docs/llms-full.txt

Utility commands to make the installation script executable, execute it, and verify the versions of the installed tools.

```bash
chmod +x install_docker_ubuntu.sh
sudo ./install_docker_ubuntu.sh
docker --version
docker compose version
git --version
```

--------------------------------

### LiveCodes Playground Configuration Example

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates the configuration object for embedding a LiveCodes playground, specifying markup, script content, and tool status. This example showcases basic setup for an editable embedded playground.

```javascript
createPlayground('#container', {
  config: {
    markup: { language: 'markdown', content: '# Hello World!' },
    script: { language: 'javascript', content: 'console.log("Hello, from JS!");' },
    tools: { active: 'console', status: 'open' },
  }
});
```

--------------------------------

### Install and Use markdown-it-livecodes Plugin

Source: https://livecodes.io/docs/llms-full.txt

This snippet demonstrates the installation and basic usage of the markdown-it-livecodes plugin. It involves installing 'markdown-it' and 'markdown-it-livecodes', then using the plugin to render a JavaScript code block as an iframe.

```bash
npm install markdown-it markdown-it-livecodes
```

```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); // <iframe ...></iframe>
```

--------------------------------

### Example .env File for LiveCodes Configuration

Source: https://livecodes.io/docs/advanced/docker.html

This snippet shows an example of a .env file used to configure environment variables for a LiveCodes deployment. These variables allow customization of the application's hostname and other settings. Ensure this file is placed in the root of the repository.

```dotenv
HOST_NAME=playground.website.com
```

--------------------------------

### Install remark-livecodes for react-markdown

Source: https://livecodes.io/docs/llms-full.txt

Installs the remark-livecodes plugin for use with the react-markdown component. This allows for live code examples to be rendered within markdown content in a React application.

```bash
npm install remark-livecodes

```

```bash
yarn add remark-livecodes

```

--------------------------------

### Automated Testing Setup with Jest (JavaScript)

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates setting up automated tests within LiveCodes using the Jest testing framework. The tests run in the context of the result web page. This example shows a basic Jest template.

```javascript
/*
  Example test structure for Jest in LiveCodes:

describe('Math operations', () => {
  test('adds 1 + 2 to equal 3', () => {
    expect(1 + 2).toBe(3);
  });
});
*/
```

--------------------------------

### Install Docker and Git on Ubuntu

Source: https://livecodes.io/docs/llms-full.txt

A shell script to automate the installation of Docker, Docker Compose, and Git on an Ubuntu system. It includes adding the current user to the docker group to allow non-root execution.

```bash
#!/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
```

--------------------------------

### Initialize Playground via SDK

Source: https://livecodes.io/docs/getting-started.html

Methods to initialize a LiveCodes playground within a container element using different module systems.

```javascript
import { createPlayground } from 'livecodes';

createPlayground('#container', {
  template: 'react',
  // other embed options
});
```

```html
<div id="container"></div>
<script type="module">
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@latest';

  createPlayground('#container', {
    template: 'react',
    // other embed options
  });
</script>
```

```html
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/livecodes@latest/livecodes.umd.js"></script>
<script>
  livecodes.createPlayground('#container', {
    template: 'react',
    // other embed options
  });
</script>
```

--------------------------------

### Install and Use remark-livecodes Plugin

Source: https://livecodes.io/docs/llms-full.txt

Installs the remark-livecodes plugin using npm and shows how to integrate it with the remark processor to convert markdown with live code blocks into iframes.

```bash
npm install remark remark-livecodes
```

```javascript
import { remark } from "remark";
import remarkLivecodes from "remark-livecodes";

const input = "```js livecodes 
console.log('Hello World!');
```";

const output = await remark()
  .use(remarkLivecodes, {
    /* options */
  })
  .process(input);

console.log(String(output)); // <iframe ...></iframe>
```

--------------------------------

### Example LiveCodes URL with Query Parameters

Source: https://livecodes.io/docs/llms-full.txt

This example shows how to use URL query parameters to configure LiveCodes. The `js` parameter sets the JavaScript code to execute, and the `console` parameter opens the console output.

```url
https://livecodes.io?js=console.log('Hello World!')&console=open
```

--------------------------------

### Installing Packages with Micropip

Source: https://livecodes.io/docs/llms-full.txt

Shows how to use the micropip module to install packages that have different import names or are not pre-installed. This is necessary for managing dependencies like setuptools.

```python
import micropip
await micropip.install("setuptools")

import pkg_resources
print(pkg_resources.get_distribution("setuptools").version)
```

--------------------------------

### Install LiveCodes SDK using npm

Source: https://livecodes.io/docs/llms-full.txt

This command installs the LiveCodes SDK package from npm, making it available for use in your project. It's a prerequisite for embedding LiveCodes playgrounds using the SDK with a bundler.

```bash
npm install livecodes
```

--------------------------------

### Install LiveCodes Markdown Plugins

Source: https://livecodes.io/docs/llms-full.txt

Commands to install the necessary packages for integrating LiveCodes with marked or remark processors.

```bash
npm install marked marked-livecodes
```

```bash
npm install remark remark-livecodes
```

--------------------------------

### Configuration Object Example (TypeScript)

Source: https://livecodes.io/docs/llms-full.txt

An example of how to define a configuration object in TypeScript for LiveCodes. This object can include various settings for different languages and build processes.

```typescript
const config = {
  "cssPreset": "none",
  "customSettings": {
    "css": {
      "prefixer": "autoprefixer"
    },
    "js": {
      "minify": true
    }
  }
};
```

--------------------------------

### Install markdown-it and markdown-it-livecodes

Source: https://livecodes.io/docs/llms-full.txt

Installs the necessary packages, `markdown-it` and `markdown-it-livecodes`, using npm or yarn. These packages are required to process markdown and enable LiveCodes integration.

```bash
npm install markdown-it markdown-it-livecodes
```

--------------------------------

### Initialize LiveCodes Playground with SDK

Source: https://livecodes.io/docs/features/display-modes

Demonstrates how to initialize a basic LiveCodes playground instance across different frameworks. These snippets show the standard configuration object required to load a template.

```JavaScript
import { createPlayground } from 'livecodes';
const options = { "template": "react" };
createPlayground('#container', options);
```

```TypeScript
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = { "template": "react" };
createPlayground('#container', options);
```

```React
import LiveCodes from 'livecodes/react';
export default function App() {
  const options = { "template": "react" };
  return (<LiveCodes {...options}></LiveCodes>);
}
```

```Vue
<script setup>
import LiveCodes from "livecodes/vue";
const options = { "template": "react" };
</script>
<template>
  <LiveCodes v-bind="options" />
</template>
```

```Svelte
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({ "template": "react" });
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
```

--------------------------------

### Start LiveCodes Docker Services

Source: https://livecodes.io/docs/advanced/docker.html

This command starts the Docker services defined in the docker-compose.yml file in detached mode. Ensure you are in the 'livecodes' directory and Docker is installed.

```sh
docker compose up -d
```

--------------------------------

### Embed LiveCodes Playground in Svelte

Source: https://livecodes.io/docs/getting-started

Provides an example of embedding a LiveCodes playground within a Svelte application. It uses the `createPlayground` function within `onMount` to initialize the playground in a container element.

```javascript
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';

let options = $state({
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
});

let container = $state(null);

onMount(() => {
  createPlayground(container, options);
});
</script>

<div bind:this="{container}"></div>
```

--------------------------------

### Create Playground with Configuration vs. Params

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates two ways to initialize a LiveCodes playground: using a detailed configuration object or using URL query parameters. Both methods achieve similar results in setting up the initial content.

```javascript
import { createPlayground } from 'livecodes';

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

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

--------------------------------

### Run Docker Compose for LiveCodes

Source: https://livecodes.io/docs/advanced/docker.html

This command builds and starts the LiveCodes Docker containers in detached mode. It requires Docker and Docker Compose to be installed. The HOST_NAME environment variable should be set to your domain name.

```sh
HOST_NAME=vps.livecodes.io docker compose up --build -d
```

--------------------------------

### Initialize Playground with Custom Modules

Source: https://livecodes.io/docs/features/intellisense

Demonstrates initializing a LiveCodes playground with both runtime implementation via 'imports' and editor intellisense via 'types'.

```javascript
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 });
```

--------------------------------

### Install markdown-it-livecodes for VitePress

Source: https://livecodes.io/docs/llms-full.txt

Installs the markdown-it-livecodes plugin for VitePress. This plugin allows for live code rendering within VitePress sites, enhancing documentation with interactive examples.

```bash
npm install -D markdown-it-livecodes

```

```bash
yarn add -D markdown-it-livecodes

```

--------------------------------

### Initialize Playground with Params (JavaScript)

Source: https://livecodes.io/docs/llms-full.txt

This example demonstrates how to initialize the LiveCodes playground with specific parameters for HTML, CSS, JavaScript, and console settings. The `createPlayground` function takes a selector and an options object containing these parameters.

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

const params = {
  html: "<h1>Hello World!</h1>",
  css: "h1 {color: blue;}",
  js: 'console.log("Hello, LiveCodes!")',
  console: "open",
};

createPlayground('#container', { params });

```

--------------------------------

### Embed LiveCodes Playground in SolidJS

Source: https://livecodes.io/docs/getting-started

Demonstrates embedding a LiveCodes playground in a SolidJS application. It uses a `ref` attribute on a div to get a reference to the container element and then calls `createPlayground`.

```javascript
import { createPlayground, type EmbedOptions } from 'livecodes';

export default function App() {
  const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};

  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };

  return <div ref={onMounted}></div>;
}
```

--------------------------------

### Hello World in Go

Source: https://livecodes.io/docs/llms-full.txt

A basic Go program demonstrating the standard library fmt package to print text to the console. This snippet is compatible with both go-wasm and standard go environments in LiveCodes.

```go
package main

import "fmt"

func main() {
	fmt.Println("Hello, World!")
}
```

--------------------------------

### Configure Livecodes Playground with Config Object or Params (JavaScript)

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates how to initialize a Livecodes playground using either a configuration object or URL query parameters for markdown content. This allows for flexible setup of the playground's initial state.

```javascript
import { createPlayground } from 'livecodes';

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

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

--------------------------------

### LiveCodes Initialization in SolidJS with Query Parameters

Source: https://livecodes.io/docs/configuration/query-params

Demonstrates initializing a LiveCodes playground in a SolidJS application using the `createPlayground` function. It configures the playground with JavaScript code and console settings, using a ref for the container element.

```jsx
import { createPlayground, type EmbedOptions } from 'livecodes';
export default function App() {
  const options: EmbedOptions = {
  "params": {
    "js": "console.log('Hello World!')",
    "console": "open"
  }
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };
  return <div ref={onMounted}></div>;
}
```

--------------------------------

### Clone LiveCodes Repository

Source: https://livecodes.io/docs/advanced/docker.html

This command clones the LiveCodes repository from GitHub. It requires Git to be installed. After cloning, you can navigate into the created directory and manage the project.

```sh
git clone https://github.com/live-codes/livecodes.git
```

--------------------------------

### Embed LiveCodes Playground in Vue

Source: https://livecodes.io/docs/sdk/solid

This example demonstrates embedding a LiveCodes playground within a Vue.js application using the `livecodes/vue` component. It utilizes `<script setup>` for a concise setup and passes the playground options to the `LiveCodes` component using `v-bind`, facilitating easy integration into Vue projects.

```vue
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
  "params": {
    "solid.tsx": "import { onCleanup } from 'solid-js';\nimport { createPlayground, type Playground, type EmbedOptions } from 'livecodes';\n\nexport default function App() {\n  let playground: Playground | null = null;\n\n  const options: EmbedOptions = {\n    params: {\n      html: '<h1>Hello World!</h1>',\n      css: 'h1 {color: blue;}',\n      js: 'console.log(\"Hello, Solid!\")',\n      console: 'open',\n    },\n  };\n\n  const onMounted = (container: HTMLElement) => {\n    createPlayground(container, options).then((sdk) => {\n      playground = sdk; // now the SDK is available\n    });\n  };\n  onCleanup(() => playground?.destroy());\n\n  return <div ref={onMounted}></div>;\n}\n"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>
```

--------------------------------

### Embed LiveCodes Playground with Custom Display Modes

Source: https://livecodes.io/docs/features/display-modes

Demonstrates how to initialize a LiveCodes playground with specific display modes and tool configurations. The examples show how to pass configuration options to the SDK to control the initial view and visibility of the console.

```JavaScript
import { createPlayground } from 'livecodes';
const options = {
  "params": {
    "mode": "result",
    "tools": "console|full",
    "js": "console.log(\"Hello World!\")"
  }
};
createPlayground('#container', options);
```

```TypeScript
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
  "params": {
    "mode": "result",
    "tools": "console|full",
    "js": "console.log(\"Hello World!\")"
  }
};
createPlayground('#container', options);
```

```React
import LiveCodes from 'livecodes/react';
export default function App() {
  const options = {
    "params": {
      "mode": "result",
      "tools": "console|full",
      "js": "console.log(\"Hello World!\")"
    }
  };
  return (<LiveCodes {...options}></LiveCodes>);
}
```

```Vue
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
  "params": {
    "mode": "result",
    "tools": "console|full",
    "js": "console.log(\"Hello World!\")"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>
```

```Svelte
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
  "params": {
    "mode": "result",
    "tools": "console|full",
    "js": "console.log(\"Hello World!\")"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
```

--------------------------------

### Set up Custom JSX Runtimes

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates using alternative libraries like Preact as a JSX runtime by specifying the JSX factory via pragmas.

```javascript
export const preactDemo = {
  jsx: `/** @jsx h */\nimport { h, render } from 'preact';\n\nconst App = (props) => <h1>Hello, {props.name}</h1>;\n\nrender(<App name="Preact" />, document.body);\n`,
};
```

--------------------------------

### Embed LiveCodes Playground in Vue

Source: https://livecodes.io/docs/getting-started

Demonstrates embedding a LiveCodes playground in a Vue.js application using the `livecodes/vue` component. Configuration options are passed using `v-bind` to the `LiveCodes` component.

```html
<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
}
</script>

<template>
  <LiveCodes v-bind="options" />
</template>
```

--------------------------------

### Playground Configuration with Params and Config

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates how to configure the LiveCodes playground using either the 'params' object or the 'config' object. Both methods allow for setting up the playground's initial state, including markup content.

```APIDOC
## Playground Configuration with Params and Config

### Description
Demonstrates how to configure the LiveCodes playground using either the 'params' object or the 'config' object. Both methods allow for setting up the playground's initial state, including markup content.

### Method
POST

### Endpoint
/api/create

### Parameters

#### Request Body

- **params** (object) - Optional - An object representing URL query parameters for playground configuration. Example: `{ md: '# Hello World!' }`.
- **config** (object) - Optional - An object for detailed playground configuration. Example: `{ markup: { language: 'markdown', content: '# Hello World!' } }`.

### Request Example

```json
{
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello World!"
    }
  }
}
```

```json
{
  "params": {
    "md": "# Hello World!"
  }
}
```

### Response

#### Success Response (200)

- **playgroundUrl** (string) - The URL of the created playground.

#### Response Example

```json
{
  "playgroundUrl": "https://livecodes.io/playground?md=%23%20Hello%20World!"
}
```
```

--------------------------------

### Embed LiveCodes Playground in React

Source: https://livecodes.io/docs/getting-started

Shows how to embed a LiveCodes playground within a React application using the `livecodes/react` component. It passes configuration options as props to the `LiveCodes` component.

```javascript
import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};

  return (<LiveCodes {...options}></LiveCodes>);
}
```

--------------------------------

### Embed LiveCodes Playground with TypeScript SDK

Source: https://livecodes.io/docs/getting-started

Illustrates embedding a LiveCodes playground using the TypeScript SDK, including type definitions for `EmbedOptions`. This provides enhanced type safety during development.

```typescript
import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};

createPlayground('#container', options);
```

--------------------------------

### Example URL for LiveCodes Configuration

Source: https://livecodes.io/docs/configuration/query-params.html

Demonstrates how to use URL query parameters to set JavaScript code and open the console in LiveCodes. This allows for dynamic configuration of the application's initial state.

```url
https://livecodes.io?js=console.log('Hello World!')&console=open
```

--------------------------------

### Embed LiveCodes Playground with JavaScript SDK (Options Object)

Source: https://livecodes.io/docs/getting-started

Shows an alternative way to embed a LiveCodes playground using a single options object passed to the `createPlayground` function. This method is useful for cleaner initialization.

```javascript
import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "markup": {
      "language": "markdown",
      "content": "# Hello LiveCodes!"
    },
    "style": {
      "language": "css",
      "content": "body { color: blue; }"
    },
    "script": {
      "language": "javascript",
      "content": "console.log(\"hello from JavaScript!\");"
    },
    "activeEditor": "script"
  },
  "params": {
    "console": "open"
  }
};

createPlayground('#container', options);
```

--------------------------------

### Load Starter Template using SDK

Source: https://livecodes.io/docs/features/code-prefill

Demonstrates how to load a specific starter template into a LiveCodes playground using the SDK. This method is useful for initializing the playground with predefined code structures. It supports JavaScript, TypeScript, React, Vue, Svelte, and Solid.

```js
import { createPlayground } from 'livecodes';
const options = {
  "template": "react"
};
createPlayground('#container', options);
```

```ts
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
  "template": "react"
};
createPlayground('#container', options);
```

```react
import LiveCodes from 'livecodes/react';
export default function App() {
  const options = {
  "template": "react"
};
  return (<LiveCodes {...options}></LiveCodes>);} 
```

```vue
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
  "template": "react"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>
```

```svelte
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
  "template": "react"
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
```

```solid
import { createPlayground, type EmbedOptions } from 'livecodes';
export default function App() {
  const options: EmbedOptions = {
  "template": "react"
};
  const onMounted = (container: HTMLElement) => {
    createPlayground(container, options);
  };
  return <div ref={onMounted}></div>;
}
```

--------------------------------

### Embed LiveCodes Playground in HTML

Source: https://livecodes.io/docs

Shows how to embed a LiveCodes playground into a web page using a script tag and the CDN-hosted SDK. This example includes pre-populated content for markdown, CSS, and JavaScript, and opens the console automatically.

```html
<div id="container"></div>
<script type="module">
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@latest';
createPlayground('#container', { 
  params: {
    markdown: '# Hello LiveCodes!',
    css: 'h1 {color: dodgerblue;}',
    js: 'console.log("Hello, from JS!");',
    console: 'open',
  },
});
</script>
```

--------------------------------

### Initialize LiveCodes with parameters in Vue

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates initializing the LiveCodes component with specific configuration parameters such as HTML, CSS, and JS content, and setting the console visibility.

```vue
<script setup>
  import LiveCodes from 'livecodes/vue';
  
  const params = {
    html: '<h1>Hello World!</h1>',
    css: 'h1 {color: blue;}',
    js: 'console.log("Hello, Svelte!")',
    console: 'open',
  };
</script>

<template>
  <LiveCodes :params="params" />
</template>
```

--------------------------------

### Initialize LiveCodes Playground with React Template (CDN UMD)

Source: https://livecodes.io/docs/getting-started

Initializes a LiveCodes playground using the UMD format loaded from a CDN. The playground is attached to a div with the ID 'container', using the 'react' template. The UMD version exposes a global 'livecodes' object for creating the playground.

```html
<div id="container"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/livecodes.umd.js"></script>
<script>
  // the UMD version provides the global object `livecodes`
  livecodes.createPlayground('#container', {
    template: 'react',
    // other embed options
 });
</script>
```

--------------------------------

### Configure LiveCodes SDK for Self-Hosted Instances

Source: https://livecodes.io/docs/features/self-hosting

Demonstrates how to initialize the LiveCodes playground using the SDK while pointing to a custom self-hosted app URL via the appUrl embed option.

```javascript
import { createPlayground } from 'livecodes';

const options = {
  appUrl: 'https://playground.my-website.com',
  template: 'react',
  // other embed options
};

createPlayground('#container', options);
```

--------------------------------

### Initialize LiveCodes Playground with React Template (CDN ESM)

Source: https://livecodes.io/docs/getting-started

Initializes a LiveCodes playground using the ESM format loaded directly from a CDN. This method embeds a playground into a div with the ID 'container' and sets the template to 'react'. It's useful for quick integration without a build process.

```html
<div id="container"></div>
<script type="module">
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/[email protected]';
  createPlayground('#container', {
    template: 'react',
    // other embed options
  });
</script>
```

--------------------------------

### Initialize LiveCodes Playground with React Template (ESM)

Source: https://livecodes.io/docs/getting-started

Initializes a LiveCodes playground within a specified container element using the ESM module format. It requires the 'livecodes' package to be imported and configures the playground with a React template. This method is suitable for projects using bundlers like Webpack or Vite.

```javascript
import { createPlayground } from 'livecodes';
createPlayground('#container', {
  template: 'react',
  // other embed options
});
```

--------------------------------

### Initialize LiveCodes Playground with Options (JavaScript)

Source: https://livecodes.io/docs/features/display-modes

Initializes the LiveCodes playground in a specified container using provided options. This example uses plain JavaScript and assumes the 'livecodes' library is imported. It configures the editor mode, layout, active editor, and includes script and style content.

```javascript
import { createPlayground } from 'livecodes';
const options = {
  "config": {
    "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    <>
      {count} <button onClick={inc}>+1</button>
    </>
  );
};

const App = () => (
  <div className=\"App\">
    <h1>Hello Jotai</h1>
    <h2>Enjoy coding!</h2>
    <Counter />
  </div>
);

export default App;
"
    },
    "style": {
      "language": "css",
      "content": ".App {\n font-family: sans-serif;\n text-align: center;
}
"
    }
  }
};
createPlayground('#container', options);
```

```typescript
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
  "config": {
    "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    <>
      {count} <button onClick={inc}>+1</button>
    </>
  );
};

const App = () => (
  <div className=\"App\">
    <h1>Hello Jotai</h1>
    <h2>Enjoy coding!</h2>
    <Counter />
  </div>
);

export default App;
"
    },
    "style": {
      "language": "css",
      "content": ".App {\n font-family: sans-serif;\n text-align: center;
}
"
    }
  }
};
createPlayground('#container', options);
```

--------------------------------

### Playground Get Share URL API

Source: https://livecodes.io/docs/llms-full.txt

Gets a shareable URL for the current playground project.

```APIDOC
## GET /playground/share-url

### Description
Gets a shareable URL for the current playground project. By default, the URL includes a long query string representing the compressed encoded config object. If `shortUrl` is set to `true`, a short URL is generated.

### Method
GET

### Endpoint
/playground/share-url

### Parameters
#### Query Parameters
- **shortUrl** (boolean) - Optional - If `true`, generates a short URL.

#### Request Body
None

### Request Example
```js
import { createPlayground } from 'livecodes';

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

### Response
#### Success Response (200)
- **url** (string) - The generated shareable URL.

#### Response Example
```json
{
  "url": "https://livecodes.io/?..."
}
```
```

--------------------------------

### Initialize Playground with Parameters

Source: https://livecodes.io/docs/sdk/js-ts.html

Demonstrates initializing a LiveCodes playground instance with specific code content and configuration parameters.

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

const params = {
  html: "<h1>Hello World!</h1>",
  css: "h1 {color: blue;}",
  js: 'console.log("Hello, LiveCodes!")',
  console: "open",
};

createPlayground('#container', { params });
```

--------------------------------

### LiveCodes Configuration via Query Parameters

Source: https://livecodes.io/docs/llms-full.txt

Demonstrates how to use URL query parameters to configure the LiveCodes application, including code execution and console behavior.

```APIDOC
## LiveCodes Configuration via Query Parameters

### Description
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 and embed options.

### Method
URL Query Parameters

### Endpoint
`https://livecodes.io`

### Parameters
#### Query Parameters
- **js** (string) - Optional - JavaScript code to execute.
- **console** ("open" | "closed" | "hidden") - Optional - Controls the visibility and state of the console.
- *Other parameters correspond to configuration object fields (e.g., `tabSize`, `lineNumbers`, etc.)*

### Request Example
```
https://livecodes.io?js=console.log('Hello World!')&console=open
```

### Response
#### Success Response (200)
The LiveCodes application loads with the specified configuration.

#### Response Example
```html
<!-- The LiveCodes embed will render based on the query parameters -->
<iframe src="https://livecodes.io?js=console.log('Hello World!')&console=open"></iframe>
```
```