Playground React
Ce playground React en ligne exécute vos composants dans votre navigateur. Modifiez App.jsx et l'app se met à jour pendant que vous tapez, avec React 18 et Tailwind CSS dans le modèle de départ, et les paquets npm à portée de clic. Rien à installer et pas besoin de compte pour commencer ; connectez-vous pour enregistrer et partager. Il fait partie de Playcode Classic, les outils de code gratuits de Playcode.
Gratuit. Pas besoin de compte pour commencer.

Modifiez un composant. L'app suit.
L'aperçu se reconstruit un instant après votre frappe. Chaque modification recharge l'app : son état repart de zéro.

Partez de la stack que vous utilisez
- ReactJSX, hooks et Tailwind CSS.Ouvrir
- React et TypeScriptDes composants typés, vérifiés pendant que vous écrivez.Ouvrir
- Redux ToolkitUn store avec des slices.Ouvrir
- MobXUn état observable.Ouvrir
- Framer MotionDe l'animation en quelques lignes.Ouvrir
- MUIDes composants Material.Ouvrir
Importez depuis npm.
Importez un paquet, choisissez une version et installez-le d'un clic.
Vous avez un fichier .jsx ?
Collez-le dans un fichier et affichez-le depuis index.jsx.
Quand l'app a besoin d'un serveur
Le playground tourne dans votre navigateur : pas de serveur, pas de Next.js, pas de React Native. Quand une app a besoin d'un backend, d'une base de données et de son propre domaine, Playcode AI la crée et Playcode Cloud la fait tourner, avec un forfait payant.

Un outil Playcode Classic
Playcode a vu le jour en 2016 sous la forme d'un environnement de développement dans le navigateur. Ce playground est l'un de ses outils de code gratuits, que nous appelons aujourd'hui Playcode Classic.
Aujourd'hui, Playcode est une plateforme IA pour créer et faire tourner des sites web et des apps.

Questions fréquentes
Cet éditeur React en ligne est-il gratuit ?
Oui. Écrire du code et le prévisualiser est gratuit et ne demande aucun compte. Un compte gratuit permet de garder jusqu'à trois projets enregistrés, publics ou privés ; un domaine personnalisé nécessite un forfait payant, et le chat IA consomme des crédits.
Quelle version de React utilise-t-il ?
React 18.3.1 dans chaque modèle de départ. La version vient de package.json.
Puis-je exécuter du code React en ligne sans rien installer ?
Oui. Le playground est un bac à sable React dans votre navigateur, et il fonctionne comme un compilateur React en ligne : écrivez un composant, il s'affiche pendant que vous tapez. Aucun projet à configurer.
Prend-il en charge JSX et TypeScript ?
Oui. Les fichiers .jsx et .tsx se compilent dans l'aperçu ; le modèle React et TypeScript vérifie vos types pendant que vous écrivez.
Puis-je utiliser des paquets npm ?
Oui. Importez un paquet, choisissez une version et installez-le, ou ajoutez-le depuis le panneau Paquets npm.
Le hot reload est-il pris en charge ?
L'app se met à jour pendant que vous tapez, mais chaque modification la recharge : son état repart de zéro. Il n'y a pas encore de Fast Refresh.
Puis-je utiliser Tailwind CSS ou les CSS Modules ?
Tailwind CSS est inclus dans le modèle de départ. Les CSS Modules fonctionnent avec des fichiers .module.css ; les fichiers .module.scss ne sont pas encore pris en charge.
Puis-je développer avec Next.js ou React Native ici ?
Non. Le playground exécute React dans votre navigateur. Pour une app avec un serveur et une base de données, Playcode AI la crée et Playcode Cloud la fait tourner, avec un forfait payant.
Puis-je ouvrir un fichier .jsx ?
Oui. Collez-le dans un fichier du modèle React et affichez-le depuis index.jsx.
Puis-je partager mon playground ?
Oui. Connectez-vous et enregistrez le projet. Dans son onglet Partager, réglez « Toute personne avec le lien » sur « Peut consulter », puis copiez le lien.
Ce playground fait-il partie de Playcode ?
Oui. Ce playground fait partie de Playcode Classic, les outils de code gratuits de Playcode. Playcode a vu le jour en 2016 sous la forme d'un environnement de développement dans le navigateur. C'est aujourd'hui une plateforme IA pour créer et faire tourner des sites web et des apps.
D'autres outils de code gratuits
- Playground JavaScript
HTML, CSS et JavaScript avec aperçu en direct.
- Playground TypeScript
Du TypeScript dans une page en direct.
- Playground Vue
Des composants monofichiers, en direct.
- Playground Tailwind
Classes utilitaires, aperçu instantané.
- Compilateur JavaScript
Exécutez du JavaScript, lisez la console.
Écrivez un composant. Voyez-le tourner.
