Embedding a Code Playground
Learn how to embed a LiveCodes playground into any web page so your users can write, edit, and run code directly on your site.
Try the live demo below:
What We'll Build
A web page that:
- Embeds a LiveCodes playground in a styled container
- Pre-fills the playground with starter code
- Lets users edit HTML, CSS, and JavaScript directly
- Shows live results as they type
Basic Embedding
The simplest way to embed LiveCodes is with createPlayground:
import { createPlayground } from 'livecodes';
const config = {
markup: { language: 'html', content: '<h1>Hello!</h1>' },
style: { language: 'css', content: 'h1 { color: blue; }' },
script: { language: 'javascript', content: 'console.log("hi")' },
};
await createPlayground('#playground', { config });
This creates an interactive editor inside the #playground element.
Loading Modes
LiveCodes supports three loading modes:
Eager Loading (Default)
The playground loads immediately:
createPlayground('#playground', {
config,
loading: 'eager',
});
Lazy Loading
The playground only loads when it scrolls into view:
createPlayground('#playground', {
config,
loading: 'lazy',
});
Click-to-Load
Shows a "Click to load" screen until the user clicks:
createPlayground('#playground', {
config,
loading: 'click',
});
Full Example
Save this as index.html and open it in a browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Embedded LiveCodes Playground</title>
<style>
body {
font-family: system-ui, -apple-system, sans-serif;
margin: 0;
background: #f5f5f5;
}
#page {
max-width: 900px;
margin: 0 auto;
padding: 20px;
}
header {
text-align: center;
margin-bottom: 20px;
}
h1 {
margin: 0 0 8px;
color: #1a1a1a;
}
p {
margin: 0;
color: #666;
}
#playground {
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
height: 500px;
}
</style>
</head>
<body>
<div id="page">
<header>
<h1>My Code Playground</h1>
<p>Edit the code below and see the result instantly!</p>
</header>
<div id="playground"></div>
</div>
<script type="module">
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
const config = {
markup: {
language: 'html',
content: '<div class="card">
<h2>Hello LiveCodes!</h2>
<p>Edit this code and see changes live.</p>
<button id="actionBtn">Click me</button>
</div>',
},
style: {
language: 'css',
content: 'body {
font-family: system-ui;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
background: #f0f0f0;
}
.card {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
text-align: center;
}
h2 {
margin: 0 0 12px;
color: #333;
}
button {
padding: 10px 24px;
background: #007bff;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #0056b3;
}',
},
script: {
language: 'javascript',
content: 'const btn = document.getElementById("actionBtn");
btn.addEventListener("click", () => {
btn.textContent = "Clicked!";
setTimeout(() => {
btn.textContent = "Click me";
}, 1000);
});',
},
};
await createPlayground('#playground', {
config,
loading: 'eager',
});
</script>
</body>
</html>
How It Works
Container Setup
LiveCodes needs a container element. You can use any div:
<div id="playground"></div>
By default, the playground has a height of 300px. You can override this with CSS:
#playground {
height: 500px;
}
Or use the data-height attribute:
<div id="playground" data-height="500"></div>
Configuration
Pass a config object to pre-fill the playground:
const config = {
markup: {
language: 'html',
content: '<h1>Hello World</h1>',
},
style: {
language: 'css',
content: 'h1 { color: royalblue; }',
},
script: {
language: 'javascript',
content: 'console.log("Hello!");',
},
};
CDN Import
For quick testing without a build step, import from jsDelivr:
<script type="module">
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
// ...
</script>
Testing Your App
- Save the HTML example to a file
- Open it in your browser
- Edit the code in the embedded playground
- Watch the result update live
Challenge: Enhance Your Playground
Try adding these features:
- Configure the playground with a custom theme
- Add a "Reset" button to restore the original config
- Add a language selector to switch between different starter templates
- Style the playground container to match your site's design
Next Steps
- Creating Shareable URLs: Let users share their edited code
- SDK Methods: Learn more about controlling the playground programmatically
- Configuration: Explore all configuration options
Complete Code Summary
Concepts Covered: Embedding, container setup, loading modes, configuration, CDN import
Key SDK Functions: createPlayground