Deploying LiveCodes

Introduction

LiveCodes is a feature-rich, open-source code playground that runs entirely in the browser. Supporting over 90 programming languages, frameworks, and preprocessors, LiveCodes provides instant code execution and preview without any build steps or server-side compilation. It’s a powerful tool for learning, prototyping, teaching, and sharing code.

Unlike traditional playgrounds that rely on server resources for code execution, LiveCodes processes everything client-side using WebAssembly and JavaScript transpilers. This approach enables support for languages like TypeScript, Python, Go, Ruby, and C++ directly in the browser with near-instant feedback.

Key highlights of LiveCodes:

• 90+ Languages: Support for JavaScript, TypeScript, Python, Go, Ruby, Rust, C++, and many more
• No Server Execution: All code runs in the browser using WebAssembly
• Instant Preview: Real-time output as you type with no build delays
• Framework Support: React, Vue, Svelte, Angular, Solid, and more
• Rich Editor: Monaco editor (VS Code’s editor) with IntelliSense
• Import NPM Packages: Use any npm package directly in your code
• Export Options: Export to GitHub Gists, CodePen, JSFiddle, and more
• Embed Anywhere: Embed playgrounds in websites, docs, and blogs
• Template Library: Pre-built templates for quick starts
• Offline Support: Works offline as a Progressive Web App
• Self-Hostable: Full control with Docker deployment
• Open Source: MIT licensed with active development

This guide walks through deploying LiveCodes on Klutch.sh using Docker, configuring server-side features, and customizing your code playground.

Why Deploy LiveCodes on Klutch.sh

Deploying LiveCodes on Klutch.sh provides several advantages:

Server-Side Features: The Docker setup includes automatic HTTPS, Open Graph meta tags, oEmbed, short-URL sharing, and broadcast server capabilities.

Branding Control: Self-hosting allows custom domains and branding for educational institutions or development teams.

HTTPS by Default: Klutch.sh provides automatic SSL certificates, required for many web APIs and secure sharing.

GitHub Integration: Connect your configuration repository directly from GitHub. Push updates to trigger automatic redeployments.

Custom Domains: Use your own domain like playground.yourcompany.com for branded code sharing.

Data Privacy: Keep all playground data within your infrastructure for compliance requirements.

Offline Availability: Your playground remains available even when external services are down.

Custom Templates: Pre-configure templates specific to your organization’s stack.

Prerequisites

Before deploying LiveCodes on Klutch.sh, ensure you have:

• A Klutch.sh account
• A GitHub account with a repository for your configuration
• Basic familiarity with Docker and containerization concepts
• (Optional) A custom domain for your playground

Understanding LiveCodes Architecture

LiveCodes uses a unique architecture designed for client-side execution:

Client-Side Compilation: All code processing happens in the browser using WebAssembly compilers and JavaScript transpilers. No code is sent to servers for execution.

Monaco Editor: The same editor that powers VS Code provides syntax highlighting, IntelliSense, and code formatting.

Sandbox Isolation: Code runs in isolated iframes for security, preventing access to the parent page.

Service Workers: Enable offline functionality and improve loading performance through caching.

Server Features: The Docker setup adds optional server-side capabilities like short URLs, social sharing metadata, and oEmbed support.

Preparing Your Repository

To deploy LiveCodes on Klutch.sh, create a GitHub repository containing your Docker configuration.

Repository Structure

livecodes-deploy/
├── Dockerfile
├── docker-compose.yml
└── .dockerignore

Creating the Dockerfile

Create a Dockerfile in the root of your repository:

FROM livecodes/livecodes:latest

# Set environment variables for configuration
ENV HOST=0.0.0.0
ENV PORT=80

# Expose the web interface port
EXPOSE 80

# The base image includes the default entrypoint

Creating Docker Compose Configuration

Create a docker-compose.yml for reference:

version: '3.8'

services:
  livecodes:
    image: livecodes/livecodes:latest
    container_name: livecodes
    restart: unless-stopped
    ports:
      - "3000:80"
    environment:
      - HOST=0.0.0.0
      - PORT=80
      - BASE_URL=${BASE_URL}
    volumes:
      - livecodes_data:/app/data

volumes:
  livecodes_data:

Creating the .dockerignore File

Create a .dockerignore file:

.git
.github
*.md
LICENSE
.gitignore
*.log
.DS_Store
.env
.env.local
node_modules

Environment Variables Reference

LiveCodes supports configuration through environment variables:

Variable	Required	Default	Description
HOST	No	0.0.0.0	Host address to bind
PORT	No	80	Port to listen on
BASE_URL	No	-	Public URL for sharing features
ALLOWED_ORIGINS	No	-	CORS allowed origins

Deploying LiveCodes on Klutch.sh

Once your repository is prepared, follow these steps to deploy:

Push Your Repository to GitHub

Initialize your repository and push to GitHub:

git init
git add Dockerfile docker-compose.yml .dockerignore
git commit -m "Initial LiveCodes deployment configuration"
git remote add origin https://github.com/yourusername/livecodes-deploy.git
git push -u origin main

Create a New Project on Klutch.sh

Navigate to the Klutch.sh dashboard and create a new project. Give it a descriptive name like “livecodes” or “code-playground”.

Create a New App

Within your project, create a new app. Connect your GitHub account if you haven’t already, then select the repository containing your LiveCodes configuration.

Configure HTTP Traffic

In the deployment settings:

• Select HTTP as the traffic type
• Set the internal port to 80

Set Environment Variables

In the environment variables section, configure:

Variable	Value
BASE_URL	https://your-app-name.klutch.sh

Attach Persistent Volumes

Add persistent storage for data:

Mount Path	Recommended Size	Purpose
/app/data	5 GB	Shared projects and short URLs

Deploy Your Application

Click Deploy to start the build process. Klutch.sh will:

• Detect your Dockerfile automatically
• Build the container image
• Attach the persistent volumes
• Start the LiveCodes container
• Provision an HTTPS certificate

Access LiveCodes

Once deployment completes, access your playground at https://your-app-name.klutch.sh.

Using LiveCodes

Basic Usage

The LiveCodes interface consists of:

• Editor Panels: HTML, CSS, and JavaScript editors (or language-specific)
• Preview Panel: Real-time output of your code
• Console: JavaScript console output
• Settings: Language selection, editor preferences, and more

Supported Languages

LiveCodes supports an extensive range of languages:

Web Languages:

• HTML, Markdown, Pug, Haml
• CSS, SCSS, Sass, Less, Stylus, PostCSS
• JavaScript, TypeScript, JSX, TSX

Frameworks:

• React, Vue 2/3, Svelte, Solid, Angular
• Preact, Lit, Alpine.js, Stencil
• Astro, MDX

Backend Languages (via WebAssembly):

• Python, Ruby, Go, Rust
• C, C++, PHP, Lua
• Perl, R, Julia, Clojure

Other Languages:

• SQL, GraphQL
• Blockly (visual programming)
• Diagrams (Mermaid, GraphViz)

Importing NPM Packages

Use npm packages directly in your code:

// Import from npm
import confetti from 'canvas-confetti';
import dayjs from 'dayjs';

// Use the packages
confetti();
console.log(dayjs().format('YYYY-MM-DD'));

LiveCodes automatically fetches packages from CDNs like esm.sh, Skypack, or jsDelivr.

Sharing Code

Share your code with others:

1. Short URLs: Generate short URLs for easy sharing
2. GitHub Gists: Export to GitHub Gists
3. Embed Code: Get embed code for websites
4. Export: Download as HTML, JSON, or source files

Templates

Start quickly with templates:

1. Click New → Template
2. Browse available templates by category
3. Select a template to start with pre-configured code

Available template categories:

• Starter templates for each language
• Framework starters (React, Vue, etc.)
• Algorithm visualizations
• Game development
• Data visualization

Embedding LiveCodes

Basic Embed

Embed a playground in your website:

<iframe
  src="https://your-livecodes.klutch.sh/?template=javascript"
  style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;"
  allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>

Embed with Custom Code

Pre-populate with specific code:

<iframe
  src="https://your-livecodes.klutch.sh/?js=console.log('Hello!')&activeEditor=script"
  style="width: 100%; height: 500px; border: 0;"
  sandbox="allow-forms allow-modals allow-popups allow-same-origin allow-scripts"
></iframe>

SDK Integration

Use the JavaScript SDK for programmatic control:

<script src="https://your-livecodes.klutch.sh/sdk/livecodes.js"></script>
<div id="container"></div>
<script>
  livecodes.createPlayground('#container', {
    template: 'react',
    config: {
      markup: { language: 'html', content: '<div id="app"></div>' },
      script: { language: 'jsx', content: 'const App = () => <h1>Hello</h1>;\nReactDOM.render(<App />, document.getElementById("app"));' }
    }
  });
</script>

Customization

Theme Configuration

Customize the editor theme:

1. Access Settings → Editor
2. Choose from available themes (VS Code themes supported)
3. Configure font family and size

Default Settings

Set organization defaults through URL parameters:

https://your-livecodes.klutch.sh/?
  theme=dark&
  fontSize=14&
  tabSize=2&
  wordWrap=true

Custom CSS

Apply custom styles through the settings panel or URL configuration.

Educational Use Cases

Interactive Tutorials

Create interactive coding tutorials:

1. Prepare template with starter code
2. Add comments explaining the exercise
3. Share the URL with students
4. Students can modify and experiment

Code Challenges

Set up coding challenges:

1. Create a challenge template
2. Include test cases in the code
3. Share read-only initial state
4. Students fork and submit solutions

Documentation

Embed runnable examples in documentation:

1. Write documentation with code samples
2. Embed LiveCodes playgrounds for each example
3. Readers can modify and run code directly

Production Best Practices

Security Recommendations

• Sandbox Isolation: Code runs in sandboxed iframes by default
• CORS Configuration: Configure allowed origins if needed
• Content Security Policy: Review CSP headers for your use case

Performance Optimization

• CDN Usage: LiveCodes uses CDNs for language support files
• Caching: Service workers cache static assets
• Lazy Loading: Languages are loaded on demand

Monitoring

• Analytics: Implement analytics for usage tracking
• Error Logging: Monitor for JavaScript errors
• Performance Metrics: Track page load times

Troubleshooting Common Issues

Language Not Loading

Symptoms: Specific language shows loading spinner indefinitely.

Solutions:

• Check network requests for CDN failures
• Verify internet connectivity
• Try refreshing the page
• Check browser console for errors

Preview Not Updating

Symptoms: Code changes don’t reflect in preview.

Solutions:

• Check for JavaScript syntax errors
• Verify auto-run is enabled
• Try manual run with the Run button
• Clear browser cache

Sharing Not Working

Symptoms: Share URLs don’t work or show different code.

Solutions:

• Verify BASE_URL environment variable is set
• Check persistent storage is mounted
• Ensure HTTPS is working correctly

Performance Issues

Symptoms: Editor is slow or laggy.

Solutions:

• Try different editor (CodeMirror vs Monaco)
• Reduce code complexity
• Check browser memory usage
• Disable live preview and run manually

Additional Resources

• LiveCodes GitHub Repository
• LiveCodes Documentation
• Self-Hosting Guide
• LiveCodes SDK Documentation
• Klutch.sh Deployments

Conclusion

Deploying LiveCodes on Klutch.sh gives you a powerful, self-hosted code playground with support for 90+ languages. The client-side execution model means no server resources are spent on code compilation, while the Docker deployment adds valuable server-side features for sharing and collaboration.

Whether you’re building interactive tutorials, creating documentation with runnable examples, or providing a coding sandbox for your team, LiveCodes on Klutch.sh delivers a professional-grade experience with the flexibility of self-hosting.

The combination of broad language support, instant preview, and easy embedding makes LiveCodes an invaluable tool for developers, educators, and technical writers who want to make code more accessible and interactive.