Skip to main content

Embedded Playgrounds


LiveCodes playgrounds can be embedded in any web page. The playground can be prefilled with code in any supported language. This can be very useful in documentation websites, technical blogs, educational websites and others.


show code
import { createPlayground } from 'livecodes';

const options = {
"template": "javascript"
createPlayground('#container', options);

The embedding web page can communicate with the playground using a powerful SDK (e.g. edit/format code, watch for code changes, get the compiled code or result page HTML, run tests, change layout, ...etc).

Create Embedded Playground

App Embed Screen

In the standalone app, the Embed Screen can be accessed from app menu → Embed.

It shows a preview of the embedded playground, allows customizations of embed options and provides generated code that can be added to the web page that will embed the playground.

LiveCodes embed LiveCodes embed LiveCodes embed


Please note that the Embed Screen sends the project code to LiveCodes share service to generate a short URL for usage in the embed code.

The setting "Embed Type" allows selection from different variations of the generated code:

  • Using the SDK from CDN.
  • Using the SDK with a bundler (e.g. vite, parcel, webpack, etc).
  • Using the React SDK.
  • Using the Vue SDK.
  • Using iframe and query params.
  • Using HTML code that the SDK can use to auto-prefill the playground.


The LiveCodes SDK can be used to embed playgrounds, specify embed and configuration options and allows communication with the embedded playground with many SDK methods.

This method provides more control and allows advanced scenarios.

Avoid Breaking Changes

To avoid breaking changes that would cause the embedded playgrounds to stop working as expected with later updates, follow these recommendations:

Check the Permanent URL section for more details.

Differences from Full App

Some of the features of the full standalone app are not available or shown by default in embedded playgrounds, either because of security reasons, being not useful when embedded or because of space limitations.

Features Not Available

Features Not Shown by Default


  • All user code, result page and compilers run in sandboxed iframes with a unique origin.

  • Embedded playgrounds do not have access to the parent page, or to sensitive data like user cookies and localstorage of the embedding page origin. Communications with the SDK occur by means of postMessage calls.