Skip to main content
The ready event is fired when a new project is loaded (including when imported) and the playground is ready to run.

​
Event Payload

The event callback receives an object with the following structure:
​
config
Config
required
The current configuration object representing the playground state.

​
When It Fires

  • When the playground first loads with initial configuration
  • After importing a project from any supported source
  • After calling setConfig() to load a new project
  • After the app initialization is complete and ready to execute code

​
Usage Example

import { createPlayground } from "livecodes";

createPlayground("#container").then((playground) => {
  // Listen for ready event
  const readyWatcher = playground.watch("ready", ({ config }) => {
    console.log("Playground is ready!");
    console.log("Project title:", config.title);
    console.log("Markup language:", config.markup.language);
    console.log("Active editor:", config.activeEditor);
  });

  // Later, remove the watcher
  // readyWatcher.remove();
});

​
Common Use Cases

​
Track Project Loads

playground.watch("ready", ({ config }) => {
  console.log(`Loaded project: ${config.title}`);
  console.log(`Description: ${config.description}`);
});

​
Initialize After Load

playground.watch("ready", ({ config }) => {
  // Perform actions after project is ready
  if (config.autoupdate === false) {
    console.log("Auto-update is disabled");
  }
  
  // Check which languages are being used
  console.log("Languages:", {
    markup: config.markup.language,
    style: config.style.language,
    script: config.script.language,
  });
});

​
Monitor Configuration Changes

let projectCount = 0;

playground.watch("ready", ({ config }) => {
  projectCount++;
  console.log(`Project #${projectCount} loaded:`, config.title);
});

// Load different projects
await playground.setConfig({
  title: "Project 1",
  markup: { language: "html", content: "<h1>Hello</h1>" },
});

await playground.setConfig({
  title: "Project 2",
  script: { language: "javascript", content: "console.log('Hi');" },
});

​
Difference from load Event

  • The load event fires only once when the playground first loads
  • The ready event fires every time a new project is loaded
  • Use ready to track project changes, use load for one-time initialization

​
Removing the Watcher

const watcher = playground.watch("ready", ({ config }) => {
  console.log("Ready:", config.title);
});

// Stop watching for ready events
watcher.remove();

Build docs developers (and LLMs) love

Get started for freeTalk to us