Formateador de codigo paso a paso: JavaScript, CSS, HTML y JSON

El formateador de codigo gratuito en este sitio reindenta JavaScript, CSS y HTML, y formatea JSON de forma legible, todo en el navegador. Esta guia explica que esperar de cada tipo de input, que hacer cuando el resultado parece incorrecto, y cuando usar otra herramienta.

Last reviewed: 2026-07-02

freetoolonline.com Editorial Team

Formatear JavaScript

Pegue un fragmento de JavaScript - una linea minificada, una funcion copiada, o un archivo completo - y haga clic en Format. La herramienta carga una copia auto-alojada de la biblioteca de codigo abierto js-beautify y llama a su formateador de JavaScript, que reindenta llaves y parentesis anidados y coloca cada instruccion en su propia linea. Pegar function add(a,b){return a+b;} devuelve la misma funcion repartida en varias lineas con el cuerpo indentado dentro de las llaves. El formateador solo cambia el espacio en blanco - no renombra variables, no reordena instrucciones, y no cambia el comportamiento del codigo.

Formatear CSS

Se detecta CSS cuando el input parece uno o mas bloques selector { propiedad: valor; } sin ninguno de los tokens exclusivos de JavaScript (sin function, sin =>, sin var, let o const, sin parentesis). Pegar una regla minificada como .card{margin:0;padding:8px;border-radius:4px} devuelve la regla con cada propiedad en su propia linea indentada dentro de las llaves. Si un fragmento de CSS mezcla un token parecido a JavaScript, el detector puede clasificarlo como JavaScript - pegue el CSS solo, sin etiquetas de script alrededor, para mantener la deteccion fiable.

Formatear HTML

El input que comienza con < se trata como HTML. Un fragmento en una linea como <div><p>hi</p></div> vuelve con cada etiqueta en su propia linea y los hijos indentados un nivel mas profundo que el padre. Esto es util para HTML copiado con el comando "Copy outerHTML" del navegador, que normalmente llega en una sola linea ilegible. El formateador de HTML depende de que los formateadores de JavaScript y CSS del mismo motor carguen primero (para cualquier bloque <script> o <style> dentro del markup), que la herramienta carga automaticamente antes de ejecutarse.

Formatear JSON

JSON se verifica antes que cualquiera de los anteriores: si el input comienza con {, [, una comilla, un digito, o uno de true, false, null, la herramienta lo analiza y lo imprime de vuelta con JSON.stringify(value, null, 2) - dos espacios de indentacion, una propiedad por linea. Esto es un analisis real, no una deteccion basada en texto, por lo que un payload invalido se detecta: pegar {"a":1, (una coma final sin nada despues) devuelve un mensaje que comienza con Invalid JSON: en vez de un resultado formateado. Corrija el error reportado y pegue de nuevo.

Cuando el resultado parece incorrecto

Pueden pasar dos cosas. Primero, la deteccion de lenguaje puede fallar - es una heuristica basada en la forma del texto, no un analizador completo para cada lenguaje, por lo que un lenguaje para el que la herramienta no fue construida (Python, Java, Go, etc.) igual pasa por el formateador de JavaScript, y el resultado puede no verse correcto. Segundo, para JSON especificamente, un error de analisis significa que la herramienta no puede formatear nada hasta que el JSON sea valido - pegue de nuevo despues de corregir el error que reporta el mensaje. Ningun caso danha su input: el panel izquierdo mantiene exactamente lo que pego, asi que siempre puede intentarlo de nuevo.

Formateador de codigo vs JSON Parser

Ambas herramientas pueden formatear JSON de forma legible, asi que ayuda saber cual usar. El formateador de codigo es la opcion correcta para JavaScript, CSS o HTML, y formatea JSON tambien como efecto secundario. El JSON Parser es la opcion correcta cuando necesita especificamente validar un payload con deteccion de errores, explorar el resultado como un arbol expandible, o comprobar el tipo y el indice de array de un campo especifico - esta construido solo para JSON y muestra mas sobre la estructura que una impresion indentada simple.

Referencia rapida

Input comienza con	Detectado como	Motor usado
{, [, una comilla, un digito, o true/false/null	JSON	JSON.stringify(value, null, 2)
<	HTML	html_beautify (js-beautify)
Bloques de reglas, ej. selector { prop: valor; }	CSS	css_beautify (js-beautify)
Todo lo demas	JavaScript	js_beautify (js-beautify)

Privacidad

El formateo se ejecuta enteramente en esta pestana del navegador. El codigo pegado nunca se sube, se envia a un servicio de analitica, ni se escribe en ningun servidor - existe solo en la memoria de la pagina hasta que cierre la pestana o pegue otra cosa.

Guias relacionadas

• JSON parser: validar vs formatear vs vista de arbol - la guia de decision equivalente para la herramienta solo de JSON.
• Minificador CSS vs compresor - el trabajo inverso: reducir una hoja de estilo en vez de formatearla.
• Herramienta de formateo de codigo - la herramienta en si.
• Centro de herramientas para desarrolladores - el conjunto completo, todas ejecutandose en el navegador sin subir nada.

Preguntas frecuentes

El formateador cambia lo que hace mi codigo?

No. Solo cambia el espacio en blanco y la indentacion. La logica, los valores y la estructura del JavaScript, CSS o HTML que pego siguen siendo los mismos.

Por que mi CSS se formateo como JavaScript?

La deteccion de lenguaje es una heuristica sobre la forma del texto, no un analizador completo. Si su fragmento de CSS incluye un token que el detector asocia con JavaScript, puede clasificarse como JavaScript. Pegue la regla CSS sola para mantener la deteccion fiable.

Puedo formatear Python, Java, u otro lenguaje?

No de forma fiable. La herramienta reconoce JavaScript, CSS, HTML y JSON. Cualquier otro lenguaje igual pasa por el formateador de JavaScript y el resultado puede no verse correcto - revise el resultado antes de confiar en el.

Se sube mi codigo a algun lugar?

No. El formateo se ejecuta enteramente en esta pestana del navegador; nada de lo que pega se envia a un servidor o servicio de analitica.