LiveCodes : un terrain de jeu de code côté client
live-codes/livecodes offre une implémentation open source exploitable en conditions réelles avec une structure réutilisable.
En bref
- De quoi s’agit-il ?
- Terrain de jeu de code open source qui s'exécute dans le navigateur, avec SDK pour l'incorporation.
- À qui s’adresse-t-il ?
- LiveCodes documente une approche côté client sans configuration de serveur, et son SDK offre un moyen d'intégrer des terrains de jeu dans d'autres pages.
- Puis-je l’utiliser commercialement ?
- Oui. MIT est une licence permissive : vous pouvez utiliser, modifier et vendre un logiciel qui en dépend, à condition de conserver les mentions de droit d’auteur et de licence.
- Est-il encore maintenu ?
- Oui. Les derniers commits datent d’il y a 1 jour.
- En quel langage est-il écrit ?
- Principalement TypeScript, d’après les statistiques de langage de GitHub.
Ces réponses reposent sur les données GitHub du projet (dernière synchronisation le 14 septembre 2026) et sur notre analyse. Elles ne constituent pas un avis juridique.
ANALYSE OPEN SOURCE APPROFONDIE
Un terrain de jeu côté client pour de nombreux langages
LiveCodes est un terrain de jeu de code open source qui s'exécute entièrement dans le navigateur. Le README le décrit comme côté client et liste la prise en charge de React, Vue, Svelte, Solid, TypeScript, Python, Go, Ruby, PHP et plus de 90 langues et frameworks. Il n'y a aucun serveur à configurer, aucune base de données à maintenir, aucune installation, aucun fichier de configuration et aucune étape de construction. Comme tout se passe côté client, l'utilisation n'est pas liée à un compte, et le README indique qu'il n'y a pas de limites d'utilisation et des projets privés illimités. La seule exception est qu'un compte GitHub est requis pour les fonctionnalités qui utilisent l'intégration GitHub.
Trois façons de commencer : autonome, intégré, auto-hébergé
Le README décrit trois points d'entrée. L'application autonome est disponible sur livecodes.io et ne nécessite rien de plus que d'ouvrir la page. Pour l'intégration, le README montre une balise script qui importe createPlayground depuis le CDN npm et passe un sélecteur de conteneur ainsi qu'une configuration. Pour l'auto-hébergement, le chemin recommandé est de télécharger une version et de la placer sur un serveur de fichiers statique ; la documentation inclut une configuration intégrée pour GitHub Pages. Le README note que des services d'hébergement statique tels que Cloudflare Pages, Netlify, Firebase et GitHub Pages sont des options gratuites.
Le SDK pour intégrer et contrôler les terrains de jeu
Le SDK est un package npm (également disponible sur jsr) qui fournit une interface pour créer et communiquer avec les terrains de jeu. L'installation est indiquée comme npm i livecodes. Un exemple JavaScript importe createPlayground et passe un conteneur et un objet de configuration avec le langage de balisage et le contenu. Le SDK est agnostique au framework, et des composants d'emballage existent pour React, Vue, Svelte, Solid, Preact et les composants web. Il fournit également une fonction getPlaygroundUrl pour générer des liens partageables. Le README mentionne le support TypeScript pour la sécurité des types.
Points saillants de la liste des fonctionnalités
Le README énumère un large éventail de fonctionnalités, notamment un éditeur puissant, la compatibilité mobile, les ressources externes, la résolution de modules depuis npm, deno.land/x, jsr et GitHub, le pré-remplissage de code, l'import/export de projets, le partage, l'intégration, les modes d'affichage, le déploiement, les modèles de démarrage, les actifs, les thèmes, les outils de développement (console, visionneuse de code compilé, exécuteur de tests), le formatage de code, IntelliSense, le mode lite, le mode lecture seule, la diffusion, la synchronisation, la sauvegarde/restauration et un système de configuration. Il met également l'accent sur la confidentialité et la sécurité, mais le README ne fournit pas de détails techniques sur la mise en œuvre. Le projet renvoie à la liste complète des fonctionnalités dans sa documentation.
Documentation et canaux de mise à jour
Le projet maintient une documentation sur livecodes.io/docs, couvrant les fonctionnalités, la prise en main, la configuration et le SDK. La documentation comprend des démos, des exemples de code, des captures d'écran, un Storybook et des types TypeScript. Pour les mises à jour, le README pointe vers un compte Twitter/X (@livecodes_io), un blog et une version de développement sur dev.livecodes.io. Il fournit également des fichiers llms.txt et llms-full.txt pour les agents IA, conformément à la spécification llms.txt.
Contribution, retour et rapports de sécurité
Le README accueille les contributions et renvoie à un guide de contribution et à une documentation système. Pour les retours, il demande aux utilisateurs d'ouvrir un nouveau problème ou une discussion sur GitHub. Les rapports de sécurité sont dirigés vers un fichier SECURITY.md. Le projet fournit également un formulaire de contact. Le README crédite une liste de services fournissant une infrastructure, notamment Cloudflare Pages, jsDelivr, esm.sh, unpkg, DigitalOcean, bundlejs, dpaste, GitHub, Netlify, SonarCloud, Codacy, BrowserStack et Lokalise.
Licence et paquets tiers
LiveCodes est publié sous licence MIT, copyright Hatem Hosny. La licence accorde la permission d'utiliser, copier, modifier, fusionner, publier, distribuer, sous-licencier et vendre des copies, à condition que l'avis de droit d'auteur soit inclus. Le logiciel est fourni tel quel, sans garantie. Le README indique que les paquets tiers et leurs licences sont listés dans vendor-licenses.md. Le projet propose également une page de sponsor, mais le README ne spécifie aucun détail financier.
Conclusion éditoriale
LiveCodes documente une approche côté client sans configuration de serveur, et son SDK offre un moyen d'intégrer des terrains de jeu dans d'autres pages.
Notes de la communauté