Parque de HTML
Pega HTML, CSS y JS y ve la salida en vivo al instante, igual que JSFiddle.
La vista previa aparece aquí
Aún sin salida
Casos de uso
El HTML Playground es un entorno de pruebas en el navegador para HTML, CSS y JavaScript. Úsalo para experimentos rápidos, depurar fragmentos, comprobar diseños responsivos y compartir un ejemplo funcional. Aquí tienes formas prácticas de sacarle el máximo partido:
-
Pegar un archivo HTML completo
Cambia al modo "Archivo único" y pega un documento .html completo con bloques <style> y <script> integrados para ver exactamente cómo se renderiza, sin división manual.
-
Paneles separados de HTML / CSS / JS
Redacta la marca, los estilos y el comportamiento en tres paneles claramente separados y activa el modo "Separado" para ver cómo se actualiza la salida ensamblada en vivo.
-
Vista previa en vivo (con retardo)
Escribe en cualquier editor y la vista previa se actualiza automáticamente tras un breve retardo, para que iteres rápidamente sin pulsar un botón tras cada edición.
-
Ver la salida de la consola
Cuando tu JavaScript registra valores o lanza un error, el panel de consola plegable muestra la salida de registro, advertencia y error, además de las excepciones no capturadas, con una acción de limpieza en un clic.
-
Vista previa por ancho de dispositivo y exportar
Comprueba el diseño móvil con el selector de ancho de dispositivo y luego Copia el HTML autónomo al portapapeles o Descarga un único archivo .html autónomo para compartir.
Preguntas Frecuentes
- ¿Cómo uso esta aplicación?
- Elige entre "Separado" (editar HTML, CSS y JS en sus propios paneles) o "Archivo único" (pegar un documento HTML completo), escribe o pega tu código y la vista previa se actualiza automáticamente. Usa el botón Ejecutar para actualizar manualmente, el panel de consola para ver errores y Copiar/Descargar para exportar el resultado.
- ¿Puedo pegar un archivo HTML completo con CSS y JS dentro?
- Sí. En el modo "Archivo único", pega el documento HTML completo, incluidos sus bloques <style> y <script>, y se renderiza tal cual.
- ¿Qué pasa con mi código?
- Tu código se queda en tu navegador. Solo se renderiza dentro de una vista previa aislada en esta página y se guarda localmente en tu navegador para que puedas retomar donde lo dejaste. La aplicación no sube tu código a un servidor.
- ¿Por qué mi código no se ejecuta o muestra un error?
- Abre el panel de consola para ver el error o la advertencia exacta. Las causas habituales son errores de sintaxis de JavaScript, elementos que faltan a los que hace referencia tu código, o scripts que requieren un recurso de red. Corrige el error resaltado y la vista previa se actualiza automáticamente.
- ¿Puedo guardar o compartir mi trabajo?
- Sí. Usa Copiar para poner el HTML autónomo en tu portapapeles, o Descargar para guardar un único archivo .html que puedes abrir o compartir. Tu código también se recuerda localmente entre visitas hasta que pulses Limpiar.