Import code from GitHub gists/files/repos, GitLab, URLs, DOM, and local files. Export projects as HTML, JSON, ZIP, or to external services. Load this skill when loading projects from external sources or exporting project state.
Standardmäßig ist der Prompt ausgewählt, der zuerst die Quelle prüft. Sie können zu einem direkten Befehl wechseln oder eine lokale Kopie herunterladen.
Quelldateien prüfen
Lesen Sie SKILL.md und alle von SkillsMP angezeigten Begleitdateien, bevor Sie sich für eine Installation entscheiden.
Mit Codex oder Claude installieren Kopieren Sie diesen Prompt, fügen Sie ihn in Codex, Claude oder einen anderen Assistant ein und lassen Sie die Skill-Seite prüfen und installieren.
Ein direkter Befehl überspringt den Prüf-Prompt. Prüfen Sie die Quelle, bevor Sie ihn ausführen.
Import code from GitHub gists/files/repos, GitLab, URLs, DOM, and local files. Export projects as HTML, JSON, ZIP, or to external services. Load this skill when loading projects from external sources or exporting project state.
// Raw code URLcreatePlayground('#container', {
import: 'https://example.com/code.js',
});
// URL with language specifiedcreatePlayground('#container', {
params: {
x: 'https://example.com/code',
lang: 'typescript', // Force language
},
});
// Import from Vue/TypeScript playgroundscreatePlayground('#container', {
import: 'https://play.vuejs.org/#...',
});
Import from shared project
// Short URLcreatePlayground('#container', {
import: 'id/abc123', // Shared project ID
});
// Compressed configcreatePlayground('#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 blockscreatePlayground('#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 codeawait 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 URLawait playground.setConfig('https://example.com/config.json');
Specify files from multi-file sources
// When importing directory or gist with multiple filescreatePlayground('#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 = awaitcreatePlayground('#container', {
/* ... */
});
// Get share URLconst longUrl = await playground.getShareUrl(); // Long URL with compressed configconst shortUrl = await playground.getShareUrl(true); // Short URL// Get config to save/exportconst 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:
Files named index.*, default.* (markup)
Files named style.*, styles.* (style)
Files named script.*, app.*, main.*, index.* (script)
