7 min de lectura

Una biblioteca JavaScript desarrollada por un ingeniero de Midjourney promete acelerar radicalmente el diseño tipográfico en el navegador. 6.800 estrellas en GitHub en pocos días, Hacker News en plena ebullición, en X se debate si CSS ha llegado a su fin. Las demostraciones parecen magia. Pero quien observa con más atención descubre una historia sobre cargas heredadas de los navegadores, soluciones ingeniosas y la eterna pregunta: ¿cuándo una abstracción es la solución… y cuándo se convierte en el problema?

En resumen

• Qué es: Pretext es una biblioteca JavaScript con licencia MIT que calcula el diseño tipográfico en el navegador sin provocar reflows del DOM – según su creador, ~500 veces más rápido que el diseño basado en DOM (una comparación que él mismo califica de «injusta»)
• Quién la creó: Cheng Lou, ingeniero de Midjourney y colaborador de React, creador de react-motion (más de 21.700 estrellas)
• Cómo funciona: Enfoque de dos fases – medición única mediante Canvas (~19 ms para 500 textos), seguida de aritmética pura en la ruta crítica (~0,09 ms)
• Para quién: Interfaces de usuario de alto rendimiento como interfaces de chat, herramientas editoriales y listas virtualizadas – no para sitios web estándar
• Valoración: Enfoque técnicamente válido de un desarrollador serio, pero el entusiasmo viral supera claramente su grado actual de madurez

Por qué Internet ha perdido la cabeza

Existen momentos en el mundo del frontend en los que alguien muestra algo que, en teoría, no debería ser posible. Texto que fluye en tiempo real alrededor de formas arbitrarias. Burbujas de chat que se adaptan pixel a pixel a su contenido. Diseños de revistas que responden a 120 fotogramas por segundo. En el navegador. Sin trucos, sin soluciones alternativas, sin que la página se colapse.

Cheng Lou lo demostró la semana pasada. «He atravesado las profundidades del infierno para traeros, durante los próximos años, uno de los fundamentos más importantes de la ingeniería de interfaces de usuario», escribió en X. El subestimado no es su fuerte. Pero las demostraciones cumplen lo prometido – al menos a primera vista.

Pretext es la biblioteca de la que se trata. Más de 6.800 estrellas en GitHub en pocos días. En Hacker News se debatió bajo el título «El futuro del diseño tipográfico no es CSS». La comunidad de React reaccionó como si se hubiera lanzado un nuevo álbum de su banda favorita.

Esto también se debe al remitente. Cheng Lou no es un desconocido en el mundo del frontend. En Meta trabajó en React, ReasonML y Messenger. Su proyecto paralelo react-motion (más de 21.700 estrellas en GitHub) es una de las bibliotecas de animación más utilizadas en el ecosistema de React. Hoy construye la arquitectura frontend en Midjourney: pila Bun, React vanilla, sin framework. Cinco desarrolladores a tiempo completo para millones de usuarios. Si esta persona afirma que el navegador está roto, uno presta atención.

El problema de 30 años que nadie había notado

Para comprender por qué existe Pretext, hay que entender qué hace realmente el navegador cuando muestra texto. La versión corta: demasiado.

Cada vez que debe calcularse la altura de un bloque de texto o dónde se produce un salto de línea, el navegador desencadena un reflow de diseño. Mide caracteres, calcula espaciados, rompe líneas, comprueba reglas de desbordamiento (overflow) y actualiza el diseño de todos los elementos circundantes. Esta es una de las operaciones más costosas del navegador. En un sitio web estático, esto no tiene importancia. En interfaces dinámicas – aplicaciones de chat, editores, diseños animados, listas virtualizadas con miles de entradas – se convierte en un cuello de botella.

Lo engañoso: la mayoría de los desarrolladores nunca perciben este problema. Sus sitios web funcionan, sí. Se muestra el texto, las líneas se rompen, todo va bien. Solo cuando intentan diseñar dinámicamente cientos de bloques de texto simultáneamente – una aplicación de chat, una herramienta de pizarra digital, un editor de diseños de revista – chocan contra la pared. Y esa pared lleva ahí desde que Netscape Navigator renderizó su primer diseño HTML en 1994.

Cómo Pretext engaña al navegador

La solución de Pretext es conceptualmente elegante y técnicamente compleja.

Fase 1 – prepare(): El texto se normaliza, se divide en segmentos y se mide mediante la API Canvas del navegador. No mediante el DOM, sino mediante el motor tipográfico de bajo nivel que el navegador ya incluye. Los resultados se almacenan en caché. Esto tarda una sola vez unos 19 milisegundos para 500 bloques de texto. Se paga una vez, se aprovecha indefinidamente.

Fase 2 – layout(): A partir de aquí, Pretext solo opera con los valores de anchura almacenados en caché. Aritmética pura, sin contacto con el DOM. ¿Dónde se rompe la línea? ¿Cuál será la altura del párrafo? ¿Cabe el texto en esta caja? Todo se responde mediante matemáticas, no mediante el diseño del navegador. 0,09 milisegundos para 500 textos.

Esto permite cosas que simplemente no son posibles con CSS: texto que fluye dinámicamente alrededor de formas arbitrarias. Contenedores que se contraen exactamente hasta la anchura mínima necesaria para un número determinado de líneas (Shrink-Wrap). Diseños tipo revista con anchuras variables de columnas – todo ello a 120 imágenes por segundo.

Un detalle que hará levantar la ceja a los desarrolladores frontend: según Cheng Lou, el motor se desarrolló en gran medida con ayuda de Claude Code y Codex. Estas herramientas de IA miden sus resultados frente a la verdad objetiva del navegador, iteran sobre casos extremos (edge cases) y optimizan el algoritmo de diseño. Es un ejemplo fascinante de cómo puede ser la ingeniería asistida por IA cuando la tarea está claramente definida y la señal de retroalimentación es inequívoca.

Las demostraciones: efecto «¡guau!» con notas al pie

La página oficial de demostraciones presenta siete ejemplos prácticos: desde diseños de acordeón hasta burbujas de chat con espacio vacío mínimo y una demostración de un motor editorial con diseño multicolumna animado, citas destacadas (pull quotes) y reflujo en vivo. Además, hay demostraciones de la comunidad que recrean diseños de revistas y rejillas tipo masonry.

A primera vista, las demostraciones parecen algo imposible en el navegador. El texto fluye suavemente alrededor de obstáculos, los contenedores se adaptan en tiempo real y los diseños responden sin retraso aparente. Junto a ello, problemas cotidianos: áreas de texto que crecen automáticamente, centrado de texto multilínea e incluso arte ASCII tipográfico con fuentes variables como prueba de concepto.

Y luego uno hace clic en la discusión de Hacker News. Y empiezan las notas al pie.

Lo que el entusiasmo viral oculta

«~500x, pero es una comparación injusta.»
Cheng Lou sobre su propio benchmark, X, marzo de 2026

El hecho de que el desarrollador califique su propio benchmark como «injusto» merece respeto. La aceleración de ~500 veces en la ruta crítica compara una vía de cálculo en caché con una medición inicial completa mediante getBoundingClientRect(). Es como decir «mi coche es 500 veces más rápido que el tuyo», pero solo si no se cuenta el tiempo de repostaje. La medición inicial (prepare) cuesta 19 milisegundos. Para la mayoría de los sitios web, la diferencia es irrelevante, porque no desencadenan cien reflows por fotograma.

Calidad de las demostraciones en el lanzamiento: Varios desarrolladores señalaron que la propia página de demostraciones presentaba problemas de representación. El texto aparecía recortado (overflow: hidden) y, según un comentario en Hacker News, la página estaba «total y completamente rota» en dispositivos móviles. Un desarrollador comentó con ironía: «La biblioteca que quiere arreglar la web tiene una página web rota». Actualmente, la mayoría de estos problemas ya están corregidos.

CSS ya podía hacerlo, en teoría: Algunos de los diseños mostrados – texto alrededor de formas, zonas de exclusión, regiones – estaban previstos como funciones de CSS. CSS Exclusions y CSS Regions existen como especificaciones. Nunca se implementaron ampliamente porque los fabricantes de navegadores asignaron otras prioridades. Así pues, Pretext no resuelve un problema de CSS, sino un problema de compromiso de los navegadores. Esta es una diferencia importante.

Grado de madurez: Pretext es un proyecto de código abierto en una fase temprana. El autor documenta con honestidad sus limitaciones: la fuente system-ui puede provocar mediciones inexactas en macOS. Los contenedores muy estrechos rompen líneas dentro de palabras. El renderizado en el servidor (server-side rendering) aún no está finalizado. Quien use Pretext hoy en producción es un adoptante temprano con todas las consecuencias que ello implica.

Para quién es realmente relevante Pretext

La biblioteca resuelve un problema real – pero específico. Pretext resulta relevante allí donde se deben diseñar dinámicamente muchos bloques de texto simultáneamente:

• Interfaces de chat: aplicaciones de mensajería que virtualizan miles de burbujas de mensajes y deben calcular previamente su altura
• Herramientas editoriales: editores de diseño para revistas, boletines informativos o presentaciones, que hacen fluir el texto en tiempo real alrededor de imágenes
• Interfaces basadas en Canvas: herramientas de pizarra digital como Figma o Miro, que renderizan texto fuera del DOM
• Listas virtualizadas: cualquier aplicación que muestre cientos o miles de bloques de texto y necesite conocer sus dimensiones antes de que aparezcan en el área visible (viewport)

Para empresas de DACH que desarrollan sus propios productos SaaS con interfaces intensivas en texto, vale la pena seguir de cerca su grado de madurez. Para una página web corporativa, un blog o una página de destino, Pretext no aporta ninguna ventaja medible. Y eso está bien. No toda biblioteca debe salvar al mundo. A veces basta con resolver con elegancia un problema difícil para el público objetivo adecuado.

Valoración: entre genialidad y hype

Pretext no es una estafa ni una promesa vacía. El núcleo técnico – eliminar las mediciones del DOM del camino crítico del diseño y sustituirlas por aritmética en caché – es un enfoque válido que marca una diferencia real para ciertos casos de uso. El hecho de que Cheng Lou califique su propio benchmark como «injusto» y documente claramente sus limitaciones lo distingue favorablemente de los habituales influencers del desarrollo, que cada semana proclaman la próxima revolución con un nuevo framework.

La verdad, como suele ocurrir, está en medio. No es cierto que «cada sitio web que hayas usado alguna vez» esté roto. La afirmación viral es clickbait, y probablemente fue elegida intencionadamente. Pero el problema subyacente es real: el diseño del navegador es demasiado lento para ciertos casos de uso, y CSS prometió funciones que nunca llegaron. Pretext llena ese vacío – con elegancia, rendimiento y límites claros.

Lo que queda: una impresionante hazaña técnica de un desarrollador que sabe lo que hace. Una biblioteca que dentro de un año será, o bien parte integrante del kit de herramientas frontend, o bien un experimento genial que se acumule de polvo en la lista «Awesome JavaScript». Ambos destinos serían dignos.

Preguntas frecuentes

¿Qué es exactamente Pretext?

Una biblioteca JavaScript/TypeScript con licencia MIT que calcula el diseño tipográfico en el navegador sin operaciones del DOM. Mide el texto una sola vez mediante la API Canvas y calcula posteriormente los saltos de línea, alturas y posiciones mediante matemáticas puras. Desarrollada por Cheng Lou (Midjourney, ex-Meta).

¿Es Pretext realmente 500 veces más rápido que CSS?

En la ruta crítica, según el desarrollador, ~500 veces: 0,09 ms para 500 bloques de texto frente a mediciones DOM mediante getBoundingClientRect(). Cheng Lou califica él mismo esta comparación de «injusta», ya que no incluye la medición inicial única (~19 ms). Para sitios web estándar, la diferencia es irrelevante.

¿Reemplaza Pretext a CSS?

No. Pretext no reemplaza al motor de renderizado del navegador. Utiliza el motor tipográfico del navegador como base, pero evita el proceso de diseño del DOM para el cálculo del texto. CSS sigue siendo responsable del estilo, los colores, los espaciados y todos los demás aspectos del diseño.

¿Necesito esto para mi sitio web?

Probablemente no. Pretext es relevante para aplicaciones de chat, herramientas editoriales, interfaces basadas en Canvas y listas virtualizadas. Para blogs, páginas web corporativas o comercio electrónico no aporta ninguna ventaja. El propio desarrollador lo reconoce así.

¿Qué grado de madurez tiene el proyecto?

Más de 6.800 estrellas en GitHub, pero aún en desarrollo activo. Falta el renderizado en el servidor, la página de demostraciones tuvo problemas de representación al lanzarse. La fuente system-ui puede provocar mediciones inexactas en macOS. Para su uso en producción, se recomienda observar su grado de madurez.

¿Se desarrolló Pretext con IA?

Sí. Según Cheng Lou, el motor se desarrolló en gran medida con Claude Code y Codex. Estas herramientas de IA comparan sus resultados con la verdad objetiva del navegador e iteran sobre casos extremos. Es un ejemplo interesante de desarrollo de bibliotecas asistido por IA, con una señal de retroalimentación claramente definible.

Más contenido de la red MBF Media

Digital Chiefs: Digitalización de la PYME 2026 – Informe de situación sincero

SecurityToday: Copilot como riesgo de seguridad

MyBusinessFuture: IA hecha en Alemania – 935 startups

Fuente de imagen: Pexels / Rashed Paykary (px:31343632)