El framework de la consola

Crea apps full-stack de React que se renderizan dentro de console.log.

Esta página se ejecuta en tu consola. Ábrela con ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (primero activa las funciones para desarrolladores), haz clic en la vista previa de abajo y pulsa ↑ ↓.

1import { useState } from "react";2import { AsciiFont, Box, Text, useInput } from "@textjs/app";34export default function Page() {5  const [count, setCount] = useState(0);6  useInput((e) => {7    if (e.key === "up") setCount((c) => c + 1);8    if (e.key === "down") setCount((c) => c - 1);9  });1011  return (12    <Box className="flex-col gap-1 p-2">13      <AsciiFont text="▼ TEXT.JS" />14      <Text color="muted">React 19 in console.log</Text>15      <Text bold color="accent">count = {count}</Text>16    </Box>17  );18}

viewport:3

React 19

Text.js admite renderizado concurrente, Suspense y límites de error.

App Router

Las carpetas de app/ se convierten en rutas y layouts, y funcionan Atrás, Adelante y los enlaces profundos.

Cuadrícula adaptable

La cuadrícula se ajusta al panel acoplado de DevTools con cualquier zoom de página.

Entrada de teclado

Las teclas, el pegado y la composición IME llegan a la app mediante un único <textarea> oculto.

Tablas, gráficos, formularios y atajos

En vivo

preview://table:1

↑ ↓ mover · s ordenar · Space seleccionar

Documentación

Layout

<Box>
<Stack>
<Grid>
<SplitPane>
<ScrollBox>
<Center>

Datos

<List>
<Table>
<Tree>
<Markdown>
<Code>
<Diff>

Gráficos

<LineChart>
<BarChart>
<Sparkline>
<ProgressBar>
<Gradient>
<Image>

Controles

<Input>
<Select>
<Checkbox>
<Switch>
<Slider>
<Dialog>

Teclado

useKeymap
<KeyHelp>
<KeyHints>
<CommandPalette>
<StatusBar>
useFocus

Cada fotograma con cambios es una llamada a `console.log`

Un commit que no cambia ninguna celda nunca llega a la consola.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Confirmación
React aplica cambios mediante un reconciliador personalizado.
Yoga
02Layout
Yoga distribuye las cajas en celdas enteras.
CellBuffer
03Pintado
Solo se repintan las filas dañadas.
Hash de fila
04Filtro de cambios
Los fotogramas sin cambios se detienen aquí.
RLE
05Codificar
3200 celdas se convierten en 149 spans %c.
console.log
06Emitir
Los fotogramas se añaden al final con al menos 66 ms de separación.

Fotograma con cambios Fotograma sin cambios, 0 llamadas

Fotogramas añadidos al final

Borrar la consola antes de cada fotograma la deja en blanco hasta que DevTools pinta el siguiente. Turbolog añade cada fotograma al final.

Leer el artículo

clear() + log()70.6 % en blanco

log(), appended1.0 % en blanco

0.163msRepintado completo (layout, pintado, codificación)

0.011msEdición de una fila, como una pulsación

0 llamadasFotograma inactivo

149 spansArgumentos %c para 3200 celdas

Panel de 100×32, media de 1000 fotogramas · Apple M5 Pro · Bun 1.4.4Documentación del motor Turbolog

Renderizar rutas en el servidor

Exporta runtime = "server" para renderizar una ruta y sus componentes asíncronos en el servidor. El navegador carga un reproductor de fotogramas de 21 kB (gzip) en lugar de tu app.

1import { Suspense } from "react";2import { Box, Text } from "@textjs/app";3import { db } from "@/lib/db";45export const runtime = "server";67async function Deploys() {8  const rows = await db.deploys.latest(5);9  return rows.map((d) => (10    <Text key={d.id}>{`${d.state}  ${d.branch}`}</Text>11  ));12}1314export default function Page() {15  return (16    <Box className="flex-col p-1">17      <Text bold>Deployments</Text>18      <Suspense fallback={<Text color="muted">Loading…</Text>}>19        <Deploys />20      </Suspense>21    </Box>22  );23}

También se ejecuta en terminales y agentes

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

Turbolog escribe cada fotograma como spans %c en un solo console.log.

◌ Build docs fra1 42%

Terminal`text run`

text run renderiza la misma app de App Router en ANSI de color verdadero y ejecuta los manejadores de ruta en el mismo proceso.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

Agentes de programación`text mcp`

Mediante MCP, los agentes navegan por rutas, pulsan teclas y leen cada fotograma como texto plano.

Programar con OpenCode en DevTools

OpenCode Lite es la TUI de OpenCode reconstruida con Text.js para ejecutarse en la consola de tu navegador.

Probar el entorno de pruebas Conectar tu servidor

   The reconnect test is flaky…  +                                                                  
                                                                                                    
     → Explored: 1 search, 1 read                                                                   
                                                                                                    
     The client closes on the first onerror and never reconnects. I'll retry instead.               
                                                                                                    
  ┃                                                                                                 
  ┃  ← Edit src/events.ts                                                                           
  ┃                                                                                                 
  ┃    1   export function connect(url: string, onEvent: (e: Event) => void) {                      
  ┃    2     const source = new EventSource(url);                                                   
  ┃    3     source.onmessage = (m) => onEvent(JSON.parse(m.data));                                 
  ┃    4 -   source.onerror = () => source.close();                                                 
  ┃    4 +   source.onerror = () => {                                                               
  ┃    5 +     source.close();                                                                      
  ┃    6 +     setTimeout(() => connect(url, onEvent), 250);                                        
  ┃    7 +   };                                                                                     
  ┃    8     return () => source.close();                                                           
  ┃    9   }                                                                                        
  ┃                                                                                                 
                                                                                                    
  ┃                                                                                                 
  ┃  $ bun test test/events.test.ts                                                                 
  ┃                                                                                                 
  ┃  3 pass, 0 fail                                                                                 
  ┃                                                                                                 
                                                                                                    
     Fixed. connect() now reconnects after an error. All 3 tests pass, including the flaky one.     
                                                                                                    
     Build · Claude Opus 5.5 · 2.5s                                                                 
                                                                                                    
  ┃                                                                                                 
  ┃                                                                                                 
  ┃                                                                                                 
  ┃  Build · Claude Opus 5.5 Anthropic                                                              
  ╹▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀▀  
  ~/code/textjs:main                                           12.7K (3%) · $0.02  ctrl+p commands  
                                                                                                    

opencode:1

Entorno de pruebas

Un agente con respuestas programadas contesta a cualquier petición, sin instalar nada.

Un comando

Ejecuta bunx @textjs/opencode@latest proxy e introduce el código que muestra. La página se conecta a OpenCode en tu equipo.

Tus modelos y sesiones

Elige con /models cualquier modelo configurado en tu servidor. Las sesiones, los agentes y los modelos provienen de tu servidor de OpenCode.

Crear un panel de despliegue en tu consola

El curso gratuito tiene 10 capítulos y dura unos 65 minutos.

Empezar a aprender Leer la documentación

El framework de la consola

React 19

App Router

Cuadrícula adaptable

Entrada de teclado

Tablas, gráficos, formularios y atajos

Cada fotograma con cambios es una llamada a `console.log`

01Confirmación

02Layout

03Pintado

04Filtro de cambios

05Codificar

06Emitir

Fotogramas añadidos al final

Renderizar rutas en el servidor

También se ejecuta en terminales y agentes

DevTools`text dev`

Terminal`text run`

Agentes de programación`text mcp`

Programar con OpenCode en DevTools

Entorno de pruebas

Un comando

Tus modelos y sesiones

Herramientas de edición, lint y pruebas

Extensión de DevTools

VS Code

ESLint

Pruebas

Códigos de error

REPL de consola

De derecha a izquierda

Fuentes FIGlet

Crear un panel de despliegue en tu consola

El framework de la consola

React 19

App Router

Cuadrícula adaptable

Entrada de teclado

Tablas, gráficos, formularios y atajos

Cada fotograma con cambios es una llamada a console.log

01Confirmación

02Layout

03Pintado

04Filtro de cambios

05Codificar

06Emitir

Fotogramas añadidos al final

Renderizar rutas en el servidor

También se ejecuta en terminales y agentes

DevToolstext dev

Terminaltext run

Agentes de programacióntext mcp

Programar con OpenCode en DevTools

Entorno de pruebas

Un comando

Tus modelos y sesiones

Herramientas de edición, lint y pruebas

Extensión de DevTools

VS Code

ESLint

Pruebas

Códigos de error

REPL de consola

De derecha a izquierda

Fuentes FIGlet

Crear un panel de despliegue en tu consola

Cada fotograma con cambios es una llamada a `console.log`

DevTools`text dev`

Terminal`text run`

Agentes de programación`text mcp`