Embellecedor de código
Formatea y embellece tu código para mejor legibilidad
Cómo usar
- Elige el tipo de código en el selector superior (HTML, CSS, JavaScript o JSON)
- Pega el código en el área de entrada — funciona igual con bundles minificados, fragmentos de Stack Overflow o snippets desordenados pegados desde Slack
- Selecciona la sangría según la convención del equipo: 2 espacios (frontend), 4 espacios (Java/Python) o tabulaciones (proyectos legacy)
- Pulsa «Embellecer código» — todo se procesa localmente en el navegador, ninguna línea de código sale de tu equipo
- Copia el resultado del panel derecho al portapapeles con un clic, listo para pegar en VS Code, IntelliJ, GitHub o Notion
- El modo JSON valida la sintaxis automáticamente y resalta la línea exacta donde el JSON está roto, útil al depurar respuestas de API
Todo el procesamiento se realiza en tu navegador, los archivos nunca se envían a un servidor.
Preguntas frecuentes
No del todo. Prettier y ESLint son herramientas pensadas para imponer un estilo uniforme en todo el equipo desde el IDE y la CI. Este beautifier sirve para casos puntuales: leer un bundle minificado, ordenar un fragmento copiado de un chat, preparar una explicación rápida en una entrevista o presentación, sin abrir el editor local.
Soporta HTML, CSS, JavaScript y JSON de forma nativa. TypeScript, JSX y TSX se pueden procesar en modo JavaScript con resultados aceptables, aunque las reglas de saltos en anotaciones de tipos pueden diferir de Prettier. Para archivos .vue o .svelte, conviene copiar template, script y style por separado.
Nunca. Todo el procesado ocurre en JavaScript dentro de tu navegador, así que puedes pegar código con claves de API, cadenas de conexión a base de datos o lógica interna confidencial sin que salga de tu equipo. Cumple con políticas de seguridad de empresas financieras, sanitarias o públicas que exigen «datos que no abandonan la red interna».
Sí. La sangría es configurable entre 2 espacios (lo más común en frontend moderno), 4 espacios (típico en Java o Python migrado) y tabulaciones (proyectos heredados). La preferencia se guarda en el navegador para no tener que reconfigurarla en la siguiente sesión.
Sí. En modo JavaScript se restauran saltos de línea e indentación, lo que ayuda a entender la estructura del código aunque los nombres de variables sigan siendo a, b, t (la minificación es irreversible sin source maps). Para depurar a fondo conviene usar Chrome DevTools con source maps; el beautifier es ideal para echar un vistazo rápido.
Depende de la memoria del navegador. Archivos de hasta unos pocos MB se formatean sin problema. Para logs de respuestas de API muy grandes (>10MB) recomendamos usar `jq` en la terminal o el formateador integrado del editor. Esta herramienta brilla con código que cabe en una pantalla.
Es buena práctica revisar visualmente cómo queda el código antes de subir el PR. Sin embargo, el formateo final del commit debe seguir las reglas del repositorio (.prettierrc, .editorconfig). Lo más seguro es que la CI ejecute Prettier o eslint --fix automáticamente para mantener consistencia con el resto del equipo.