import LiveCodes from '../src/components/LiveCodes.tsx';

There are multiple options:

The easiest way to get started with LiveCodes is to just use the app (https://livecodes.io).

It is packed with features and offers various ways to import code.

LiveCodes playgrounds can be easily embedded into any web page. This can be achieved using:

The standalone app allows you to embed any project from the embed screen. The UI allows setting embed options and shows a preview of the embedded playground. Copy the generated code snippet (at the bottom of the screen) and add it to the web page that you want to embed the playground in.

LiveCodes SDK is available as npm package to allow easy embedding and communication with playgrounds.

Install from npm.

npm install livecodes

then you can use it like that:

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  template: 'react',
  // other embed options
});

ESM:

import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; import CodeBlock from '@theme/CodeBlock';

export const ESMCode = () => { const { siteConfig } = useDocusaurusContext(); return ( {<div id="container"></div>\n<script type="module"> ${' '}import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}';\n ${' '}createPlayground('#container', { ${' '}template: 'react', ${' '}// other embed options ${' '}}); </script>} ); };

UMD:

export const UMDCode = () => { const { siteConfig } = useDocusaurusContext(); return ( {<div id="container"></div>\n<script src="https://cdn.jsdelivr.net/npm/livecodes@${siteConfig.customFields.sdkVersion}/livecodes.umd.js"></script>\n<script>\n // the UMD version provides the global object \livecodes` ${' '}livecodes.createPlayground('#container', {\n${' '.repeat(4)}template: 'react', ${' '}// other embed options ${' '}}); </script> `} ); };

You may use any of the methods to prefill the playground with your own code.

Example:

import { createPlayground } from 'livecodes';

const config = {
  markup: {
    language: 'markdown',
    content: '# Hello LiveCodes!',
  },
  style: {
    language: 'css',
    content: 'body { color: blue; }',
  },
  script: {
    language: 'javascript',
    content: 'console.log("hello from JavaScript!");',
  },
  activeEditor: 'script',
};

createPlayground('#container', { config, params: { console: 'open' } });

export const config = { markup: { language: 'markdown', content: '# Hello LiveCodes!', }, style: { language: 'css', content: 'body { color: blue; }', }, script: { language: 'javascript', content: 'console.log("hello from JavaScript!");', }, activeEditor: 'script', };

Live demo: (this is an interactive playground - try editing the code!)

<LiveCodes config={config} params={{ console: 'open' }}>

Please refer to the section on Embedded Playgrounds for more details.

LiveCodes can be hosted on any static file server or CDN.

The easiest way is to download the app from releases, extract the folder and add it to your website.

Please check the section on self-hosting for other methods of self-hosting, including the built-in setup to deploy to GitHub pages and how to use the SDK with the self-hosted app.