livecode-static/docs/configuration/query-params.html.md

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

Example:

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

<LiveCodes params={{ js: "console.log('Hello World!')", console: 'open' }}>

Usage

• All properties of configuration object and embed options#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#config), import#import), lite#mode), loading#loading), template#template), view#view), title#title), description#description), activeEditor#activeeditor), cssPreset#csspreset), readonly#readonly), allowLangChange#allowlangchange), mode#mode), autoupdate#autoupdate), autosave#autosave), delay#delay), formatOnsave#formatonsave), theme#theme), themeColor#themecolor), appLanguage#applanguage), recoverUnsaved#recoverunsaved), welcome#welcome), showSpacing#showspacing), layout#layout), editor#editor), editorTheme#editortheme), fontFamily#fontfamily), fontSize#fontsize), useTabs#usetabs), tabSize#tabsize), lineNumbers#linenumbers), wordWrap#wordwrap), closeBrackets#closebrackets), emmet#emmet), editorMode#editormode), semicolons#semicolons), singleQuote#singlequote), trailingComma#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#tags), languages#languages), processors#processors), stylesheets#stylesheets), scripts#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#import) (a URL to import).

  • files: string.

    A comma-separated list of files to import#file-selection).

  • 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#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#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!')
    

:::info Examples For usage examples, check storybook and unit tests. :::