URL Query Parameters

Configure LiveCodes playgrounds using URL query parameters

URL query parameters provide a convenient way to configure LiveCodes playgrounds directly through the URL. This is especially useful for sharing configured playgrounds, creating quick demos, or embedding pre-configured code.

Basic Usage

Query parameters can be added to the LiveCodes URL after a ? character:

https://livecodes.io/?js=console.log('Hello')

Multiple parameters are separated by &:

https://livecodes.io/?html=<h1>Hello</h1>&css=h1{color:blue}

Parameter Types

URL query parameters in LiveCodes can be grouped into several categories:

Language Content Parameters

Set editor content by using the language name, alias, or extension as the parameter key:

?html=<h1>Hello</h1>
?js=console.log('hello')
?css=body{margin:0}
?ts=const x: number = 42
?jsx=<App />
?markdown=# Hello

Use URL encoding for special characters. Most browsers and tools handle this automatically.

Language Selection

Select the active language without providing content:

lang · Language

Set the active editor language.

?lang=typescript

language · Language

Alias for lang.

?language=python

languages · string

Comma-separated list of enabled languages.

?languages=html,css,javascript,typescript

Active Editor

activeEditor · "markup" | "style" | "script"

Set which editor is active.

?activeEditor=script

active · "markup" | "style" | "script" | 0 | 1 | 2

Alias for activeEditor. Can use editor name or index (0=markup, 1=style, 2=script).

?active=2
?active=script

Configuration Properties

Most Config properties can be set via query parameters:

title · string

Project title.

?title=My Project

description · string

Project description.

?description=A demo project

tags · string

Comma-separated project tags.

?tags=javascript,tutorial,beginner

mode · "full" | "focus" | "lite" | "simple" | "editor" | "codeblock" | "result"

Display mode.

?mode=lite

view · "split" | "editor" | "result"

Default view.

?view=result

readonly · boolean

Enable read-only mode.

?readonly=true

theme · "light" | "dark"

App theme.

?theme=light

autoupdate · boolean

Enable auto-update.

?autoupdate=false

delay · number

Auto-update delay in milliseconds.

?delay=1000

External Resources

stylesheets · string

Comma-separated list of external stylesheet URLs.

?stylesheets=https://cdn.jsdelivr.net/npm/bootstrap@5/dist/css/bootstrap.min.css

scripts · string

Comma-separated list of external script URLs.

?scripts=https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js

cssPreset · "normalize.css" | "reset-css"

CSS preset to apply.

?cssPreset=normalize.css

Processors

processors · string

Comma-separated list of CSS processors.

?processors=tailwindcss,autoprefixer

Tools Configuration

tools · "open" | "full" | "closed" | "none" | ToolsStatus

Configure tools pane status and enabled tools.

?tools=none
?tools=open
?tools=console,compiled|open

Format: enabled-tools|status

console · "open" | "full" | "closed" | "none" | "true" | ""

Configure console tool.

?console=open
?console=true
?console

compiled · "open" | "full" | "closed" | "none" | "true" | ""

Configure compiled code viewer tool.

?compiled=open

tests · "open" | "full" | "closed" | "none" | "true" | ""

Configure tests tool.

?tests=open

Special Parameters

lite · boolean

Enable lite mode (same as mode=lite).

?lite

x · string

Import from external source.

?x=id/github-username/repo-name
?x=https://gist.github.com/username/gist-id

template · TemplateName

Load a starter template.

?template=react
?template=typescript

config · string

URL to a JSON configuration file.

?config=https://example.com/config.json

Nested Property Parameters

You can set nested properties using dot notation:

?markup.hideTitle=true
?script.title=App.jsx
?customSettings.template.prerender=false
?tools.status=open

Advanced Examples

Simple HTML/CSS/JS Demo

https://livecodes.io/
  ?html=<h1>Hello World</h1>
  &css=h1{color:navy;font-family:system-ui}
  &js=console.log('loaded')

TypeScript with React

https://livecodes.io/
  ?template=react
  &lang=tsx
  &console=open

Read-only Code Block

https://livecodes.io/
  ?mode=codeblock
  &readonly=true
  &js=console.log('Hello')

Python with Console

https://livecodes.io/
  ?python=print('Hello from Python')
  &console=open

Tailwind CSS Enabled

https://livecodes.io/
  ?html=<h1 class="text-4xl font-bold">Hello</h1>
  &processors=tailwindcss

Multiple Languages Enabled

https://livecodes.io/
  ?languages=html,markdown,css,scss,javascript,typescript
  &activeEditor=script

Custom Settings via JSON

https://livecodes.io/
  ?customSettings={"template":{"prerender":false}}

Import from GitHub Gist

https://livecodes.io/
  ?x=https://gist.github.com/username/abc123

URL Encoding

Special characters in parameter values must be URL-encoded:

Character	Encoded
Space	%20
<	%3C
>	%3E
"	%22
#	%23
&	%26
=	%3D

Most programming languages and tools provide built-in functions for URL encoding (e.g., encodeURIComponent() in JavaScript).

Parameter Compression

For complex configurations, use the compressed params parameter:

params · string

Compressed and encoded JSON configuration object.

This is automatically generated by the SDK’s getShareUrl() method.

Example:

https://livecodes.io/?params=eyJtYXJrdXAiOnsibGFuZ3VhZ2UiOiJodG...

Hash Parameters

Parameters can also be provided in the URL hash (after #). Hash parameters take precedence over query parameters:

https://livecodes.io/?js=old#js=new

The value new will be used.

Boolean Values

Boolean parameters can be specified in multiple ways:

?readonly=true      // explicit true
?readonly           // empty value = true
?readonly=false     // explicit false

SDK Integration

In the SDK, use the params option in embed options:

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container', {
  params: {
    js: 'console.log("Hello")',
    console: 'open',
    mode: 'lite',
  },
});

This is equivalent to:

const playground = await createPlayground('#container', {
  config: {
    script: {
      language: 'javascript',
      content: 'console.log("Hello")',
    },
    mode: 'lite',
    tools: {
      enabled: ['console'],
      active: 'console',
      status: 'open',
    },
  },
});

Using params is often more concise for simple configurations, while config provides more control for complex setups.

Precedence Rules

When multiple configuration sources exist:

1. Default configuration
2. User configuration (from SDK or stored preferences)
3. Query string parameters
4. Hash parameters (override query parameters)

Limitations

• URL length is limited by browsers (typically 2000-8000 characters)
• For large configurations, use the config parameter with a URL to a JSON file
• Or use the compressed params parameter
• Or use the SDK’s config option instead of params

Generating Share URLs

Use the SDK’s getShareUrl() method to generate properly formatted URLs:

const url = await playground.getShareUrl();
// Returns full URL with compressed params

const shortUrl = await playground.getShareUrl(true);
// Returns shortened URL

Related Documentation

Configuration Object

Complete Config object reference

SDK Methods

Learn about getShareUrl() and other SDK methods

Share Feature

Sharing playgrounds with others

Import Feature

Importing code from external sources