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
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
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
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
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
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
}