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);

Permanent URL (pinned version)

For stable embeds that won't break with updates:

// Use a specific version
createPlayground('#container', {
  appUrl: 'https://v48.livecodes.io', // Permanent URL
  template: 'react',
});

// SDK version pinning
import { createPlayground } from 'https://cdn.jsdelivr.net/npm/[email protected]';

Common Patterns by Use Case

Documentation site embed

// Minimal embed for docs
createPlayground('#container', {
  params: {
    js: `console.log("Hello World")`,
    console: 'open',
  },
  loading: 'lazy', // Load when visible
});

// Or use markdown plugins (remark-livecodes, etc.)
// See: markdown-integration skill

Blog post with code example

// Simple, focused display
createPlayground('#container', {
  config: {
    mode: 'simple',
    layout: 'vertical',
  },
  params: {
    html: '<h1>Hello</h1>',
    css: 'h1 { color: blue; }',
  },
});

Teaching/Tutorial

// Show code with tests
createPlayground('#container', {
  template: 'jest',
  params: { tests: 'open' },
});

// Read-only code review
createPlayground('#container', {
  config: {
    mode: 'codeblock',
    readonly: true,
  },
  params: { html: '<h1>Review this code</h1>' },
});

Demo showcase

// Result only
createPlayground('#container', {
  params: {
    mode: 'result',
    template: 'react',
  },
});

// Demo with console
createPlayground('#container', {
  params: {
    mode: 'result',
    tools: 'console|full',
    js: 'console.log("Demo output")',
  },
});

Framework Quick Start

React

import LiveCodes from 'livecodes/react';

export default function App() {
  return <LiveCodes template="react" height="400px" />;
}

Vue

<script setup>
import LiveCodes from 'livecodes/vue';
</script>

<template>
  <LiveCodes template="vue" height="400px" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';
</script>

<LiveCodes template="svelte" height="400px" />

Solid

import LiveCodes from 'livecodes/solid';

function App() {
  return <LiveCodes template="solid" height="400px" />;
}

Web Components

<script src="https://cdn.jsdelivr.net/npm/livecodes/web-components.js"></script>
<live-codes template="react" height="400px"></live-codes>

Available Templates

Template	Description
blank	Empty project
javascript	Vanilla JavaScript
typescript	TypeScript
react	React
vue	Vue 3 SFC
svelte	Svelte SFC
solid	Solid
angular	Angular
preact	Preact
tailwindcss	Tailwind CSS
bootstrap	Bootstrap
python	Python
python-wasm	Python (WASM)
jest	Jest tests
jest-react	Jest + React Testing Library

See Full Template List for all 70+ templates.

Next Steps

• Embed playgrounds: Read sdk-embedding skill
• Control via SDK: Read sdk-methods skill
• Configure behavior: Read configuration skill
• Use languages: Read language-support skill
• Import npm modules: Read module-resolution skill
• Self-host: Read self-hosting skill
• Integrate with docs: Read markdown-integration skill