Playground de HTML CSS JS

Escribe, ejecuta y comparte fragmentos de código, sin instalaciones.

Vista previaVista previa autom?tica

Consola

La salida de la consola aparecer? aqu?.

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Gradient Preview</title>
        <style>
            body { margin: 0; min-height: 100vh; display: grid; place-items: center;
                font-family: system-ui, sans-serif; }
            .card {
                width: 280px;
                height: 280px;
                border-radius: 24px;
                background: linear-gradient(135deg, #6c8cff 0%, #b18cff 60%, #ff8ab0 100%);
                box-shadow: 0 20px 40px rgba(108, 140, 255, 0.35);
                display: grid; place-items: center;
                color: white; font-size: 18px; font-weight: 600;
            }
        </style>
    </head>
    <body><div class="card">Linear gradient</div></body>
</html>

Construye HTML, CSS y JavaScript con vista previa en vivo

Un playground online y gratuito de HTML, CSS y JavaScript con vista previa real en el navegador. Edita tres archivos - index.html, styles.css y script.js - y el iframe se vuelve a renderizar con cada cambio. Sin servidor local, sin extensión Live Server, sin build.

El editor usa el mismo motor que VS Code, así que las etiquetas HTML, las propiedades CSS y el autocompletado de JS funcionan sin problema. La vista previa en vivo renderiza tu página dentro de un iframe aislado en tu navegador. Útil para bocetar una landing, experimentar con CSS grid o escribir scripts vanilla del DOM.

Por qué este playground de HTML, CSS y JavaScript te va a servir

Vista previa en vivo al instante - edita HTML, CSS o JS y el iframe se vuelve a renderizar con cada cambio. Sin build, sin refrescar.
Resaltado de sintaxis y autocompletado para HTML, CSS y JavaScript. Atajos tipo Emmet y feedback inmediato, todo sobre el mismo motor de editor que usa VS Code.
Cero instalación: sin Node, sin Live Server, sin servidor HTTP local. Previsualiza HTML, CSS y JS desde cualquier navegador.
Vista previa en vivo con los tres archivos - HTML, CSS y JavaScript se editan juntos y se renderizan en un iframe con cada cambio, sin build.

Qué puedes construir en el playground de HTML, CSS y JavaScript

Una landing page: HTML estructurado, CSS moderno (grid, flex, custom properties) y un toque de JavaScript, todo con recarga en vivo en el iframe de vista previa.
Experimentos con CSS: layouts con grid, alineación con flex, animaciones y media queries responsivas, con feedback visual inmediato en cada cambio.
Scripting del DOM con JavaScript vanilla: querySelector, event listeners, llamadas fetch, localStorage, con vista previa del navegador en vivo para feedback inmediato.

Preguntas frecuentes sobre el playground de HTML, CSS y JavaScript

¿Es gratis el playground de HTML, CSS y JavaScript online?

Sí, el playground de HTML, CSS y JavaScript es de uso gratuito. Sin registro, sin servidor local y sin la extensión Live Server de VS Code - solo escribe y previsualiza.

¿Necesito un servidor local o Live Server de VS Code?

No hace falta instalar nada. No necesitas Live Server de VS Code, un servidor HTTP local ni Node. El navegador previsualiza tus archivos HTML, CSS y JS directamente en un iframe.

¿Funciona el playground de HTML, CSS y JavaScript en móvil?

Sí. El playground de HTML, CSS y JavaScript funciona en navegadores de escritorio, tablet y móvil. El editor, el iframe de vista previa y las pestañas de archivos se adaptan a pantallas pequeñas.

¿Es seguro previsualizar HTML y JavaScript aquí?

S?. Tu HTML, CSS y JavaScript se renderizan dentro de un iframe de vista previa aislado en tu navegador, separado de la p?gina de Coddy que lo contiene.

¿Cómo aprendo HTML, CSS y JavaScript después de probar el playground?

Ajusta el HTML, CSS y JS de ejemplo, presiona Ejecutar y mira cómo se actualiza la vista previa. Cuando quieras algo más estructurado, los cursos interactivos de HTML, CSS y JavaScript de Coddy te llevan desde los selectores hasta páginas completas.

Herramientas útiles para Web

Herramientas gratuitas basadas en el navegador que complementan el Playground de Web - todo parte de Coddy.

Ver todas las herramientas Hoja de Referencia de Web