Introduzione

Text.js è un framework React per app che eseguono il rendering nella console di DevTools con 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>  );}

L’anteprima è interattiva. Fai clic e premi ↑.

#Funzionalità incluse

• React 19: rendering concorrente, Suspense ed error boundary.
• App Router: layout, pagine, segmenti dinamici e route handler.
• Layout Yoga: flexbox in WebAssembly, allineato a celle intere.
• Turbolog: una chiamata a console.log per ogni frame modificato.
• Interfaccia della console: la pagina ospita solo un pannello del focus e un input nascosto.

#Funzionamento

Lo stato scorre verso il basso: React, poi il layout, poi un buffer di celle, poi la console.

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

I frame invariati vengono saltati, quindi le app inattive non scrivono nulla nella console.

#Prossimi passi

• Installazione: crea la tua prima app.
• Routing: pagine, layout e navigazione.
• Turbolog: come vengono codificati i frame.
• OpenCode: una TUI per agenti creata con Text.js.