Skip to main content

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

​
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

Build docs developers (and LLMs) love

Get started for freeTalk to us