O framework do console

Crie apps React full-stack que renderizam dentro de console.log.

Esta página está rodando no seu console. Abra-o com ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (primeiro, ative os recursos de desenvolvedor), clique na prévia abaixo e pressione ↑ ↓.

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 suporta renderização concorrente, Suspense e error boundaries.

App Router

Pastas em app/ viram rotas e layouts, e Voltar, Avançar e links diretos funcionam.

Grade responsiva

A grade se ajusta ao painel acoplado do DevTools em qualquer zoom da página.

Entrada por teclado

Teclas, colagem e composição IME chegam ao app por um único <textarea> oculto.

Tabelas, gráficos, formulários e atalhos

Ao vivo

preview://table:1

↑ ↓ mover · s ordenar · Space selecionar

Documentação

Layout

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

Dados

<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 quadro alterado é uma chamada a `console.log`

Um commit que não altera células nunca chega ao console.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Commit
React aplica alterações por um reconciliador personalizado.
Yoga
02Layout
Yoga organiza caixas em células inteiras.
CellBuffer
03Pintura
Só linhas danificadas são repintadas.
Hash da linha
04Filtro de alterações
Quadros sem alterações param aqui.
RLE
05Codificar
3.200 células viram 149 spans %c.
console.log
06Emitir
Quadros são anexados com intervalo mínimo de 66 ms.

Quadro alterado Quadro sem alterações, 0 chamadas

Quadros anexados

Limpar o console antes de cada quadro o deixa em branco até o DevTools pintar o próximo. O Turbolog anexa cada quadro em vez disso.

Ler o post

clear() + log()70.6% em branco

log(), appended1.0% em branco

0.163msRepintura completa (layout, pintura, codificação)

0.011msEdição de uma linha, como ao pressionar uma tecla

0 chamadasQuadro ocioso

149 spansArgumentos %c para 3.200 células

Painel 100×32, média de 1.000 quadros · Apple M5 Pro · Bun 1.4.4Documentação do motor Turbolog

Renderizar rotas no servidor

Exporte runtime = "server" para renderizar uma rota e seus componentes assíncronos no servidor. O navegador carrega um reprodutor de quadros de 21 kB (gzip) em vez do seu 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}

Também roda em terminais e agentes

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

O Turbolog escreve cada quadro como spans %c em um único console.log.

◌ Build docs fra1 42%

Terminal`text run`

text run renderiza o mesmo app App Router em ANSI truecolor e executa manipuladores de rota no mesmo processo.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

Agentes de programação`text mcp`

Via MCP, agentes navegam por rotas, pressionam teclas e leem cada quadro como texto simples.

Programe com OpenCode no DevTools

OpenCode Lite é a TUI do OpenCode reconstruída com Text.js para rodar no console do navegador.

Testar o sandbox Conectar seu 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

Sandbox

Um agente com roteiro responde a qualquer prompt, sem instalar nada.

Um comando

Execute bunx @textjs/opencode@latest proxy e insira o código exibido. A página se conecta ao OpenCode na sua máquina.

Seus modelos e sessões

Escolha qualquer modelo configurado no servidor com /models. Sessões, agentes e modelos vêm do seu servidor OpenCode.

Crie um painel de deploy no console

O curso gratuito tem 10 capítulos e dura cerca de 65 minutos.

Começar a aprender Ler a documentação

O framework do console

React 19

App Router

Grade responsiva

Entrada por teclado

Tabelas, gráficos, formulários e atalhos

Cada quadro alterado é uma chamada a `console.log`

01Commit

02Layout

03Pintura

04Filtro de alterações

05Codificar

06Emitir

Quadros anexados

Renderizar rotas no servidor

Também roda em terminais e agentes

DevTools`text dev`

Terminal`text run`

Agentes de programação`text mcp`

Programe com OpenCode no DevTools

Sandbox

Um comando

Seus modelos e sessões

Ferramentas de editor, lint e testes

Extensão do DevTools

VS Code

ESLint

Testes

Códigos de erro

REPL do console

Da direita para a esquerda

Fontes FIGlet

Crie um painel de deploy no console

O framework do console

React 19

App Router

Grade responsiva

Entrada por teclado

Tabelas, gráficos, formulários e atalhos

Cada quadro alterado é uma chamada a console.log

01Commit

02Layout

03Pintura

04Filtro de alterações

05Codificar

06Emitir

Quadros anexados

Renderizar rotas no servidor

Também roda em terminais e agentes

DevToolstext dev

Terminaltext run

Agentes de programaçãotext mcp

Programe com OpenCode no DevTools

Sandbox

Um comando

Seus modelos e sessões

Ferramentas de editor, lint e testes

Extensão do DevTools

VS Code

ESLint

Testes

Códigos de erro

REPL do console

Da direita para a esquerda

Fontes FIGlet

Crie um painel de deploy no console

Cada quadro alterado é uma chamada a `console.log`

DevTools`text dev`

Terminal`text run`

Agentes de programação`text mcp`