Skip to main content
Gets a configuration object representing the current playground state. This object can be used to restore state if passed as an EmbedOptions property when creating playgrounds, or can be manipulated and loaded in run-time using the setConfig() method.

​
Signature

playground.getConfig(contentOnly?: boolean): Promise<Config>

​
Parameters

​
contentOnly
boolean
default:"false"
If true, returns only the content-related configuration (code, languages, title, description, etc.) without user preferences like theme, editor settings, or formatter options.

​
Returns

​
config
Config
A promise that resolves to a Config object representing the playground state.The Config object includes:
  • markup, style, script - Editor configurations with language and content
  • title and description - Project metadata
  • tags - Project tags for categorization
  • activeEditor - Currently active editor
  • languages - List of enabled languages
  • stylesheets and scripts - External resources
  • processors - Enabled CSS processors
  • customSettings - Language-specific custom settings
  • imports - Custom import maps
  • types - Custom TypeScript types
  • User preferences (theme, editor settings, etc.) unless contentOnly is true

​
Usage

​
Get Full Configuration

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container", {
  config: {
    markup: {
      language: "html",
      content: "<h1>Hello World!</h1>",
    },
    style: {
      language: "css",
      content: "h1 { color: blue; }",
    },
  },
});

const config = await playground.getConfig();
console.log(config.markup.language); // "html"
console.log(config.markup.content);  // "<h1>Hello World!</h1>"
console.log(config.theme);           // "dark" (or user's preference)

​
Get Content-Only Configuration

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container");

// Get only project content, excluding user preferences
const contentConfig = await playground.getConfig(true);

// This config contains only:
// - Code (markup, style, script)
// - Languages
// - Project metadata (title, description, tags)
// - External resources
// - Custom settings
// But NOT user preferences like theme, editor settings, etc.

​
Save and Restore Playground State

import { createPlayground } from "livecodes";

// Create first playground
const playground1 = await createPlayground("#container1");

// ... user makes changes ...

// Save the state
const config = await playground1.getConfig();
localStorage.setItem('savedProject', JSON.stringify(config));

// Later, restore in a new playground
const savedConfig = JSON.parse(localStorage.getItem('savedProject'));
const playground2 = await createPlayground("#container2", {
  config: savedConfig,
});

​
Clone Configuration to Another Playground

import { createPlayground } from "livecodes";

const playground1 = await createPlayground("#container1");
const playground2 = await createPlayground("#container2");

// Copy content from playground1 to playground2
const config = await playground1.getConfig(true);
await playground2.setConfig(config);

​
Export Project Data

import { createPlayground } from "livecodes";

const playground = await createPlayground("#container");

// Get config for export
const config = await playground.getConfig(true);

// Export as JSON file
const blob = new Blob([JSON.stringify(config, null, 2)], {
  type: 'application/json',
});
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'project.json';
a.click();

​
Notes

  • The returned configuration object is a deep copy and can be safely modified.
  • If the playground is not yet loaded, calling this method will load it first.
  • Use contentOnly: true when you want to share or export project content without user-specific settings.
  • The configuration object can be quite large for projects with lots of code.

Build docs developers (and LLMs) love

Get started for freeTalk to us