Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/live-codes/livecodes/llms.txt

Use this file to discover all available pages before exploring further.

The EmbedOptions interface defines the configuration options that can be passed to createPlayground() when embedding a LiveCodes playground.

​
Properties

​
appUrl

​
appUrl
string
default:"https://livecodes.io"
Allows loading the playground from a custom URL (e.g. a self-hosted app or a permanent URL).If supplied with an invalid URL, an error is thrown.
import { createPlayground } from "livecodes";

createPlayground("#container", {
  appUrl: "https://v1.livecodes.io",
});

​
params

​
params
UrlQueryParams
An object that represents the URL Query parameters, that can be used to configure the playground.These two snippets produce similar output:
import { createPlayground } from "livecodes";

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

// Use params
createPlayground("#container", { 
  params: { md: "# Hello World!" } 
});

​
config

​
config
Partial<Config> | string
A configuration object or a URL to a JSON file representing a configuration object to load.If supplied and is not an object or a valid URL, an error is thrown.See Config Interface for details.
import { createPlayground } from "livecodes";

// Using a configuration object
createPlayground("#container", {
  config: {
    title: "My Project",
    markup: {
      language: "html",
      content: "<h1>Hello World!</h1>",
    },
    style: {
      language: "css",
      content: "h1 { color: blue; }",
    },
  },
});

// Using a URL to a JSON config file
createPlayground("#container", {
  config: "https://example.com/my-config.json",
});

​
headless

​
headless
boolean
default:false
If true, the playground is loaded in headless mode.See Getting Started for usage examples.
import { createPlayground } from "livecodes";

const playground = await createPlayground("#container", {
  headless: true,
});

// Use SDK methods to interact with headless playground
const code = await playground.getCode();

​
import

​
import
string
A resource to import (from any of the supported sources).See Import documentation for supported sources.
import { createPlayground } from "livecodes";

// Import from GitHub gist
createPlayground("#container", {
  import: "https://gist.github.com/username/gist-id",
});

// Import from GitHub repo
createPlayground("#container", {
  import: "https://github.com/username/repo",
});

// Import from CodePen
createPlayground("#container", {
  import: "https://codepen.io/username/pen/pen-id",
});

​
lite

​
lite
boolean
default:false
deprecated
Deprecated: Use { config: { mode: "lite" } } instead.If true, the playground is loaded in lite mode.

​
loading

​
loading
'lazy' | 'click' | 'eager'
default:"lazy"
Sets how the playground loads:
  • "eager": The playground loads immediately.
  • "lazy": A playground embedded low down in the page will not load until the user scrolls so that it approaches the viewport.
  • "click": The playground does not load automatically. Instead, a “Click-to-load” screen is shown.
import { createPlayground } from "livecodes";

// Lazy load (default)
createPlayground("#container", {
  loading: "lazy",
});

// Click to load
const playground = await createPlayground("#container", {
  loading: "click",
});
// User must click to load, or call playground.load()
await playground.load();

​
template

​
template
TemplateName
A starter template to load.See Templates documentation for available templates.
Available templates include:
  • "blank", "javascript", "typescript", "react", "vue", "svelte", "angular"
  • "python", "python-wasm", "ruby", "go", "php", "cpp"
  • "markdown", "astro", "mdx"
  • And many more…
import { createPlayground } from "livecodes";

// Load React template
createPlayground("#container", {
  template: "react",
});

// Load TypeScript template
createPlayground("#container", {
  template: "typescript",
});

​
view

​
view
'split' | 'editor' | 'result' | 'headless'
default:"split"
deprecated
Deprecated: The view option has been moved to config.view. For headless mode use headless: true.The default view for the playground.When set to "headless", the playground is loaded in headless mode.

​
Usage Examples

​
Basic Embed

import { createPlayground } from "livecodes";

createPlayground("#container", {
  config: {
    markup: {
      language: "html",
      content: "<h1>Hello!</h1>",
    },
  },
});

​
Self-Hosted with Custom Config

import { createPlayground } from "livecodes";

createPlayground("#container", {
  appUrl: "https://my-domain.com/livecodes",
  config: {
    mode: "lite",
    tools: {
      enabled: ["console"],
      active: "console",
      status: "open",
    },
  },
});

​
Import from GitHub with Click-to-Load

import { createPlayground } from "livecodes";

createPlayground("#container", {
  import: "https://github.com/username/repo",
  loading: "click",
});

​
Multiple Configurations

import { createPlayground } from "livecodes";

createPlayground("#container", {
  template: "react",
  config: {
    readonly: true,
    mode: "focus",
    tools: {
      enabled: ["console", "compiled"],
      active: "console",
    },
  },
  loading: "lazy",
});

​
Type Definition

interface EmbedOptions {
  appUrl?: string;
  params?: UrlQueryParams;
  config?: Partial<Config> | string;
  headless?: boolean;
  import?: string;
  lite?: boolean; // deprecated
  loading?: 'lazy' | 'click' | 'eager';
  template?: TemplateName;
  view?: 'split' | 'editor' | 'result' | 'headless'; // deprecated
}

Build docs developers (and LLMs) love

Get started for freeTalk to us