Skip to main content

​
Overview

LiveCodes offers multiple export formats to suit different use cases:
  • Download standalone HTML files
  • Export source code as zip archives
  • Share to CodePen, JSFiddle, or GitHub Gists
  • Save project configuration as JSON

​
Export Formats

​
Export as HTML

Create a standalone, self-contained HTML file:
1

Open Export Menu

Go to Menu → Export → **Export HTML”
2

Download File

A single .html file downloads with all your code embedded
3

Open Anywhere

Open the file in any browser - no server needed!
The exported HTML file includes:
  • Your compiled markup, styles, and scripts
  • All external resources
  • A single, portable file you can share
Example output structure: 
<!DOCTYPE html>
<html>
  <head>
    <style>
      /* Your compiled CSS */
    </style>
  </head>
  <body>
    <!-- Your compiled HTML -->
    <script>
      // Your compiled JavaScript
    </script>
  </body>
</html>

​
Export Source Code

Download your source files as a zip archive:
Includes both:
  • Compiled output (HTML, CSS, JS)
  • Original source files
  • Project configuration (livecodes.json)
project.zip
├── index.html          # Compiled result
├── style.css           # Compiled styles
├── script.js           # Compiled scripts
└── src/
    ├── index.html      # Original markup
    ├── style.css       # Original styles
    ├── script.ts       # Original TypeScript
    └── livecodes.json  # Project config

​
Export as JSON

Save the complete project configuration: 
{
  "title": "My Project",
  "description": "Project description",
  "markup": {
    "language": "html",
    "content": "<h1>Hello World</h1>"
  },
  "style": {
    "language": "css",
    "content": "h1 { color: blue; }"
  },
  "script": {
    "language": "javascript",
    "content": "console.log('Hello');"
  },
  "stylesheets": [],
  "scripts": [],
  "cssPreset": "",
  "imports": {},
  "types": {}
}
Use JSON export to:
  • Save project configurations
  • Version control your projects
  • Create reusable templates
  • Programmatically load projects via SDK

​
Export to Other Platforms

​
CodePen

Export directly to CodePen:
1

Select Export

Menu → Export → Export to CodePen
2

Opens CodePen

Your project opens in CodePen with all code copied
3

Save on CodePen

Save the pen to your CodePen account

​
JSFiddle

Export to JSFiddle with one click: Menu → Export → Export to JSFiddle Your HTML, CSS, and JavaScript are automatically populated in JSFiddle’s editors.

​
GitHub Gist

Create a GitHub Gist from your project:
1

Sign In

Sign in with GitHub if not already authenticated
2

Export to Gist

Menu → Export → Export to GitHub Gist
3

Gist Created

A new public gist is created with your code files
The gist will include separate files for your markup, style, and script code.

​
Deployment Options

For deploying your project to the web, see:

Deploy to GitHub Pages

Host your project for free on GitHub Pages with one click

​
Programmatic Export

Use the SDK to export programmatically: 
import { createPlayground } from 'livecodes';

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

// Get configuration as JSON
const config = await playground.getConfig();
console.log(JSON.stringify(config, null, 2));

// Get compiled code
const code = await playground.getCode();
console.log(code.compiled.script); // Compiled JavaScript

// Get source code
console.log(code.source.script); // Original source

​
Export from Embed

Even in embed mode, users can export projects: 
<div id="container"></div>
<script type="module">
  import { createPlayground } from 'https://cdn.jsdelivr.net/npm/livecodes';
  
  createPlayground('#container', {
    config: { /* ... */ },
    params: {
      allowExport: true, // Enable export in embed
    },
  });
</script>

​
Export Settings

Customize what gets exported:
  • Include source files: Include original source or just compiled output
  • Single file vs separate files: HTML only or HTML + CSS + JS
  • Minification: Optionally minify code (not yet implemented)

Build docs developers (and LLMs) love

Get started for freeTalk to us