Previsualizador HTML

Previsualizador HTML - Sandbox Editor HTML CSS JavaScript Online

Un previsualizador HTML y entorno sandbox profesional para probar código HTML, CSS y JavaScript en tiempo real. Presenta editor de pantalla dividida, vista previa en vivo, salida de consola, modo pantalla completa, plantillas y más. Perfecto para aprender desarrollo web, prototipos, probar fragmentos de código y compartir ejemplos.

¿Qué es un Previsualizador HTML/Sandbox?

Un Previsualizador HTML (también llamado sandbox o playground) es un entorno interactivo donde puede escribir y probar código HTML, CSS y JavaScript con retroalimentación visual instantánea. Es útil para:

- Aprender desarrollo web
- Probar fragmentos de código
- Prototipos de diseños
- Depurar problemas de HTML/CSS
- Compartir ejemplos de código
- Experimentar con nuevas características
- Demos rápidas y pruebas de concepto

Similar a CodePen, JSFiddle y otros editores de código online, pero más simple y se ejecuta completamente en su navegador.

¿Cómo uso este Previsualizador HTML?

Usar el previsualizador es simple:

1. Elija una pestaña: HTML, CSS o JavaScript
2. Escriba su código en el editor
3. Haga clic en 'Ejecutar Código' o habilite 'Auto-ejecutar' para vista previa instantánea
4. Vea el resultado en el panel de Vista Previa
5. Revise la pestaña Consola para logs y errores de JavaScript
6. Use plantillas para comenzar rápidamente
7. Active pantalla completa para espacio de trabajo más grande

Consejos:
- Habilite Auto-ejecutar para actualizaciones en tiempo real mientras escribe
- Use plantillas para aprender patrones comunes
- Revise Consola para errores de JavaScript
- Descargue su código cuando termine

¿Cuáles son las características del editor?

El editor se enfoca en un flujo de trabajo rápido y sin fricción:

Edición de Código:
- Pestañas separadas de HTML, CSS y JavaScript
- La tecla Tab inserta una sangría de 4 espacios
- Ctrl/Cmd+Enter ejecuta el código
- Auto-guardado en su navegador (localStorage) para que el trabajo sobreviva a una recarga

Características de Vista Previa:
- Vista previa en vivo en un iframe aislado y sandboxed
- Ejecución auto o manual
- Consola en vivo que captura logs y errores de tiempo de ejecución
- Barra de viewport responsive (Móvil 375px, Tableta 768px, Escritorio o ancho personalizado)
- Modo vista previa en pantalla completa

Opciones de Diseño:
- División horizontal (editor y vista previa lado a lado)
- División vertical (editor arriba, vista previa abajo)

Otras Características:
- Plantillas pre-construidas
- Librerías externas vía CDN (CSS y JavaScript)
- Descargar como un único archivo HTML completo

¿Cómo pruebo breakpoints responsive / cambio el ancho del viewport?

Use la barra de viewport encima de la vista previa. Haga clic en Móvil (375px), Tableta (768px) o Escritorio (ancho completo), o escriba cualquier ancho personalizado en píxeles y haga clic en Aplicar. El iframe de vista previa se limita a ese ancho y se centra, para que pueda revisar breakpoints responsive y media queries sin redimensionar todo el navegador. El ancho elegido se recuerda para la próxima vez.

¿Puedo usar librerías externas?

¡Sí! Puede usar librerías externas incluyéndolas en su HTML:

Librerías CSS:
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

Librerías JavaScript:
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

CDNs comunes:
- jsDelivr: cdn.jsdelivr.net
- cdnjs: cdnjs.cloudflare.com
- unpkg: unpkg.com

Puede incluir:
- Frameworks CSS (Bootstrap, Tailwind, Bulma)
- Librerías JavaScript (jQuery, Vue, React)
- Librerías de iconos (Font Awesome)
- Cualquier recurso CDN público

¿Cuál es la diferencia entre Auto-ejecutar y Ejecutar manual?

Hay dos modos de ejecución disponibles:

Auto-ejecutar (Tiempo real):
- El código se ejecuta automáticamente mientras escribe
- Actualizaciones de vista previa instantáneas
- Genial para experimentos rápidos
- Actualiza con pequeño retraso (debounced)
- Puede ralentizar con código complejo
- Mejor para trabajo HTML/CSS

Ejecución Manual:
- El código se ejecuta solo cuando hace clic en 'Ejecutar Código'
- Más control sobre ejecución
- Mejor rendimiento para código complejo
- Previene bucles infinitos accidentales
- Mejor para desarrollo JavaScript
- Recomendado para aprender

Puede alternar entre modos en cualquier momento usando la casilla Auto-ejecutar.

¿Cómo funciona la Consola?

La pestaña Consola captura salida de JavaScript:

Qué muestra:
- Salida de console.log()
- Mensajes de console.error()
- Advertencias de console.warn()
- Información de console.info()
- Errores y excepciones de tiempo de ejecución

Características:
- Tipos de mensaje codificados por color (log, error, warn)
- Marcas de tiempo para cada mensaje
- Botón limpiar consola
- Preserva historial durante sesión
- Muestra números de línea de error

Ejemplos:
console.log('Hello World');
console.error('This is an error');
console.warn('Warning message');

La consola le ayuda a depurar código JavaScript y ver qué está haciendo su código.

¿Por qué no aparece mi console.log?

Ahora sí aparece. La vista previa inyecta un gancho de consola antes de que se ejecute cualquier JavaScript suyo, así que incluso un console.log('x') simple en el nivel superior sin setTimeout se captura y se muestra en la pestaña Consola. Si aún no ve nada: asegúrese de que su código esté en la pestaña JavaScript (no comentado), haga clic en Ejecutar Código (o habilite Auto-ejecutar) y luego abra la pestaña Consola. Los errores no capturados se muestran en rojo con su número de línea.

¿Cómo depuro errores de JavaScript con números de línea?

Cualquier error no capturado o rechazo de promesa no manejado se reporta en la pestaña Consola en rojo, precedido por el número de línea donde se lanzó (por ejemplo, 'Error at line 12: ...'). Escriba su script en la pestaña JavaScript, ejecútelo y luego cambie a Consola. La insignia de error en la pestaña Consola también muestra cuántos errores produjo la última ejecución, y se borra automáticamente en la siguiente ejecución limpia.

¿Soporta módulos ES, async/await y fetch?

Sí. async/await, las Promesas y la API fetch() funcionan porque su código se ejecuta en un iframe real del navegador. Las solicitudes de red están sujetas a la política CORS del servidor de destino, igual que cualquier página web. Para módulos ES, agregue type="module" a su propia etiqueta script dentro del panel HTML (el panel JavaScript auto-inyectado se ejecuta como script clásico). Los módulos ES externos pueden cargarse desde un CDN que ofrezca compilaciones +esm, como jsDelivr.

¿Qué características y limitaciones debo conocer?

Soportado:
- HTML, CSS y JavaScript en vivo con vista previa instantánea
- Consola en vivo (logs, advertencias, errores con números de línea)
- Librerías externas CSS y JavaScript desde cualquier CDN público
- Anchos de viewport responsive (Móvil, Tableta, Escritorio, px personalizado)
- Descargar el resultado como un único archivo HTML autónomo
- Auto-guardado en localStorage

Limitaciones:
- La vista previa se ejecuta en un iframe sandboxed (flags sandbox: allow-scripts, allow-modals, allow-forms, allow-popups, allow-same-origin). Algunas APIs del navegador que requieren un origen de nivel superior completo pueden estar restringidas.
- Las solicitudes de origen cruzado siguen obedeciendo CORS.
- No hay guardado en nube ni URL para compartir; use Descargar para conservar o compartir su fragmento.

¿Puedo guardar o compartir mi código?

Puede guardar y compartir su trabajo:

Opciones de Guardar:
- Descargar como archivo HTML completo (incluye CSS y JS)
- Copiar código al portapapeles
- Guardar manualmente en su navegador (Ctrl+S funciona en editores)
- Usar localStorage del navegador (el código persiste al actualizar)

Compartir:
- Copiar código y compartir vía email, chat, etc.
- Descargar y adjuntar a mensajes
- Incluir en documentación
- Pegar en otras herramientas

Nota: Esta herramienta no proporciona almacenamiento en nube ni URLs para compartir. Para compartir hospedado permanentemente, use plataformas como CodePen, JSFiddle o GitHub Gists.

¿Qué son las Plantillas?

Las plantillas son ejemplos de código pre-construidos para ayudarle a comenzar:

Plantillas Disponibles:
- En Blanco: Editor vacío para comenzar desde cero
- HTML Básico: Estructura HTML5 simple
- Inicio Bootstrap: Configuración de framework Bootstrap 5
- Diseño Flexbox: Ejemplo de CSS Flexbox
- CSS Grid: Ejemplo de diseño grid moderno
- Animación CSS: Demo de animación interactiva

Las plantillas son geniales para:
- Aprender nuevos conceptos
- Comenzar proyectos rápidamente
- Entender patrones de código
- Probar frameworks
- Obtener inspiración

Puede cargar una plantilla y modificarla según sus necesidades.

¿Mi código está seguro y privado?

Sí, su código es completamente seguro y privado:

- Todo el código se ejecuta completamente en su navegador
- Ningún código se envía a ningún servidor
- No almacenamos, registramos ni rastreamos su código
- Sin almacenamiento en nube ni bases de datos
- Sin analíticas sobre contenido de código
- Funciona offline después de la carga de página

Características de seguridad:
- La vista previa se ejecuta en iframe sandboxed
- Acceso limitado a página padre
- Sin acceso a su sistema de archivos
- JavaScript se ejecuta en contexto aislado

Mejores prácticas:
- No incluya claves API o contraseñas reales
- Pruebe con datos de ejemplo
- Tenga cuidado con entrada de usuario
- Valide y sanitice datos

La herramienta está diseñada para experimentación y aprendizaje seguros.

¿Cuáles son los atajos de teclado?

Atajos de teclado útiles:

Edición:
- Tab: Insertar una sangría de 4 espacios
- Ctrl/Cmd+A: Seleccionar todo
- Ctrl/Cmd+C: Copiar
- Ctrl/Cmd+V: Pegar
- Ctrl/Cmd+Z: Deshacer
- Ctrl/Cmd+Y: Rehacer

Ejecución:
- Ctrl/Cmd+Enter: Ejecutar código (cuando el foco está en un editor)

Nota: Algunos atajos a nivel de navegador pueden variar según el navegador y el sistema operativo.

Características Clave

• Escribir HTML, CSS y JavaScript en editores con pestañas
• Vista previa en vivo con actualizaciones instantáneas
• Modo auto-ejecutar para vista previa en tiempo real
• Modo ejecución manual para ejecución controlada
• Diseño de pantalla dividida (horizontal o vertical)
• Vista previa responsive de viewport (Móvil 375px, Tableta 768px, Escritorio, ancho personalizado)
• Modo vista previa en pantalla completa
• Consola en vivo que captura logs, advertencias y errores con números de línea
• Múltiples plantillas pre-construidas
• Librerías externas CDN (CSS y JavaScript)
• Descargar como un único archivo HTML completo
• Auto-guardado en localStorage del navegador
• Iframe sandboxed para ejecución segura
• Soporte de modo oscuro
• 100% del lado del cliente - sin servidor requerido
• Funciona offline después de carga inicial
• Diseño responsive para todos los dispositivos
• Sin registro o inicio de sesión necesario