Skip to main content

​
General

LiveCodes is a feature-rich, open-source, client-side code playground that supports 80+ languages and frameworks. It runs entirely in the browser without requiring a backend server.
Yes, LiveCodes is completely free and open-source under the MIT license. You can use it, modify it, and even self-host it for your own needs.
Yes, LiveCodes can work offline once the initial assets are loaded. Since it’s client-side, you can even self-host it for complete offline usage.
LiveCodes is:
  • Client-side: Runs entirely in your browser
  • Feature-rich: Supports 80+ languages including Python, Go, Ruby, and more via WebAssembly
  • Embeddable: Easy SDK integration for your documentation or website
  • Open-source: MIT licensed and community-driven
  • Self-hostable: Full Docker support for enterprise deployments

​
Using LiveCodes

You can:
  • Share URLs: Generate a shareable link that encodes your code
  • Export: Download your project as a zip file or GitHub Gist
  • User Templates: Save your projects as templates for later use
  • Local Storage: Your work is automatically saved in your browser
Yes, LiveCodes supports importing from:
  • GitHub repositories and Gists
  • CodePen, JSFiddle, and other playgrounds
  • Local files (drag and drop)
  • URLs and code snippets
  • Images using OCR (v47+)
LiveCodes supports multiple ways to use npm packages:
  • ES imports: Just import packages directly: import pkg from 'package-name'
  • Import maps: Define custom import maps for module resolution
  • Bare modules: Import from npm, jsDelivr, or unpkg automatically
  • pkg.pr.new: Import unpublished packages under development (v47+)
LiveCodes supports 80+ languages including:
  • Web: HTML, CSS, JavaScript, TypeScript
  • Frameworks: React, Vue, Svelte, Angular, Solid, Astro
  • Languages: Python, Ruby, Go, Java, C#, PHP, Lua, and many more
  • Markup: Markdown, MDX, AsciiDoc, Pug, Haml
  • Styles: Sass, Less, Stylus, Tailwind CSS, PostCSS
See the full list in the language documentation.
Use the LiveCodes SDK:
<div id="container"></div>
<script type="module">
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
  
  createPlayground('#container', {
    config: {
      markup: { language: 'html', content: '<h1>Hello World</h1>' }
    }
  });
</script>
SDKs are available for JavaScript/TypeScript, React, Vue, and Svelte.

​
Features & Capabilities

Yes! LiveCodes has built-in support for both Tailwind CSS v3 and v4:
  • v4: Use @import "tailwindcss"; (default for new projects)
  • v3: Use the old directives for backward compatibility
  • Plugins: Import plugins from npm or URLs
  • IntelliSense: Monaco editor provides autocomplete and hover info
Yes, TypeScript is fully supported with:
  • Type checking in the editor
  • Auto-imports and IntelliSense
  • Custom tsconfig.json configuration
  • Support for .tsx files with React
Yes, LiveCodes includes an integrated testing tool pane that supports popular testing frameworks. You can write and run tests directly in the playground.
Use the Code to Image feature (v38+):
  1. Open your project
  2. Click the Code to Image button
  3. Customize the appearance with themes and presets
  4. Download or share your code screenshot
LiveCodes supports multiple editors:
  • Monaco: Full-featured editor (VS Code’s editor)
  • CodeMirror: Lightweight alternative
  • CodeJar: Minimal editor for simple use cases
  • Auto mode: Monaco on desktop, CodeMirror on mobile
Choose your preferred editor in settings.

​
Self-Hosting & Enterprise

Yes! LiveCodes provides full Docker support (v47+) with:
  • Automatic HTTPS setup
  • Custom domain configuration
  • Broadcast server for collaboration
  • Share service with short URLs
  • Open Graph meta tags and oEmbed support
See the Docker documentation for details.
Yes, LiveCodes is production-ready and used by many organizations:
  • Self-hosted deployment options
  • No external dependencies required
  • MIT license for commercial use
  • Active development and community support
We welcome contributions! See our Contributing Guide for:
  • Development setup instructions
  • Pull request guidelines
  • Code style and conventions
  • How to add new language support

​
Troubleshooting

Common issues:
  1. Check the browser console for errors (F12)
  2. Verify your imports and module paths are correct
  3. Ensure you’ve selected the right language
  4. Check if external resources loaded correctly
  5. Try clearing cache and reloading
See the Troubleshooting Guide for more help.
Please report bugs on GitHub Issues:
  1. Check if the issue already exists
  2. Provide a minimal reproduction
  3. Include browser and LiveCodes version
  4. Share any error messages or console logs