Wprowadzenie

Text.js to framework React do tworzenia aplikacji renderowanych w konsoli DevTools za pomocą 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>  );}

Podgląd działa na żywo. Kliknij go i naciśnij ↑.

#Zawartość

• React 19: renderowanie współbieżne, Suspense i granice błędów.
• App Router: layouty, strony, segmenty dynamiczne i handlery tras.
• Layout Yoga: flexbox w WebAssembly, wyrównany do komórek o całkowitych współrzędnych.
• Turbolog: jedno wywołanie console.log na zmienioną klatkę.
• Interfejs konsoli: strona zawiera tylko panel fokusu i ukryte pole wejściowe.

#Zasada działania

Stan przepływa w dół: React, potem layout, potem bufor komórek, potem konsola.

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

Niezmienione klatki są pomijane, więc bezczynne aplikacje niczego nie wypisują w konsoli.

#Następne kroki

• Instalacja: utwórz swoją pierwszą aplikację.
• Routing: strony, layouty i nawigacja.
• Turbolog: sposób kodowania klatek.
• OpenCode: interfejs TUI agenta zbudowany przy użyciu Text.js.