Getting Started

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

npm install livecodes

import { createPlayground } from 'livecodes';

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

import { createPlayground } from 'livecodes';

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

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, ...

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' },
});

import { getPlaygroundUrl } from 'livecodes';

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

// 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/livecodes@0.13.0';

// 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

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

// 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>' },
});

// 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")',
  },
});

import LiveCodes from 'livecodes/react';

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

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

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

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

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

import LiveCodes from 'livecodes/solid';

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

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