Introdução

Text.js é um framework React para apps que renderizam no console do DevTools com console.log.

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>  );}

A prévia é interativa. Clique nela e pressione ↑.

#Recursos incluídos

• React 19: renderização concorrente, Suspense e limites de erro.
• App Router: layouts, páginas, segmentos dinâmicos e manipuladores de rota.
• Layout Yoga: flexbox em WebAssembly, ajustado a células inteiras.
• Turbolog: uma chamada a console.log por quadro alterado.
• Interface do console: a página contém apenas uma área de foco e um campo de entrada oculto.

#Funcionamento

O estado flui de cima para baixo: React, depois o layout, depois um buffer de células e depois o console.

React 19 ▼ Yoga ▼ CellBuffer ▼ console.log(format, ...css)

Quadros sem alterações são ignorados, então apps ociosos não registram nada no console.

#Próximos passos

• Instalação: crie seu primeiro app.
• Roteamento: páginas, layouts e navegação.
• Turbolog: como os quadros são codificados.
• OpenCode: uma TUI de agente criada com Text.js.