Config JSON

URL

¿Qué hace JSON a URL?

Tienes un objeto JSON que describe las partes de un endpoint HTTP — protocolo, host, ruta, parámetros de consulta, hash — y lo necesitas como una sola cadena de URL que fetch(), curl o tu cliente HTTP pueda procesar. Pega el JSON a la izquierda y obtén la URL ensamblada y codificada en porcentaje a la derecha. Es la misma dirección que cada fixture de test backend, cada ejemplo de OpenAPI y cada archivo de configuración acaba teniendo que producir.

Usa el constructor URL nativo del navegador y URLSearchParams para ensamblar la URL, así que la codificación es exactamente la que define el estándar URL de WHATWG y exactamente lo que enviaría un navegador real. Los espacios en la query se convierten en +, los corchetes en %5B/%5D, los acentos y emojis se codifican en porcentaje UTF-8. Las claves de query repetidas se admiten pasando un array — "tag": ["red", "blue"] emite tag=red&tag=blue.

Esta página existe porque la mayoría de proyectos ya guardan URLs como JSON en algún sitio — archivos de entorno, colecciones de Postman, fixtures de Cypress, especificaciones OpenAPI, valores de Helm. Cuando necesitas ese JSON como una cadena de URL real para un script o un curl puntual, montarla a mano es donde se esconden los bugs. La conversión sigue el RFC 3986 para la sintaxis de URL y acepta JSON estándar según el RFC 8259 en la entrada. Todo se ejecuta localmente — el JSON y la URL nunca salen de tu navegador. La dirección inversa vive en URL a JSON.

Cómo convertir JSON a una URL

Tres pasos. Cada uno se corresponde con un botón de esta página.

Pega un config JSON o carga el ejemplo

Suelta a la izquierda un objeto JSON que describa las partes de la URL. protocol y host son los únicos campos obligatorios; el resto es opcional. Pulsa Ejemplo para cargar un endpoint realista de e-commerce con varios parámetros de consulta y un hash:

{
  "protocol": "https",
  "host": "api.shop.example.com",
  "pathname": "/v1/orders",
  "searchParams": {
    "customer": "Ava Chen",
    "status": "active",
    "total[gte]": "49.99",
    "page": "2"
  },
  "hash": "summary"
}

Campos opcionales: port, username, password, pathname, searchParams, hash. Dentro de searchParams, una cadena es un valor único; un array son claves repetidas. La sintaxis JSON se parsea con JSON.parse — sin comentarios, sin comas finales.

Lee la URL ensamblada

El panel derecho se actualiza mientras escribes. Verás la URL completa — https://api.shop.example.com/v1/orders?customer=Ava+Chen&status=active&total%5Bgte%5D=49.99&page=2#summary — con cada parte codificada en porcentaje tal y como define el estándar URL. Pégala directamente en una llamada fetch(), en un comando curl, en un test de Postman o en un archivo de config que espera una sola cadena URL.

Copia o descarga

Pulsa Copiar para enviar la URL al portapapeles, o Descargar para guardarla como archivo de texto. Usa Limpiar en el panel de entrada para empezar de cero con un nuevo config.

Cuándo lo usarás de verdad

Convertir ejemplos de OpenAPI en comandos curl ejecutables

Las especificaciones OpenAPI describen los servidores como {url, variables} y las operaciones como rutas con parameters. Componer la URL real a partir de esas piezas a mano para un curl puntual es engorroso — sustituir variables de ruta, codificar parámetros de consulta, acertar con la barra final. Pega el JSON ya combinado aquí, copia la URL y pégala en curl. La forma combinada coincide con lo que describe el server-object de OpenAPI.

Construir URLs a partir de variables de entorno separadas

Una app 12-factor guarda las partes de la URL como variables de entorno separadas: API_HOST, API_PORT, API_BASE_PATH, API_TOKEN_PARAM. Para producir la URL completa para un curl de comprobación durante una incidencia, las ensamblas. Pega la forma JSON en esta página, obtén la URL y ejecútala. Más rápido que hacer scripting en bash y sin riesgo de olvidarte de codificar un token que contenga +.

Fixtures de Cypress y Playwright que guardan URLs como objetos

Los fixtures de test suelen guardar las URLs de petición de forma estructurada para poder hacer asserts sobre partes individuales (el path param orderId, el query param page). Cuando el fixture también necesita hacer una llamada HTTP real (por ejemplo para sembrar datos vía cy.request o page.goto), la forma estructurada tiene que convertirse en una cadena. JSON a URL convierte el objeto fixture guardado por Marco Rivera en la URL que el harness de test puede atacar.

URLs de webhook ensambladas desde configs por tenant

Los sistemas multi-tenant guardan configs de webhook por cliente: {host: "hooks.tenant-a.example.com", pathname: "/orders/ORD-1001/notify", searchParams: {token: "..."}}. El despachador lee el JSON y necesita una cadena de URL a la que hacer POST. La misma conversión que hace esta página, solo que en tiempo de ejecución. Usa la página para verificar que la URL que tu código va a producir coincide con la que el cliente registró.

Preguntas frecuentes

¿Cuál es la diferencia entre esto y la página URL Builder?

El mismo motor, distinto enfoque. URL Builder es para el caso en que te sientas a montar una URL desde cero — estás componiendo una petición. JSON a URL es para el caso en que el JSON ya existe en algún sitio (un config, una spec OpenAPI, un fixture, un split de variables de entorno) y necesitas convertirlo en la cadena URL que un trozo de código espera. Elige el enfoque que encaje con lo que estás haciendo — la salida es idéntica.

Mi JSON guarda la URL de otra forma — ¿puedo usar cualquier estructura?

Tiene que usar los nombres de partes de URL del estándar WHATWG: protocol, host, port, username, password, pathname, searchParams (objeto), hash. Si tu JSON usa otras claves (scheme, baseUrl, query, fragment), renómbralas primero. La forma refleja lo que new URL(...) expone y lo que define la spec URL, así que estás alineado con el mismo modelo que fetch y Node usan internamente.

¿Cómo envío el mismo parámetro de consulta dos veces (p.ej. ?tag=red&tag=blue)?

Usa un array como valor: "tag": ["red", "blue"]. El convertidor emite tag=red&tag=blue en el orden que lo proporcionaste. Esto coincide con cómo URLSearchParams maneja claves repetidas y es lo que la mayoría de servidores (Express, Rails, ASP.NET) esperan para query params estilo array.

¿Por qué mi espacio se convierte en + en vez de %20?

Los espacios en el componente de query se codifican como + según las reglas de application/x-www-form-urlencoded — eso es lo que emite URLSearchParams. Los espacios en la ruta se codifican como %20. Ambos son válidos según RFC 3986 y todos los servidores decodifican cualquiera de las dos formas. Si tu servidor solo acepta %20 en la query, el bug está en el servidor.

¿Puedo incluir credenciales (usuario/contraseña) en la URL?

Sí — pon "username" y "password" en el JSON. Aparecerán antes del host como user:pass@host. El RFC 3986 §3.2.1 avisa de no hacer esto en URLs de producción porque acaban en el historial del navegador, en logs del servidor y en cachés de proxies — vale para una prueba local rápida, no vale en configs compartidos.

¿La URL sale alguna vez de mi navegador?

No. El parsing del JSON es JSON.parse en tu pestaña; el ensamblado de la URL es new URL(...) en tu pestaña; ninguno de los dos llama a un servidor. No hay subida ni logging. Puedes abrir la página una vez con conexión, desconectarla y seguir usándola desde la caché.

Otras herramientas de URL y JSON

JSON a URL es solo la mitad del viaje de ida y vuelta. Aquí tienes el resto del kit: