livecodes/language-support

LiveCodes — Work with Languages

LiveCodes supports 90+ languages across three editors: markup (HTML/templating), style (CSS/preprocessors), and script (JS/compiled languages).

Setup

import { createPlayground } from 'livecodes';

// Basic language setup
createPlayground('#container', {
  config: {
    markup: { language: 'markdown', content: '# Hello' },
    style: { language: 'scss', content: '$color: blue; body { color: $color; }' },
    script: { language: 'typescript', content: 'const x: number = 1;' },
  },
});

// WASM language (Python)
createPlayground('#container', {
  config: {
    script: { language: 'python-wasm', content: 'print("Hello from Python")' },
  },
});

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

Core Patterns

Set language for each editor

// Markup languages
markup: { language: 'html', content: '...' }        // HTML
markup: { language: 'markdown', content: '...' }    // Markdown
markup: { language: 'mdx', content: '...' }         // MDX
markup: { language: 'pug', content: '...' }         // Pug
markup: { language: 'handlebars', content: '...' }   // Handlebars

// Style languages
style: { language: 'css', content: '...' }          // CSS
style: { language: 'scss', content: '...' }         // SCSS/Sass
style: { language: 'less', content: '...' }        // Less
style: { language: 'stylus', content: '...' }       // Stylus

// Script languages
script: { language: 'javascript', content: '...' } // JavaScript
script: { language: 'typescript', content: '...' }  // TypeScript
script: { language: 'jsx', content: '...' }         // JSX
script: { language: 'tsx', content: '...' }         // TSX

Use CSS processors

const config = {
  style: { language: 'css', content: '...' },
  processors: [
    'tailwindcss', // Tailwind CSS
    'autoprefixer', // Add vendor prefixes
    'postcssPresetEnv', // Use future CSS
    'cssmodules', // CSS Modules
    'cssnano', // Minify
  ],
};

// Processors run in order listed
// Tailwind should come before PostCSS tools

Import styles from script

// Import CSS in script editor
script: {
  language: 'javascript',
  content: `
import 'tailwindcss/utilities.css';
import './style.css';  // Gets added as a link tag
  `,
}

// Get compiled CSS from style editor
import styles from './style.css';
console.log(styles); // CSS string

WASM languages (first load is slow)

// Python (Wasm)
script: { language: 'python-wasm', content: 'def greet(name): return f"Hello, {name}"' }

// Ruby (Wasm)
script: { language: 'ruby-wasm', content: 'puts "Hello from Ruby"' }

// Go (Wasm)
script: { language: 'go-wasm', content: 'package main\n\nfunc main() { println("Hello") }' }

WASM languages download large files on first use (5-20MB). Subsequent runs use cached WASM.

Set editor title and position

script: {
  language: 'python-wasm',
  content: 'print("Hello")',
  title: 'Python',           // Override displayed title
  hideTitle: false,          // Hide editor title
  order: 0,                  // Editor order (0, 1, 2)
}

// Use hidden content for helper functions
script: {
  language: 'javascript',
  content: 'export function main() { return helper(); }',
  hiddenContent: 'function helper() { return 42; }', // Hidden but evaluated
}

Common Mistakes

MEDIUM CSS processors in wrong order

Wrong:

// PurgeCSS runs before Tailwind generates classes
processors: ['purgecss', 'tailwindcss', 'autoprefixer'];

Correct:

// Correct order: Tailwind generates → PostCSS processes → PurgeCSS removes unused
processors: ['tailwindcss', 'autoprefixer', 'purgecss'];

Processors run in the order listed. Tailwind must generate classes before other processors. In the app UI, processors are ordered automatically.

Source: docs/docs/features/css.mdx — CSS Processors section

MEDIUM WASM language first load appears slow

Wrong assumption:

// Expecting instant execution for Python
script: { language: 'python-wasm', content: 'print("Hello")' }
// First run downloads ~15MB WASM file

Understanding:

// WASM languages need initial download
// - Python (Pyodide): ~15MB
// - Ruby: ~10MB
// - Go: ~8MB
// Subsequent runs use cached WASM
// Consider showing loading indicator on first run

Source: docs/docs/languages/python-wasm.mdx

Language Categories

Processor Reference

See Full Language Reference for all 90+ languages, aliases, and extensions.