Quickstart guide

Get started with LiveCodes in minutes - create your first playground, embed it in your app, or use the SDK.

Quickstart guide

Get up and running with LiveCodes in just a few minutes. This guide covers three ways to use LiveCodes: as a standalone app, embedded in your webpage, or self-hosted.

Standalone playground

The fastest way to start coding with LiveCodes:

1. Visit livecodes.io

   Open livecodes.io in your browser. No sign-up required.

2. Start coding

   You’ll see three editors:

   • Markup: HTML, Markdown, Pug, or other markup languages
   • Style: CSS, SCSS, Tailwind CSS, or other styling options
   • Script: JavaScript, TypeScript, Python, or 90+ other languages

   Start typing in any editor and see live results immediately.

3. Choose your language

   Click the language name (e.g., “HTML”, “CSS”, “JS”) above each editor to select from 90+ supported languages and frameworks.

4. See results

   Your code runs automatically in the result pane. Use the console to view logs and errors.

Press Ctrl/Cmd + S to format your code, or Ctrl/Cmd + Enter to manually run the code.

Embedded playground

Embed a LiveCodes playground in your website with minimal code:

1. Add the script

   Import LiveCodes from a 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>
   
2. Customize the playground

   The playground container will have default styles applied. You can customize the height:

   <div id="container" style="height: 500px;"></div>
   

   Or disable default styles entirely:

   <div id="container" data-default-styles="false"></div>
   
3. Configure the playground

   Use the config option for advanced configuration:

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

Using npm

Install LiveCodes via npm for better TypeScript support:

npm i livecodes

Then import and use it in your JavaScript/TypeScript code:

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
  view: 'result',
});

Framework integrations

LiveCodes provides official SDK wrappers for popular frameworks:

React

import LiveCodes from 'livecodes/react';

const config = {
  markup: {
    language: 'markdown',
    content: '# Hello World!',
  },
};

function Playground() {
  return <LiveCodes config={config} view="result" />;
}

export default Playground;

Try this example in LiveCodes

Vue

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

const config = {
  markup: {
    language: 'markdown',
    content: '# Hello World!',
  },
};
</script>

<template>
  <LiveCodes :config="config" view="result" />
</template>

Try this example in LiveCodes

Svelte

<script>
  import { createPlayground } from 'livecodes';
  import { onMount } from 'svelte';
  
  let container;
  
  onMount(() => {
    createPlayground(container, {
      config: {
        markup: {
          language: 'markdown',
          content: '# Hello World!',
        },
      },
      view: 'result',
    });
  });
</script>

<div bind:this={container}></div>

Solid

import { createPlayground } from 'livecodes';
import { onMount } from 'solid-js';

function Playground() {
  let container;
  
  onMount(() => {
    createPlayground(container, {
      config: {
        markup: {
          language: 'markdown',
          content: '# Hello World!',
        },
      },
      view: 'result',
    });
  });
  
  return <div ref={container}></div>;
}

SDK methods

Interact with the playground programmatically using SDK methods:

import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container', {
  config: {
    markup: {
      language: 'markdown',
      content: '# Hello World!',
    },
  },
});

// Run the code
await playground.run();

// Get the current code
const code = await playground.getCode();
console.log(code.markup.content); // "# Hello World!"

// Update the configuration
await playground.setConfig({
  markup: {
    language: 'html',
    content: '<h1>Hello from HTML!</h1>',
  },
});

// Get a shareable URL
const url = await playground.getShareUrl();
console.log(url);

// Format the code
await playground.format();

The createPlayground function returns a Promise that resolves to a Playground object with many useful methods.

Self-hosting

Host LiveCodes on your own infrastructure:

1. Download a release

   Get the latest release from GitHub releases.

2. Deploy to a static host

   Upload the files to any static file hosting service:

   • Cloudflare Pages
   • Netlify
   • GitHub Pages
   • Firebase Hosting
   • Vercel

   LiveCodes includes a built-in setup for GitHub Pages deployment.

3. Use your custom URL

   Point your embedded playgrounds to your self-hosted instance:

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

Make sure your static host serves the files with proper CORS headers if you plan to embed the playground from other domains.

Using starter templates

LiveCodes includes 80+ starter templates for common frameworks and languages:

import { createPlayground } from 'livecodes';

createPlayground('#container', {
  template: 'react', // Use the React starter template
});

Available templates include:

• react, react-native, vue, vue2, svelte, solid
• typescript, python, go, ruby, php
• tailwindcss, bootstrap, mdx
• And many more!

Next steps

Now that you have a working playground:

Explore features

Learn about advanced features like import/export, deployment, and sync

SDK documentation

Dive deep into the SDK API reference

Configuration guide

Customize every aspect of the playground

Why LiveCodes

Understand what makes LiveCodes unique