Overview
Embed LiveCodes playgrounds anywhere you can add HTML:
- Blogs and articles - Interactive code examples
- Documentation - Live API demonstrations
- Educational content - Hands-on tutorials
- Portfolios - Showcase your work
Quick Start
The simplest way to embed a playground:
<iframe
src="https://livecodes.io/?embed=true"
style="width: 100%; height: 500px; border: 0;"
></iframe>
Using the SDK
For more control, use the LiveCodes SDK:
Install or Load
<script type="module">
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
</script>
Create Container
<div id="container"></div>
Initialize Playground
const playground = await createPlayground('#container', {
config: {
markup: {
language: 'html',
content: '<h1>Hello, World!</h1>'
},
style: {
language: 'css',
content: 'h1 { color: blue; }'
},
script: {
language: 'javascript',
content: 'console.log("Hello!");'
}
}
});
The SDK provides full programmatic control and API access to the playground.
Configuration Options
Display Modes
Full
Editor
Codeblock
Result
createPlayground('#container', {
params: {
mode: 'full' // All editors + result
}
});
createPlayground('#container', {
params: {
mode: 'editor' // Editors only, no result
}
});
createPlayground('#container', {
params: {
mode: 'codeblock' // Read-only single editor
}
});
createPlayground('#container', {
params: {
mode: 'result' // Result pane only
}
});
Layout Options
createPlayground('#container', {
config: {
tools: { enabled: 'all', active: '', status: '' }
},
params: {
layout: 'horizontal' // Editors on left, result on right
}
});
Active Editor
Control which editor is visible:
createPlayground('#container', {
params: {
activeEditor: 'script' // 'markup', 'style', or 'script'
}
});
Console Display
Read-Only Mode
Prevent editing:
createPlayground('#container', {
config: {
readonly: true
}
});
Read-only mode is great for displaying code examples in documentation.
Loading Projects
From URL Parameters
<iframe src="https://livecodes.io/?x=abc123&embed=true"></iframe>
From Template
createPlayground('#container', {
template: 'react' // Load React starter template
});
From GitHub
createPlayground('#container', {
import: 'https://github.com/user/repo/blob/main/src/index.js'
});
From Configuration
const config = {
title: 'My Project',
markup: { language: 'html', content: '...' },
style: { language: 'css', content: '...' },
script: { language: 'javascript', content: '...' }
};
createPlayground('#container', { config });
SDK API
Interact with embedded playgrounds:
const playground = await createPlayground('#container');
// Run the code
await playground.run();
// Get current code
const code = await playground.getCode();
console.log(code.script.content);
// Update code
await playground.setConfig({
script: {
language: 'javascript',
content: 'console.log("Updated!");'
}
});
// Format code
await playground.format();
// Get share URL
const url = await playground.getShareUrl();
// Listen to changes
playground.watch('code', (newCode) => {
console.log('Code changed:', newCode);
});
Styling Embeds
Responsive Design
.playground-container {
width: 100%;
height: 500px;
max-width: 100%;
min-height: 300px;
}
@media (max-width: 768px) {
.playground-container {
height: 400px;
}
}
Custom Themes
createPlayground('#container', {
config: {
theme: 'dark',
editorTheme: 'vs-dark'
}
});
Loading Strategies
Lazy Loading
Load playgrounds only when visible:
const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
createPlayground(entry.target);
observer.unobserve(entry.target);
}
});
});
observer.observe(document.querySelector('#container'));
Click to Load
<div id="placeholder">
<button onclick="loadPlayground()">Load Playground</button>
</div>
<script>
async function loadPlayground() {
const { createPlayground } = await import('https://cdn.jsdelivr.net/npm/livecodes');
document.getElementById('placeholder').innerHTML = '<div id="container"></div>';
await createPlayground('#container');
}
</script>
Use Lite Mode
createPlayground('#container', {
params: { lite: true }
});
Limit Visible Editors
Show only the editors you need:{ activeEditor: 'script' }
Disable Auto-run
createPlayground('#container', {
config: { autoupdate: false }
});
Security Considerations
Embedded playgrounds run user code in sandboxed iframes. While safe, be cautious with:
- Untrusted code from users
- Sensitive data in the embedding page
- Cross-origin communication
allow-scriptsallow-same-origin (for service workers)- No access to parent page