Skip to main content

Overview

This guide helps you migrate between major LiveCodes versions and SDK updates. LiveCodes maintains backward compatibility where possible, but some releases include breaking changes that require updates to your code.
Always check the Changelog for complete details on each release.

SDK Migration

SDK v0.8.0 (January 2025)

This release introduces backward-compatible deprecations. The old API still works but shows console warnings. Update your code to avoid future breaking changes.

Deprecated: view embed option

Old (deprecated):
createPlayground('#container', {
  view: 'split'
});
New:
createPlayground('#container', {
  config: {
    view: 'split'
  }
});

Deprecated: lite embed option

Old (deprecated):
createPlayground('#container', {
  lite: true
});
New:
createPlayground('#container', {
  config: {
    mode: 'lite'
  }
});

Changed: headless mode

Old (deprecated):
createPlayground('#container', {
  view: 'headless'
});
New:
createPlayground('#container', {
  headless: true
});

New SDK methods

  • show('toggle-result'): Toggle result panel
  • show('code'): Show active editor

SDK v0.7.0 (December 2024)

New configuration options

App Language Support:
createPlayground('#container', {
  config: {
    appLanguage: 'es' // Spanish UI
  }
});
Supported languages: en, ar, bn, de, es, fa, fr, hi, id, nl, tr, zh-CN Theme Color Customization:
createPlayground('#container', {
  config: {
    themeColor: '#ff6b6b'
  }
});

App Migration

v48 (February 2026)

Removed: AI Code Assistant

The AI code assistant feature has been removed.
Breaking change:
  • Config option enableAI has been removed
  • If your code uses this option, remove it from your configuration
Migration:
// Remove this
const config = {
  enableAI: true  // ❌ No longer supported
};

// Just remove the option entirely
const config = {
  // other options...
};

New Languages

  • MiniZinc: Constraint modeling language support added
  • Svelte 5.39: Upgraded to latest version
  • TypeScript 5.9: Updated compiler
  • Pyodide 0.29: Updated Python runtime
  • Ruby 3.4: Updated via Ruby Wasm v2.7.2

v47 (October 2025)

New: Docker Self-Hosting

Major feature: Full Docker setup for self-hosting with production features.
If you’re self-hosting LiveCodes, consider migrating to Docker:
# Pull the official image
docker pull livecodes/livecodes

# Run with custom configuration
docker run -p 8080:80 \
  -e CUSTOM_DOMAIN=livecodes.example.com \
  livecodes/livecodes
Features:
  • Automatic HTTPS
  • Custom domain support
  • Broadcast server for collaboration
  • Share service with short URLs
  • Open Graph and oEmbed support
See Docker documentation for details.

New: Go Language Support

Go language added using Yaegi compiled to WASM:
package main

import "fmt"

func main() {
    fmt.Println("Hello from Go!")
}

Updated: Python to 3.13

Pyodide updated to v0.28.3, running Python 3.13.2. Most code should work without changes.

v46 (May 2025)

New: Jinja Template Support

Jinja templating language added:
<h1>Hello {{ name }}!</h1>
{% for item in items %}
  <li>{{ item }}</li>
{% endfor %}

Performance: Project Loading Refactor

Major performance improvement: Projects load faster and support much larger codebases.
Benefits:
  • Larger projects: Can now load much bigger projects
  • Better encoding: Data encoded in URL hash instead of query params
  • Backward compatible: Old URLs still work
No migration needed, but regenerated share URLs will be more efficient.

v45 (April 2025)

New Languages

  • C# WebAssembly: C# support via WASM
  • Java: Java support with DoppioJVM
Example:
using System;

class Program {
    static void Main() {
        Console.WriteLine("Hello from C#!");
    }
}

SDK: Compressed Parameters

SDK now compresses and encodes parameters for better performance with large projects. No migration needed.

v37 (December 2024)

Breaking: Svelte 5 Upgrade

Svelte upgraded from v4 to v5 with breaking changes.
What changed:
  • New reactivity model using runes ($state, $derived, $effect)
  • Component props syntax changed
  • Some v4 features deprecated
Migration example:
<!-- Svelte 4 (old) -->
<script>
  let count = 0;
  $: doubled = count * 2;
</script>

<!-- Svelte 5 (new) -->
<script>
  let count = $state(0);
  let doubled = $derived(count * 2);
</script>
See Svelte 5 migration guide for complete details.

New: React Compiler Support

React Compiler (RC) automatically optimizes your React code.
Enabled by default in React templates. No action needed for new projects. To disable:
// Add to project configuration
{
  reactCompiler: false
}

v42 (January 2025)

Tailwind CSS v4 Support

Both Tailwind CSS v3 and v4 are supported with automatic detection.
v3 (backward compatible):
@tailwind base;
@tailwind components;
@tailwind utilities;
v4 (new):
@import "tailwindcss";
Migration: Replace old directives with @import statement, or remove directives entirely to use v4. Starter templates now use v4 by default.

v36 (December 2024)

Major: UI Redesign

Complete UI overhaul with new design system and customization options.
No code changes needed, but visual appearance has changed significantly.

Major: Internationalization (i18n)

12 languages now supported for the UI:
  • English, Arabic, Bengali, German, Spanish, Persian
  • French, Hindi, Indonesian, Dutch, Turkish, Chinese
Set via configuration:
{
  config: {
    appLanguage: 'fr' // French
  }
}

Import Maps Changes

v43 (March 2025)

Fixed: Preact Module Resolution

Duplicate Preact instances issue resolved.
If you had workarounds for Preact import issues, you can remove them.

Fixed: Vue Duplicate Instances

Automatic prevention of duplicate Vue instances. Remove manual import map workarounds.

Editor Changes

v44 (April 2025)

New: Vue Improvements

  • monaco-volar: Better autocomplete and IntelliSense
  • Props inference: defineProps now infers from local types
  • Data URL imports: SFCs can import other SFCs as data URLs

New: Code Folding

Two new options:
  1. Fold regions:
{
  config: {
    foldRegions: true
  }
}
  1. Fold specific lines:
{
  config: {
    script: {
      foldLines: [{ from: 1, to: 5 }]
    }
  }
}

v40 (January 2025)

New: Relative Line Numbers

Useful for vim mode:
{
  config: {
    lineNumbers: 'relative'
  }
}
Options: 'absolute', 'relative', 'off'

Testing Your Migration

1

Review changelog

Read the full changelog for your version range.
2

Update dependencies

Update LiveCodes SDK to the latest version:
npm install livecodes@latest
3

Check deprecation warnings

Open browser console and look for deprecation warnings.
4

Test functionality

Test your embedded playgrounds or integrations thoroughly.
5

Update configurations

Apply the configuration changes from this guide.

Need Help?

FAQ

Check frequently asked questions

Troubleshooting

Common issues and solutions

GitHub Discussions

Ask the community

Report Issues

File a bug report

Build docs developers (and LLMs) love