Skip to main content
Loads a new project using the passed configuration object. This method allows you to programmatically change the playground content, settings, and behavior at runtime. The configuration is merged with the current configuration, so you only need to specify the properties you want to change.

​
Signature

playground.setConfig(config: Partial<Config>): Promise<Config>

​
Parameters

​
config
Partial<Config>
required
A partial configuration object containing the properties to update. You can specify:
  • markup, style, script - Editor configurations
  • title, description - Project metadata
  • languages - Enabled languages
  • stylesheets, scripts - External resources
  • processors - CSS processors
  • activeEditor - Which editor to show
  • mode, theme - Display settings
  • Any other Config property

​
Returns

​
config
Config
A promise that resolves to the complete Config object after the new configuration has been loaded.

​
Usage

​
Load New Code

import { createPlayground } from "livecodes";

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

// Load new project content
const newConfig = await playground.setConfig({
  markup: {
    language: "html",
    content: "<h1>Hello World!</h1>",
  },
  style: {
    language: "css",
    content: "h1 { color: blue; }",
  },
  script: {
    language: "javascript",
    content: "console.log('Hello!');",
  },
});

// New project is now loaded
console.log(newConfig.markup.content); // "<h1>Hello World!</h1>"

​
Change Languages

import { createPlayground } from "livecodes";

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

// Switch to TypeScript and SCSS
await playground.setConfig({
  markup: {
    language: "markdown",
    content: "# Hello from Markdown",
  },
  style: {
    language: "scss",
    content: "$color: red;\nh1 { color: $color; }",
  },
  script: {
    language: "typescript",
    content: "const greeting: string = 'Hello';\nconsole.log(greeting);",
  },
});

​
Add External Resources

import { createPlayground } from "livecodes";

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

// Add external libraries
await playground.setConfig({
  stylesheets: [
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
  ],
  scripts: [
    "https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js",
  ],
  markup: {
    language: "html",
    content: '<div class="alert alert-primary">Bootstrap Alert</div>',
  },
});

​
Update Project Metadata

import { createPlayground } from "livecodes";

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

await playground.setConfig({
  title: "My Awesome Project",
  description: "A demo of LiveCodes playground",
  tags: ["demo", "tutorial", "javascript"],
});

​
Enable CSS Processors

import { createPlayground } from "livecodes";

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

// Enable Tailwind CSS processor
await playground.setConfig({
  processors: ["tailwindcss"],
  markup: {
    language: "html",
    content: '<div class="text-blue-500 font-bold">Tailwind CSS</div>',
  },
});

​
Partial Updates

import { createPlayground } from "livecodes";

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

// Update only the markup, style remains unchanged
await playground.setConfig({
  markup: {
    language: "html",
    content: "<h1>Updated</h1>",
  },
});
// Style editor still has: "h1 { color: red; }"

​
Configure Custom Settings

import { createPlayground } from "livecodes";

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

// Configure React with custom import map
await playground.setConfig({
  script: {
    language: "jsx",
    content: `
import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return <h1>Hello React!</h1>;
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);
    `,
  },
  markup: {
    language: "html",
    content: '<div id="root"></div>',
  },
  customSettings: {
    imports: {
      react: "https://esm.sh/react@18",
      "react-dom/client": "https://esm.sh/react-dom@18/client",
    },
  },
});

​
Notes

  • The configuration is merged with the current config, not replaced entirely.
  • To completely replace editor content, specify both language and content.
  • If you only specify content without language, it updates the content in the current language.
  • The playground automatically recompiles and displays results after loading the new configuration.
  • If the playground is not yet loaded, calling this method will load it first.
  • getConfig() - Get the current configuration
  • run() - Manually run code after configuration changes
  • getCode() - Get code and compiled output

Build docs developers (and LLMs) love

Get started for freeTalk to us