Skip to main content

Overview

Protect your work with LiveCodes backup and restore:
  • Full backups - Save all projects and settings
  • Selective backups - Choose what to include
  • Easy restore - One-click data recovery
  • Export formats - ZIP archives with JSON data

Creating Backups

1

Open Backup

Click MenuBackup/Restore
2

Select Data

Choose what to backup:
  • Projects
  • User settings
  • Templates
  • Snippets
  • Assets
3

Create Backup

Click Backup button
4

Download

A ZIP file downloads:
livecodes_backup_2024-03-15.zip
Backup files are created client-side in your browser. No data is sent to servers.

What to Backup

Projects

All Saved Projects

Includes:
  • All your saved projects
  • Code in all editors
  • External resources
  • Project configurations
  • Custom settings per project
File format:
{
  "project-id-1": {
    "title": "My Project",
    "markup": { "language": "html", "content": "..." },
    "style": { "language": "css", "content": "..." },
    "script": { "language": "javascript", "content": "..." }
  },
  "project-id-2": { /* ... */ }
}

User Settings

User Configuration

Includes:
  • Editor preferences (font, theme, etc.)
  • Default languages
  • Keyboard shortcuts
  • Tool preferences
  • Feature flags

Templates

Custom Templates

Your custom starter templates

Snippets

Code Snippets

Saved code snippets for reuse

Assets

Asset References

References to uploaded assets (not the files themselves)
Asset backups include URLs and metadata, not the actual files. Files hosted on GitHub Pages remain there.

Backup File Structure

Extract a backup ZIP to see:
livecodes_backup_2024-03-15.zip
├── projects.json          # All projects
├── userConfig.json        # User settings
├── userData.json          # User data
├── appData.json           # App data
├── templates.json         # Custom templates
├── snippets.json          # Code snippets
└── assets.json            # Asset references
Each JSON file contains the respective data in a structured format.

Restoring Backups

1

Open Restore

Go to MenuBackup/RestoreRestore tab
2

Select Backup File

Click “Choose File” and select your backup ZIP
3

Choose What to Restore

Select which data to restore:
  • All data
  • Only projects
  • Only settings
  • Specific stores
4

Confirm Restore

Click Restore button
5

Reload App

LiveCodes reloads with restored data
Restoring will overwrite existing data. Create a backup of current data first if needed.

Selective Backup

Choose exactly what to backup:
Check only Projects to backup:
  • All saved projects
  • No settings or user data
  • Useful for sharing projects

Backup Strategies

Regular Backups

1

Weekly Backups

Create backups every week:
livecodes_backup_2024-03-08.zip
livecodes_backup_2024-03-15.zip
livecodes_backup_2024-03-22.zip
2

Before Major Changes

Always backup before:
  • Browser updates
  • Clearing cache
  • Experimental features
  • Bulk deletions
3

Keep Multiple Versions

Don’t delete old backups immediately:
  • Keep last 3-4 weekly backups
  • Archive monthly backups

Project-Specific Backups

For important projects:
1

Export Project

Use ExportExport as JSON for single projects
2

Version Control

Store in Git:
git add project.json
git commit -m "v1.0.0"
git tag v1.0.0
3

Deploy Source

Include source files when deploying to GitHub Pages

Storage Locations

Save backups on your computer:
~/Documents/LiveCodes Backups/
├── 2024-03-15.zip
├── 2024-03-22.zip
└── important-project.json

Automated Backups

Browser Extensions

Use extensions for automatic backup:
  1. Export to File extension
  2. Schedule regular exports
  3. Auto-save to cloud folder

Scripts

Automate via SDK:
import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container');

// Get all data
const config = await playground.getConfig();

// Save to file
const json = JSON.stringify(config, null, 2);
const blob = new Blob([json], { type: 'application/json' });
const url = URL.createObjectURL(blob);

// Trigger download
const a = document.createElement('a');
a.href = url;
a.download = `backup-${Date.now()}.json`;
a.click();

Restore Options

Full Restore

Restore everything:
✓ Projects
✓ User Config
✓ User Data
✓ App Data
✓ Templates
✓ Snippets
✓ Assets

Partial Restore

Restore only selected data:
✓ Projects
☐ User Config  (keep current settings)
☐ User Data
☐ App Data

Merge vs Replace

Existing data is overwritten:
  • Old projects deleted
  • Settings replaced
  • Clean slate

Backup Best Practices

1

3-2-1 Rule

  • 3 copies of data
  • 2 different storage media
  • 1 off-site backup
2

Test Restores

Periodically test that backups work:
  1. Create test project
  2. Back it up
  3. Delete it
  4. Restore from backup
  5. Verify it’s intact
3

Label Clearly

Use descriptive filenames:
livecodes_backup_2024-03-15_pre-update.zip
project_client-website_final.json
settings_backup_work-laptop.zip
4

Secure Sensitive Data

Encrypt backups containing:
  • API keys
  • Credentials
  • Private code

Recovery Scenarios

Lost Projects

1

Find Latest Backup

Locate most recent backup file
2

Restore Projects

Select only “Projects” during restore
3

Verify

Check that all projects are recovered

Browser Cache Cleared

1

Don't Panic

Your backups are safe offline
2

Full Restore

Restore complete backup
3

Reconfigure

May need to re-login to GitHub

Migrating to New Device

1

Backup on Old Device

Create complete backup
2

Transfer File

Move backup to new device
3

Restore on New Device

Open LiveCodes and restore backup

Troubleshooting

  • Check available disk space
  • Disable download blockers
  • Try smaller backup (selective)
  • Check browser permissions
  • Verify backup file isn’t corrupted
  • Check available browser storage
  • Try restoring in smaller batches
  • Clear some existing data first
  • Backup selectively
  • Delete old/unused projects first
  • Split into multiple backups
  • Check restore log for errors
  • Verify correct data was selected
  • Try full restore
  • Reload browser

Data Privacy

Backup process is entirely client-side:
  • No server upload - Data never leaves your browser
  • You control storage - Choose where backups go
  • No tracking - Backups aren’t monitored
  • Encrypted transit - Files stay on your device

Backup Limits

ItemLimit
Backup file sizeBrowser dependent (~100MB typical)
Number of projectsNo limit
Backup frequencyNo limit
Storage durationIndefinite (you control)
  • Sync - Sync across devices
  • Export - Export individual projects
  • Import - Import projects
  • Deploy - Deploy with source files

Build docs developers (and LLMs) love