livecodes/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/...