import CodeBlock from '@theme/CodeBlock'; import LiveCodes from '../../src/components/LiveCodes'; import RunInLiveCodes from '../../src/components/RunInLiveCodes'; export const embedDemoParams = { html: `

My Code Playground

Edit the code below and see the result instantly!

`, css: `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; } `, js: `import { createPlayground } from 'livecodes'; const config = { markup: { language: 'html', content: \`
\n

Hello LiveCodes!

\n

Edit this code and see changes live.

\n \n
\`, }, style: { language: 'css', content: \`body {\n font-family: system-ui;\n display: flex;\n justify-content: center;\n align-items: center;\n min-height: 100vh;\n margin: 0;\n background: #f0f0f0;\n}\n.card {\n background: white;\n padding: 40px;\n border-radius: 12px;\n box-shadow: 0 4px 20px rgba(0,0,0,0.1);\n text-align: center;\n}\nh2 {\n margin: 0 0 12px;\n color: #333;\n}\nbutton {\n padding: 10px 24px;\n background: #007bff;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n font-size: 16px;\n}\nbutton:hover {\n background: #0056b3;\n}\`, }, script: { language: 'javascript', content: \`const btn = document.getElementById("actionBtn");\nbtn.addEventListener("click", () => {\n btn.textContent = "Clicked!";\n setTimeout(() => {\n btn.textContent = "Click me";\n }, 1000);\n});\`, }, }; await createPlayground('#playground', { config, loading: 'eager', }); `, }; export const lazyLoadParams = { html: `

Lazy Loaded Playground

Scroll down to see the playground load automatically.

`, css: `body { font-family: system-ui, sans-serif; margin: 0; padding: 20px; } .spacer { height: 80vh; display: flex; align-items: center; justify-content: center; color: #999; } #playground { height: 400px; border: 1px solid #ddd; border-radius: 8px; } `, js: `import { createPlayground } from 'livecodes'; const config = { markup: { language: 'html', content: '

I loaded lazily!

This playground only loads when it enters the viewport.

', }, }; createPlayground('#playground', { config, loading: 'lazy', }); `, }; export const clickToLoadParams = { html: `

Click-to-Load Playground

The playground below won't load until you click it.

`, css: `body { font-family: system-ui, sans-serif; margin: 0; padding: 20px; } #playground { height: 400px; border: 1px solid #ddd; border-radius: 8px; } `, js: `import { createPlayground } from 'livecodes'; const config = { markup: { language: 'html', content: '

You clicked to load me!

', }, }; createPlayground('#playground', { config, loading: 'click', }); `, }; export const fullHtmlExample = ` Embedded LiveCodes Playground

My Code Playground

Edit the code below and see the result instantly!

`; # 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: 1. Embeds a LiveCodes playground in a styled container 2. Pre-fills the playground with starter code 3. Lets users edit HTML, CSS, and JavaScript directly 4. Shows live results as they type ## Basic Embedding The simplest way to embed LiveCodes is with `createPlayground`: ```js import { createPlayground } from 'livecodes'; const config = { markup: { language: 'html', content: '

Hello!

' }, 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: ```js createPlayground('#playground', { config, loading: 'eager', }); ``` ### Lazy Loading The playground only loads when it scrolls into view: ```js createPlayground('#playground', { config, loading: 'lazy', }); ``` ### Click-to-Load Shows a "Click to load" screen until the user clicks: ```js createPlayground('#playground', { config, loading: 'click', }); ``` ## Full Example Save this as `index.html` and open it in a browser: {fullHtmlExample} ## How It Works ### Container Setup LiveCodes needs a container element. You can use any `div`: ```html
``` By default, the playground has a height of `300px`. You can override this with CSS: ```css #playground { height: 500px; } ``` Or use the `data-height` attribute: ```html
``` ### Configuration Pass a [config object](../configuration/configuration-object.html.md) to pre-fill the playground: ```js const config = { markup: { language: 'html', content: '

Hello World

', }, 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: ```html ``` ## Testing Your App 1. Save the HTML example to a file 2. Open it in your browser 3. Edit the code in the embedded playground 4. Watch the result update live ## Challenge: Enhance Your Playground Try adding these features: - [Configure](../configuration/configuration-object.html.md) 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](./creating-shareable-urls.html.md): Let users share their edited code - [SDK Methods](../sdk/js-ts.html.md): Learn more about controlling the playground programmatically - [Configuration](../configuration/configuration-object.html.md): Explore all configuration options ## Complete Code Summary **Concepts Covered**: Embedding, container setup, loading modes, configuration, CDN import **Key SDK Functions**: `createPlayground`