Query Parameters

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.

Example:

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

show code

JS
TS
React
Vue
Svelte

import { createPlayground } from 'livecodes';

const options = {
  "params": {
    "js": "console.log('Hello World!')",
    "console": "open"
  }
};
createPlayground('#container', options);

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

const options: EmbedOptions = {
  "params": {
    "js": "console.log('Hello World!')",
    "console": "open"
  }
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "params": {
    "js": "console.log('Hello World!')",
    "console": "open"
  }
};
  return (<LiveCodes {...options}></LiveCodes>);
}

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

const options = {
  "params": {
    "js": "console.log('Hello World!')",
    "console": "open"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

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

let options = $state({
  "params": {
    "js": "console.log('Hello World!')",
    "console": "open"
  }
});
let container = $state(null);
onMount(() => {
  createPlayground(container, options);
});
</script>

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

Usage

All properties of configuration object and 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, import, lite, loading, template, view, title, description, activeEditor, cssPreset, readonly, allowLangChange, mode, autoupdate, autosave, delay, formatOnsave, theme, themeColor, appLanguage, recoverUnsaved, welcome, showSpacing, layout, editor, editorTheme, fontFamily, fontSize, useTabs, tabSize, lineNumbers, wordWrap, closeBrackets, emmet, editorMode, semicolons, singleQuote, 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, languages, processors, stylesheets, scripts.

Example:
```
?languages=html,md,css,ts
```
Values set in the URL query parameters override those set in configuration object.
Unlike user settings 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.
- x: string.
  
  Alias to import (a URL to import).
- files: string.
  
  A comma-separated list of files to import.
- raw: Language.
  
  When used with import or x, imports the URL as code of the provided language.
- language: Language.
  
  The language to load by default in the editor.
- lang: Language.
  
  Alias to language.
- active: "markup" | "style" | "script" | 0 | 1 | 2.
  
  Alias to activeEditor.
- tools: "open" | "full" | "closed" | "console" | "compiled" | "tests" | "none"
  
  The tools pane status.
- console: "open" | "full" | "closed" | "none"
  
  The console status.
- compiled: "open" | "full" | "closed" | "none"
  
  The compiled code viewer status.
- tests: "open" | "full" | "closed" | "none"
  
  The tests panel status.
- scrollPosition: boolean (Default: true).
  
  If false, the result page scroll position will not be maintained after reload.
- Any Language can used as a query parameter, and the value will be used as its code.
  
  Example:
```
https://livecodes.io?js=console.log('Hello World!')
```

Examples

For usage examples, check storybook and unit tests.

Usage​

Usage