Skip to main content Skills Marketplace Découvrez et explorez les compétences IA créées par la communauté.
Installer avec Codex ou Claude Copiez ce prompt, collez-le dans Codex, Claude ou un autre assistant, puis laissez-le vérifier la page du skill et l'installer pour vous.
Afficher les détails du prompt Une commande directe contourne le prompt de vérification. Examinez la source avant de l'exécuter.
npx skills add https://github.com/live-codes/livecodes --skill livecodesLa commande reste sur une seule ligne. Faites défiler horizontalement pour la vérifier avant de la copier.
Vous préférez une copie locale ? Téléchargez les fichiers actuellement disponibles dans SkillsMP.
Télécharger Zip Téléchargement... Plus depuis ce dépôt Use SDK methods to interact with playgrounds: run, getCode, setConfig, getConfig, watch, runTests, format, getShareUrl, show, destroy. Load this skill when programmatically controlling embedded playgrounds, reacting to code changes, or retrieving compiled output.
Open-source, client-side code playground supporting 90+ languages/frameworks. Runs entirely in the browser with SDK for embedding. Entry point for all LiveCodes skills.
livecodes-framework-wrappers Use SDK with React, Vue, Svelte, Solid, Preact, and Web Components. sdkReady callback pattern, reactive props, and framework-specific setup. Load this skill when embedding LiveCodes in a framework application.
Métiers associés SOC
Basé sur la classification professionnelle SOC
name livecodes/gh-action description Use the "Preview in LiveCodes" GitHub Action to generate preview playground links for pull request code changes. Automates playground creation and PR comments.
type composition library livecodes library_version 0.13.0 requires [] sources ["live-codes/preview-in-livecodes:README.md","live-codes/livecodes:docs/docs/gh-action.mdx"]
LiveCodes — GitHub Action: Preview in LiveCodes
The Preview in LiveCodes GitHub Action generates preview links to LiveCodes playgrounds for code changes in pull requests and posts them as PR comments.
Use case: Library authors can preview changes in the playground before merging PRs.
How It Works
PR is created or updated
Action optionally installs dependencies and builds the project
Action scans .livecodes/ folder for playground configurations
Generates playground URLs with your new code
Posts comment with preview links to the PR
Setup
Two Required Workflow Files The action requires two workflow files that must be merged to the default branch first.
1. Trigger workflow .github/workflows/livecodes-preview.yml:
name: livecodes
on: [pull_request ]
jobs:
build_and_prepare:
runs-on: ubuntu-latest
name: Generate Playgrounds
steps:
- name: Checkout
uses: actions/checkout@v3
- name: Build and generate
uses: live-codes/preview-in-livecodes@v1
with:
2. Comment workflow .github/workflows/livecodes-post-comment.yml:
name: comment
on:
workflow_run:
workflows: ['livecodes' ]
types:
- completed
jobs:
upload:
runs-on: ubuntu-latest
permissions:
pull-requests: write
if: >
github.event.workflow_run.event == 'pull_request' &&
github.event.workflow_run.conclusion == 'success'
steps:
- uses: live-codes/pr-comment-from-artifact@v1
with:
GITHUB_TOKEN: ${{ github.token }}
Two separate workflows are needed because each runs in a different security context. See GitHub security article for details.
Action Inputs Input Required Description install-commandNo Install command (e.g., npm install) build-commandNo Build command (e.g., npm run build) base-urlNo Base URL for deployed assets. Supports dynamic values. artifactNo Artifact name (default: pr) GITHUB_TOKENNo GitHub token (default: ${{ github.token }})
Action Outputs Output Description messageMarkdown message with preview links for PR comment
Configure Playgrounds Create JSON files in .livecodes/ folder. Each file becomes a playground link.
Example Configure Project JSON .livecodes/hello-world.json:
{
"title" : "JavaScript Starter" ,
"markup" : {
"language" : "html" ,
"content" : "<h1>Hello, World!</h1>"
} ,
"script" : {
"language" : "javascript" ,
"content" : "import { demo } from 'my-lib';\n\ndemo();"
} ,
"imports" : {
"my-lib" : "{{LC::TO_DATA_URL(./index.js)}}"
}
}
The title property becomes the playground name in the message. If omitted, filename is used.
Dynamic Values Use these placeholders in project JSON and base-url:
Placeholder Description {{LC::REF}}Branch or tag name of PR head {{LC::SHA}}Full commit SHA {{LC::SHORT_SHA}}Short SHA (first 7 characters) {{LC::PR}}Pull request number {{LC::REPO}}Repository name
File Placeholders (project JSON only) Placeholder Description {{LC::TO_URL(./file.js)}}URL of file with base-url prepended {{LC::TO_DATA_URL(./file.js)}}File converted to data URL (for small files)
Using Newly Added Code in Playgrounds Three strategies to make PR code available to playgrounds:
1. Deploy to Preview URL (Recommended) Use Cloudflare Pages or Netlify for automatic preview deployments.
base-url: 'https://{{LC::REF}}.my-project.pages.dev'
{
"imports" : {
"my-lib" : "{{LC::TO_URL(./dist/index.js)}}"
}
}
2. Use CDN Mirroring GitHub Link to files via jsDelivr or similar:
base-url: 'https://cdn.jsdelivr.net/gh/{{LC::REPO}}@{{LC::SHA}}/'
3. Data URLs (Small Files Only) Encode files directly. Stored at dpaste.com (limit: 1M chars, expires after 365 days).
{
"imports" : {
"my-lib" : "{{LC::TO_DATA_URL(./index.js)}}"
}
}
Common Mistakes
HIGH Workflow files not on default branch The workflow files must be merged to the default branch (e.g., main) before the action can be triggered by PRs.
git checkout main
git merge feature/add-gh-action
git push
Source: GitHub Actions documentation on workflow_run event
MEDIUM Missing permissions for PR comments The comment workflow needs pull-requests: write permission.
jobs:
upload:
permissions:
pull-requests: write
MEDIUM Using data URLs for large files Data URLs are limited to ~1M characters at dpaste.com. Large builds will fail.
{
"imports" : {
"my-lib" : "{{LC::TO_DATA_URL(./dist/bundle.js)}}"
}
}
base-url: 'https://{{LC::REF}}.my-project.pages.dev'
Example PR Comment Output ## Preview in LiveCodes
**Latest commit:** abc1234
**Last updated:** Jan 15, 2024 3pm (UTC)
| Playground | Link |
| :------------: | ------------------------------------------------------------------ |
| **JavaScript** | [https://livecodes.io?x=code/... ](https://livecodes.io?x=code/... ) |
| **React** | [https://livecodes.io?x=code/... ](https://livecodes.io?x=code/... ) |
See [documentations ](https://github.com/live-codes/preview-in-livecodes ) for usage instructions.
Related Skills
import-export - Understanding project configuration objectsself-hosting - Using custom appUrl for self-hosted playgrounds 