Pega CSS o JavaScript y alterna entre dos tareas: embellecer reindenta el código con espaciado coherente y una instrucción por línea, mientras que minificar elimina comentarios y espacios sobrantes e informa de cuántos bytes has ahorrado. El minificador es deliberadamente conservador —nunca renombra identificadores, nunca elimina un punto y coma y nunca une dos líneas donde la inserción automática de punto y coma podría cambiar el significado—, así que el resultado sigue funcionando. Cadenas, plantillas literales, expresiones regulares y cabeceras de licencia (/*! … */) se conservan intactas.
Cómo formatear o minificar tu código
- 1 Elige el lenguaje: CSS o JavaScript.
- 2 Pega tu código en el panel izquierdo.
- 3 Pulsa Embellecer para reindentarlo o Minificar para comprimirlo.
- 4 Revisa el informe de tamaño y copia el resultado o descarga el archivo.
Cómo lee tu código el formateador
Aquí no hay analizador sintáctico ni árbol de sintaxis abstracta. El formateador es una máquina de estados a nivel de carácter que siempre sabe si está dentro de una cadena, una plantilla literal, un comentario o una expresión regular. Ese único dato de contexto es lo que separa a un formateador de un buscar y reemplazar ingenuo: sin él, un punto y coma dentro de una cadena se trataría como el final de una sentencia, y la URL de un comentario se derrumbaría en cuanto minificaras.
Embellecer vuelve a sangrar el código y normaliza el espaciado alrededor de llaves, bloques y declaraciones. Minificar elimina los comentarios y toda secuencia de espacios que no tenga significado. El minificador es deliberadamente conservador: nunca renombra identificadores, nunca quita puntos y coma y nunca une dos líneas donde la inserción automática de punto y coma de JavaScript podría cambiar lo que el código significa. Cambia unos pocos bytes por la garantía de que lo que sale sigue funcionando.
Ese conservadurismo es el precio honesto del enfoque. Un minificador real de compilación como Terser o esbuild analiza el código en un árbol sintáctico y puede acortar nombres de variables, eliminar ramas inalcanzables y reescribir expresiones, llegando a una salida mucho menor de lo que se puede lograr así. Esta herramienta es para el apaño rápido en una pestaña del navegador, no para tu cadena de producción.
Cuándo recurrir a ella
Leer código minificado
Un script de terceros en una sola línea se vuelve navegable. Los nombres siguen destrozados —esa información se destruyó al compilar— pero la estructura, el flujo de control y las cadenas se vuelven legibles.
Limpiar código heredado
Un archivo con tabuladores y espacios mezclados y llaves inconsistentes queda uniforme en una pasada, lo que hace que el diff posterior muestre lo que cambió de verdad y no todas las líneas.
Recortar un fragmento en línea
Un bloque pequeño de CSS que va a una plantilla de correo o a la cabecera de una página no justifica un paso de compilación. Minificarlo aquí le quita comentarios y espacios en unos segundos.
Preparar código para pegar
Formatear antes de pegar en documentación, en una incidencia o en un chat hace el código legible para quien lo recoja después.
Embellecer para leer, minificar para publicar
Embellecer es lo que necesitas al heredar una hoja de estilos sin saltos de línea, al leer un fragmento copiado de un bundle minificado o al revisar un diff que alguien subió sin formatear. Minificar es el encargo opuesto: recortar bytes de un script pequeño o de un estilo en línea antes de publicarlo. Pegar código propietario en un formateador online significa entregárselo al servidor de un tercero; esta herramienta se ejecuta por completo en tu máquina, así que el trabajo de cliente, las herramientas internas y las funciones sin publicar se quedan contigo.
Lo que esta herramienta no es
Un formateador sin analizador sintáctico tiene límites reales, y fingir lo contrario te haría perder el tiempo:
- No es Prettier. Normaliza sangría y espaciado, pero no reajusta líneas largas, ni impone un ancho de impresión, ni aplica reglas de opinión sobre comillas y comas finales.
- No es un minificador de producción. Sin renombrado de identificadores, sin eliminación de código muerto, sin tree shaking. Espera una salida mayor que la que produciría esbuild o Terser, a menudo bastante mayor.
- Solo CSS y JavaScript. No maneja HTML, JSON, anotaciones de tipos de TypeScript, JSX, SCSS ni sintaxis de Less.
- No puede arreglar código roto. El formateo asume que la entrada es sintácticamente válida; unas llaves muy desequilibradas producirán una salida mal sangrada en vez de un error.
- Embellecer no puede recuperar nombres perdidos. Las variables minificadas llamadas a, b y c se quedan así: los nombres originales sencillamente ya no están en el archivo.
Resolución de problemas
- El código embellecido sigue con nombres de variable de una letra
- Esos nombres son todo lo que sobrevivió a la minificación original. Renombrar descarta los nombres de origen de forma permanente, y ningún formateador puede inventarlos de vuelta. Si el proyecto publica source maps, esa es la única vía hacia el código original.
- Mi salida minificada es mayor de lo que esperaba
- Este minificador solo quita comentarios y espacios, porque no analiza el código y por tanto no puede reescribirlo con seguridad. Para reducciones de tamaño de verdad, ejecuta esbuild o Terser en tu compilación: suelen conseguir varias veces más, y su salida está verificada porque de verdad entienden el código.
- El formateo se ve mal en una sección
- Normalmente son llaves desequilibradas más arriba del archivo, o una construcción que la máquina de estados lee de otro modo: una expresión regular que contiene una llave es el caso clásico. Comprueba que la entrada es válida y, si el problema persiste, esa sección conviene formatearla a mano.
Preguntas frecuentes
¿Minificar puede romper mi JavaScript?
Está diseñado para que no ocurra. Nunca renombra identificadores, nunca quita puntos y coma y solo elimina un salto de línea cuando la inserción automática de punto y coma no puede aplicarse. Sacrificas unos bytes frente a una herramienta mucho mayor a cambio de que el código siga funcionando.
¿Cuánto se reducirá mi archivo?
Normalmente entre un 20% y un 50% en código comentado y bien indentado. El informe bajo la salida muestra el tamaño exacto antes y después en bytes, junto al porcentaje ahorrado.
¿Se envía mi código a un servidor?
Nunca. El formateador es JavaScript ejecutándose en tu navegador, así que tu código permanece en tu dispositivo y la herramienta sigue funcionando sin conexión.
¿Debo usar esto en lugar de Prettier en mi proyecto?
No. Si tienes un paso de compilación, usa Prettier o el formateador de tu editor: analizan el código como es debido, imponen un estilo coherente en todo el equipo y se ejecutan solos. Esta herramienta existe para el caso en que tienes un fragmento en una pestaña y ningún proyecto alrededor.
¿Es seguro para producción minificar aquí?
La salida se puede ejecutar sin riesgo: el minificador es conservador precisamente para no poder romper tu código. Sencillamente no compite en tamaño. Úsalo para un fragmento en línea; usa un empaquetador real para cualquier cosa que publiques a escala.
¿Admite TypeScript, JSX o SCSS?
No. Maneja CSS plano y JavaScript plano. Las anotaciones de tipos, los elementos JSX y el anidamiento de SCSS usan sintaxis que la máquina de estados no modela, y los resultados no serán fiables.