Skip to main content

​
Overview

LiveCodes can import code from various sources, making it easy to:
  • Load existing projects from GitHub
  • Fork and remix code playgrounds
  • Import code snippets from gists
  • Migrate from other code playground platforms

​
Import Sources

​
GitHub Repositories

Import code directly from GitHub repositories:
1

From Menu

Go to Menu → Import → Code from GitHub
2

Enter URL

Paste a GitHub file URL, for example:
https://github.com/username/repo/blob/main/src/index.js
3

Load Code

LiveCodes fetches and loads the file automatically
You can also use the URL parameter: ?github=username/repo/path/to/file.js

​
GitHub Gists

Import from public GitHub gists: 
https://gist.github.com/username/gist-id
LiveCodes will:
  1. Detect HTML, CSS, and JavaScript files
  2. Map files to appropriate editors
  3. Load any external resources referenced

​
GitHub Directories

Import entire directories from GitHub: 
https://github.com/user/repo/blob/main/index.html
When importing directories, LiveCodes looks for index.html, index.css, index.js or similar entry files.

​
GitLab Support

Import from GitLab repositories and snippets:
  • GitLab files: https://gitlab.com/user/project/-/blob/main/file.js
  • GitLab snippets: https://gitlab.com/-/snippets/snippet-id
  • GitLab directories: https://gitlab.com/user/project/-/tree/main/src

​
Code Playgrounds

CodePen

Import pens from CodePen:
https://codepen.io/username/pen/pen-id

JSBin

Import bins from JSBin:
https://jsbin.com/bin-id

TypeScript Playground

Import from TS Playground:
https://www.typescriptlang.org/play?...

Vue Playground

Import from Vue SFC Playground:
https://play.vuejs.org/#...

​
Import from URL

Import any web page or code file by URL:
1

Provide URL

Use Menu → Import → Import from URL
2

Specify Parameters

Optionally specify which parts to import:
  • ?url=https://example.com&type=html - Import as HTML
  • ?url=https://example.com&type=script - Import as JavaScript
Due to CORS restrictions, some URLs may not be accessible. LiveCodes uses a proxy service when needed.

​
DOM Import

Extract code from any webpage: 
?url=https://example.com&mode=dom
This will:
  1. Load the page
  2. Extract HTML, CSS, and JavaScript
  3. Separate inline styles and scripts

​
Project Import

Import previously saved LiveCodes projects: 
https://livecodes.io/?x=project-id

​
Authentication for Private Repos

1

GitHub Login

Sign in with GitHub from the app menu
2

Grant Access

Authorize LiveCodes to access your repositories
3

Import Private Code

Now you can import from your private repos and gists
LiveCodes never stores your code on servers. Everything runs client-side in your browser.

​
Import via SDK

Programmatically import code using the LiveCodes SDK: 
import { createPlayground } from 'livecodes';

const playground = await createPlayground('#container', {
  config: {
    activeEditor: 'script',
  },
  import: 'https://github.com/user/repo/blob/main/index.js',
});

​
Import Strategies

LiveCodes uses intelligent heuristics to determine:
  1. File type detection - Based on extension and content
  2. Language mapping - Map files to appropriate editors
  3. Dependency resolution - Detect and load external resources
  4. Framework detection - Identify React, Vue, etc.

Build docs developers (and LLMs) love

Get started for freeTalk to us