Il framework per la console

Crea app React full-stack renderizzate dentro console.log.

Questa pagina è in esecuzione nella tua console. Aprila con ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (prima attiva le funzionalità per sviluppatori), fai clic sull’anteprima qui sotto e premi ↑ ↓.

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 supporta il rendering concorrente, Suspense e gli error boundary.

App Router

Le cartelle in app/ diventano route e layout, e Indietro, Avanti e i deep link funzionano.

Griglia responsive

La griglia si adatta al pannello DevTools ancorato a qualsiasi zoom della pagina.

Input da tastiera

Tasti, testo incollato e composizione IME raggiungono l’app tramite un unico <textarea> nascosto.

Tabelle, grafici, moduli e scorciatoie

Dal vivo

preview://table:1

↑ ↓ sposta · s ordina · Space seleziona

Documentazione

Layout

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

Dati

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

Grafici

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

Controlli

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

Tastiera

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

Ogni frame modificato è una chiamata a `console.log`

Un commit che non modifica celle non raggiunge mai la console.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Commit
React esegue i commit tramite un reconciler personalizzato.
Yoga
02Layout
Yoga dispone i riquadri su celle intere.
CellBuffer
03Disegno
Solo le righe modificate vengono ridisegnate.
Hash di riga
04Filtro modifiche
I frame invariati si fermano qui.
RLE
05Codifica
3200 celle diventano 149 span %c.
console.log
06Emissione
I frame vengono accodati a distanza di almeno 66 ms.

Frame modificato Frame invariato, 0 chiamate

Frame accodati

Svuotare la console prima di ogni frame la lascia vuota finché DevTools non disegna il successivo. Turbolog accoda invece ogni frame.

Leggi il post

clear() + log()70.6% vuoto

log(), appended1.0% vuoto

0.163msRidisegno completo (layout, disegno, codifica)

0.011msModifica di una riga, come la pressione di un tasto

0 chiamateFrame inattivo

149 spanArgomenti %c per 3200 celle

Dashboard 100×32, media di 1000 frame · Apple M5 Pro · Bun 1.4.4Documentazione del motore Turbolog

Renderizzare le route sul server

Esporta runtime = "server" per renderizzare una route e i suoi componenti asincroni sul server. Il browser carica un riproduttore di frame da 21 kB (gzip) al posto della tua 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}

Esecuzione anche in terminali e agenti

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

Turbolog scrive ogni frame come span %c in un solo console.log.

◌ Build docs fra1 42%

Terminale`text run`

text run rende la stessa app App Router in ANSI truecolor ed esegue i route handler nello stesso processo.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

Agenti di programmazione`text mcp`

Tramite MCP, gli agenti navigano tra le route, premono tasti e leggono ogni frame come testo semplice.

Programmare con OpenCode in DevTools

OpenCode Lite è la TUI di OpenCode ricostruita con Text.js per funzionare nella console del browser.

Prova la sandbox Connetti il tuo server

   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

Un agente con script risponde a qualsiasi prompt, senza nulla da installare.

Un comando

Esegui bunx @textjs/opencode@latest proxy e inserisci il codice che stampa. La pagina si connette a OpenCode sul tuo computer.

I tuoi modelli e le tue sessioni

Scegli con /models un modello configurato sul tuo server. Sessioni, agenti e modelli provengono dal tuo server OpenCode.

Creare una dashboard di deploy nella console

Il corso gratuito ha 10 capitoli e dura circa 65 minuti.

Inizia a imparare Leggi la documentazione

Il framework per la console

React 19

App Router

Griglia responsive

Input da tastiera

Tabelle, grafici, moduli e scorciatoie

Ogni frame modificato è una chiamata a `console.log`

01Commit

02Layout

03Disegno

04Filtro modifiche

05Codifica

06Emissione

Frame accodati

Renderizzare le route sul server

Esecuzione anche in terminali e agenti

DevTools`text dev`

Terminale`text run`

Agenti di programmazione`text mcp`

Programmare con OpenCode in DevTools

Sandbox

Un comando

I tuoi modelli e le tue sessioni

Strumenti per editor, lint e test

Estensione DevTools

VS Code

ESLint

Test

Codici di errore

REPL della console

Da destra a sinistra

Font FIGlet

Creare una dashboard di deploy nella console

Il framework per la console

React 19

App Router

Griglia responsive

Input da tastiera

Tabelle, grafici, moduli e scorciatoie

Ogni frame modificato è una chiamata a console.log

01Commit

02Layout

03Disegno

04Filtro modifiche

05Codifica

06Emissione

Frame accodati

Renderizzare le route sul server

Esecuzione anche in terminali e agenti

DevToolstext dev

Terminaletext run

Agenti di programmazionetext mcp

Programmare con OpenCode in DevTools

Sandbox

Un comando

I tuoi modelli e le tue sessioni

Strumenti per editor, lint e test

Estensione DevTools

VS Code

ESLint

Test

Codici di errore

REPL della console

Da destra a sinistra

Font FIGlet

Creare una dashboard di deploy nella console

Ogni frame modificato è una chiamata a `console.log`

DevTools`text dev`

Terminale`text run`

Agenti di programmazione`text mcp`