livecodes/getting-started

LiveCodes — Get Started

LiveCodes is a client-side code playground that runs in the browser. No server, no build step, no npm install.

Quick Start

Standalone App

1. Go to livecodes.io
2. Start coding with 90+ languages

Embedded Playground (CDN)

<div id="container"></div>
<script type="module">
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';

  createPlayground('#container', {
    params: {
      markdown: '# Hello LiveCodes!',
      css: 'h1 { color: dodgerblue; }',
      js: 'console.log("Hello, from JS!");',
      console: 'open',
    },
  });
</script>

Embedded Playground (npm)

npm install livecodes

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  template: 'react',
});

Self-Hosted

1. Download from GitHub releases
2. Host on any static server (GitHub Pages, Netlify, Cloudflare Pages, etc.)
3. Point SDK to your instance:

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  appUrl: 'https://your-domain.com/livecodes',
  template: 'react',
});

Basic Patterns

Use a template

createPlayground('#container', {
  template: 'react', // react, vue, svelte, solid, angular, etc.
});

// Available templates:
// blank, javascript, typescript, react, react-native, vue, vue2, angular,
// preact, svelte, solid, lit, stencil, mdx, astro, jest, tailwindcss, python, ...

Custom code

createPlayground('#container', {
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World',
    },
    style: {
      language: 'css',
      content: 'h1 { color: blue; }',
    },
    script: {
      language: 'javascript',
      content: 'console.log("Hello!");',
    },
    activeEditor: 'script',
  },
  params: { console: 'open' },
});

Generate shareable URL

import { getPlaygroundUrl } from 'livecodes';

const url = getPlaygroundUrl({
  config: {
    markup: { language: 'markdown', content: '# Hello' },
  },
});
// Share this URL
window.open(url);