Empezar a crear

Playcode Classic

Playground de React online

Este playground de React online ejecuta tus componentes en tu navegador. Edita App.jsx y la app se actualiza mientras escribes, con React 18 y Tailwind CSS en la plantilla inicial y los paquetes de npm a un clic. No tienes que instalar nada ni crear una cuenta para empezar; inicia sesión para guardar y compartir. Forma parte de Playcode Classic, las herramientas de código gratuitas de Playcode.

Abrir el playground

Gratis. No necesitas cuenta para empezar.

En el arenero de un parque infantil, un joven desarrollador y Play arman una app con grandes bloques de construcción sobre una base; Play encaja la última pieza, un botón naranja, y un cohete espera al otro lado de la cerca.

Edita un componente. La app te sigue el ritmo.

La vista previa se vuelve a compilar un instante después de que escribes. Cada cambio recarga la app, así que su estado empieza de cero.

¿Necesitas un sitio web completo y no solo un componente? Prueba el creador de sitios web con IA
En un pequeño teatro de marionetas del parque infantil, Play mueve los hilos desde arriba, y la marioneta en escena, una pequeña página web con brazos, saluda mientras el joven desarrollador mira desde un banco.

Empieza con el stack que usas

Importa desde npm.

Importa un paquete, elige una versión e instálalo.

¿Tienes un archivo .jsx?

Pégalo en un archivo y renderízalo desde index.jsx.

Cuando la app necesita un servidor

El playground se ejecuta en tu navegador: sin servidor, sin Next.js, sin React Native. Cuando una app necesita un backend, una base de datos y su propio dominio, Playcode AI la crea y Playcode Cloud la pone en marcha, con un plan de pago.

Conoce Playcode Cloud
En el arenero hay un cohete de juguete hecho con bloques; al otro lado de la cerca, el cohete de verdad espera en su plataforma, conectado a una línea de combustible, y Play se lo presenta al joven desarrollador con la palma abierta.

Parte de Playcode Classic

Playcode nació en 2016 como un entorno de programación en el navegador. Este playground es una de sus herramientas de código gratuitas, a las que hoy llamamos Playcode Classic.

Hoy, Playcode es una plataforma de IA para crear y poner en marcha sitios web y apps.

Descubre el creador de sitios web con IATodas las herramientas de Playcode Classic
Play está junto a la puerta abierta de un viejo parque infantil y muestra lo que hay al otro lado: un cohete listo en su plataforma de lanzamiento.

Preguntas frecuentes

  • ¿Este editor de React online es gratis?

    Sí. Escribir código y ver la vista previa es gratis, y no necesitas cuenta. Una cuenta gratuita guarda hasta tres proyectos, públicos o privados; un dominio propio requiere un plan de pago, y el chat de IA consume créditos.

  • ¿Qué versión de React usa?

    React 18.3.1 en todas las plantillas. La versión se define en package.json.

  • ¿Puedo ejecutar código React online sin instalar nada?

    Sí. El playground es un sandbox de React en tu navegador y funciona como un compilador de React online: escribe un componente y se renderiza mientras tecleas. No hay ningún proyecto que configurar.

  • ¿Es compatible con JSX y TypeScript?

    Sí. Los archivos .jsx y .tsx se compilan en la vista previa; la plantilla de React y TypeScript revisa tus tipos mientras escribes.

  • ¿Puedo usar paquetes de npm?

    Sí. Importa un paquete, elige una versión e instálalo, o añádelo desde el panel de paquetes.

  • ¿Tiene hot reload?

    La app se actualiza mientras escribes, pero cada cambio la recarga, así que el estado se reinicia. Todavía no hay Fast Refresh.

  • ¿Puedo usar Tailwind CSS o CSS Modules?

    Tailwind CSS viene en la plantilla inicial. CSS Modules funciona con archivos .module.css; .module.scss todavía no es compatible.

  • ¿Puedo crear con Next.js o React Native aquí?

    No. El playground ejecuta React en tu navegador. Para una app con servidor y base de datos, Playcode AI la crea y Playcode Cloud la pone en marcha, con un plan de pago.

  • ¿Puedo abrir un archivo .jsx?

    Sí. Pégalo en un archivo de la plantilla de React y renderízalo desde index.jsx.

  • ¿Puedo compartir mi playground?

    Sí. Inicia sesión y guarda el proyecto. En su pestaña Compartir, cambia “Cualquiera con el enlace” a “Puede ver” y copia el enlace.

  • ¿Este playground es parte de Playcode?

    Sí. Este playground forma parte de Playcode Classic, las herramientas de código gratuitas de Playcode. Playcode nació en 2016 como un entorno de programación en el navegador. Hoy es una plataforma de IA para crear y poner en marcha sitios web y apps.

Más herramientas de código gratuitas

Escribe un componente. Míralo funcionar.

Abrir el playground
Un cohete espera con la puerta abierta y un asiento libre, y Play te invita a subir. Muy arriba, otro cohete se aleja.