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 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:
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();