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

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

const options = {
  "params": {
    "js": "console.log('Hello World!')",
    "console": "open"
  }
};
let container;
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, recoverUnsaved, showSpacing, editor, 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.