import-export

LiveCodes — Import and Export Code

LiveCodes imports code from external sources and exports projects in multiple formats.

Setup

import { createPlayground, getPlaygroundUrl } from 'livecodes';

// Import from URL
const playground = await createPlayground('#container', {
  import: 'https://github.com/user/repo/blob/main/src/index.js',
});

// Import from URL via query param
// https://livecodes.io/?x=https://github.com/user/repo

// Export to shareable URL
const shareUrl = await playground.getShareUrl();
const shortUrl = await playground.getShareUrl(true);

Core Patterns

Import from GitHub

// GitHub file
createPlayground('#container', {
  import: 'https://github.com/lodash/lodash/blob/master/isObject.js',
});

// GitHub directory
createPlayground('#container', {
  import: 'https://github.com/user/repo/tree/main/src',
});

// GitHub gist
createPlayground('#container', {
  import: 'https://gist.github.com/abc123',
});

// Specify files from multi-file source
createPlayground('#container', {
  import: 'https://github.com/user/repo/tree/main/src',
  params: { files: 'App.tsx,styles.css,index.html' },
});

Import from GitLab

// GitLab snippet
createPlayground('#container', {
  import: 'https://gitlab.com/-/snippets/12345',
});

// GitLab file
createPlayground('#container', {
  import: 'https://gitlab.com/user/repo/-/blob/main/src/index.js',
});

Import from URL

// Raw code URL
createPlayground('#container', {
  import: 'https://example.com/code.js',
});

// URL with language specified
createPlayground('#container', {
  params: {
    x: 'https://example.com/code',
    lang: 'typescript', // Force language
  },
});

// Import from Vue/TypeScript playgrounds
createPlayground('#container', {
  import: 'https://play.vuejs.org/#...',
});

Import from shared project

// Short URL
createPlayground('#container', {
  import: 'id/abc123', // Shared project ID
});

// Compressed config
createPlayground('#container', {
  import: 'code/...', // Compressed base64 config
});

// Via URL
// https://livecodes.io/?x=id/abc123
// https://livecodes.io/?x=code/...

Import from DOM

// HTML page with code blocks
createPlayground('#container', {
  import: 'https://example.com/blog-post',
});

// HTML must use specific structure:
// <code class="livecodes">
//   <pre data-lang="html">...</pre>
//   <pre data-lang="css">...</pre>
//   <pre data-lang="javascript">...</pre>
// </code>

Import via SDK config

// Set config with code
await playground.setConfig({
  markup: { language: 'html', content: '<h1>Hello</h1>' },
  style: { language: 'css', content: 'h1 { color: blue; }' },
  script: { language: 'javascript', content: 'console.log("hi")' },
});

// Set config from URL
await playground.setConfig('https://example.com/config.json');

Specify files from multi-file sources

// When importing directory or gist with multiple files
createPlayground('#container', {
  import: 'https://github.com/user/repo/tree/main/src',
  params: {
    files: 'Counter.tsx,counter.css,index.html',
    active: 'script', // Which editor to show: 'markup', 'style', 'script', or 0, 1, 2
  },
});

Export via SDK

const playground = await createPlayground('#container', {
  /* ... */
});

// Get share URL
const longUrl = await playground.getShareUrl(); // Long URL with compressed config
const shortUrl = await playground.getShareUrl(true); // Short URL

// Get config to save/export
const config = await playground.getConfig();

Export via URL

# Long URL (compressed config)
https://livecodes.io/#config/...

# Short URL
https://livecodes.io/?x=id/abc123

Common Import Sources

Source	URL Pattern	Notes
GitHub file	github.com/user/repo/blob/...	Single file
GitHub directory	github.com/user/repo/tree/...	Multiple files
GitHub gist	gist.github.com/...	Multi-file gists work
GitLab file	gitlab.com/user/repo/-/blob/...	Single file
GitLab snippet	gitlab.com/-/snippets/...	Snippet
JS Bin	jsbin.com/...	JS Bin embeds
Vue Playground	play.vuejs.org/#...	Vue SFC playground
TypeScript Playground	typescriptlang.org/play#...	TS playground
Raw URL	Any URL	Language auto-detected
Local files	Drag & drop	Standalone app only

File Selection Priority

When importing multiple files, LiveCodes prioritizes:

1. Files named index.*, default.* (markup)
2. Files named style.*, styles.* (style)
3. Files named script.*, app.*, main.*, index.* (script)
4. README and markdown files get lower priority
5. Use files parameter to explicitly select files

SDK Import Methods

// Option 1: EmbedOptions.import
createPlayground('#container', {
  import: 'https://github.com/user/repo',
});

// Option 2: Query param x
createPlayground('#container', {
  params: { x: 'https://github.com/user/repo' },
});

// Option 3: URL
// https://livecodes.io/?x=https://github.com/user/repo

// Option 4: setConfig with URL
await playground.setConfig('https://example.com/config.json');