← Blog

Text.js 1.0

Text.js 1.0 es estable. Renderiza apps de React 19 y App Router en la consola de DevTools con un console.log por fotograma.

Adam

Hoy lanzamos Text.js 1.0, el framework de consola para la web.

bunx create-text-app@latest

Text.js renderiza apps de React 19 dentro de la consola de Chrome DevTools, con layouts, enrutamiento, foco, entrada de datos, formularios, gráficos y Markdown en streaming dibujados con console.log.

Novedades de 1.0

  • El App Router. layout.tsx, page.tsx, [param], loading.tsx, error.tsx, not-found.tsx y api/*/route.ts, sincronizados con window.location. Sigue las convenciones del App Router de Next.js.
  • Turbolog. Yoga flexbox organiza una cuadrícula de celdas, un CellBuffer de arrays tipados la almacena y un codificador de longitud de secuencias la convierte en una única llamada a console.log(format, ...css). Los fotogramas inactivos no hacen llamadas a la consola.
  • Un kit de componentes. Box, Text, ScrollBox, Input, Select, Tabs, Markdown, Diff, List virtualizada, Table, Tree, gráficos, diálogos, notificaciones y una paleta de comandos Ctrl+K de useKeymap.
  • Fotogramas añadidos al final. Los fotogramas se añaden al final, debajo del anterior, para que la consola no parpadee en blanco entre fotogramas. Más información en Turbolog: eliminar el parpadeo.
  • Texto de derecha a izquierda. El hebreo y el árabe se renderizan en orden visual con conformación de caracteres árabes, mediante una implementación de UAX #9 que supera los 770.241 casos de BidiTest.txt. Consulta Texto de derecha a izquierda en la consola.
  • Una consola adaptable. Text.js se ajusta al panel acoplado de DevTools, incluidos el zoom de la página y una barra de herramientas que se distribuye en varias líneas. Cuando está desacoplado, usa 120×36 como alternativa.
  • text run. La misma app de App Router se renderiza en una terminal real.
  • Herramientas para agentes y editores. text mcp sirve tu app a agentes de programación mediante el Model Context Protocol, y la extensión Text.js DevTools añade un panel junto a «Consola». eslint-plugin-textjs y una extensión de VS Code también forman parte de 1.0.

Un cambio de nombre

El paquete del framework ahora es @textjs/next. El nombre textjs ya estaba ocupado en npm. Actualiza tus importaciones:

- import { Box, Text } from "textjs";+ import { Box, Text } from "@textjs/next";

Actualización, 1.0.2: el paquete ahora es @textjs/app, y @textjs/next está obsoleto. Para cambiar, ejecuta bun remove @textjs/next && bun add @textjs/app e importa desde @textjs/app.

Cifras

En un panel denso de 100×32 (46 nodos de texto, 149 spans %c), medido con packages/core/test/perf.test.ts:

FotogramaMedia
Repintado completo (layout, pintado, codificación)0,163 ms
Edición de una fila (al escribir)0,011 ms
Inactivo0,000 ms, 0 llamadas a la consola

Un fotograma sin cambios retorna antes de asignar memoria para una cadena, por lo que los fotogramas inactivos registran 0,000 ms.

Probar

Abre textjs.org y pulsa ⌘⌥J (Ctrl+Shift+J en Windows y Linux). El sitio ejecuta una app de Text.js en tu consola, con una vista por página. El Playground tiene un panel, Markdown en streaming y Snake. OpenCode se conecta a tu servidor local de OpenCode.

La lista completa de cambios está en el registro de cambios, y el código fuente está en GitHub.