Introducción
Qué es Text.js, qué incluye y cómo se renderiza un fotograma.
Text.js es un framework de React para apps que se renderizan en la consola de DevTools con console.log.
En vivo↑ ↓ count · r resettsx
import { useState } from "react";import { Box, Text, useInput } from "@textjs/app";export default function Page() { const [count, setCount] = useState(0); useInput((e) => { if (e.key === "up") setCount((c) => c + 1); if (e.key === "down") setCount((c) => c - 1); }); return ( <Box className="flex-col p-1 border rounded"> <Text bold>count = {count}</Text> </Box> );}La vista previa es interactiva. Haz clic en ella y pulsa ↑.
Qué incluye
- React 19: renderizado concurrente, Suspense y límites de error.
- App Router: layouts, páginas, segmentos dinámicos y manejadores de ruta.
- Layout de Yoga: flexbox en WebAssembly, ajustado a celdas enteras.
- Turbolog: una llamada a
console.logpor cada fotograma modificado. - Interfaz de la consola: la página aloja únicamente un panel de foco y un campo de entrada oculto.
Funcionamiento
El estado fluye hacia abajo: React, luego el layout, luego un búfer de celdas y luego la consola.
React 19 ▼ Yoga ▼ CellBuffer ▼ console.log(format, ...css)Los fotogramas sin cambios se omiten, así que las apps inactivas no registran nada en la consola.
Próximos pasos
- Instalación: crea tu primera app.
- Enrutamiento: páginas, layouts y navegación.
- Turbolog: cómo se codifican los fotogramas.
- OpenCode: una TUI de agente creada con Text.js.