Einführung
Was Text.js ist, was es enthält und wie ein Frame gerendert wird.
Text.js ist ein React-Framework für Apps, die mit console.log in der DevTools-Konsole rendern.
Live↑ ↓ count · r resettsx
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> );}Die Vorschau ist live. Klicke darauf und drücke ↑.
Funktionsumfang
- React 19: nebenläufiges Rendering, Suspense und Error Boundaries.
- App Router: Layouts, Seiten, dynamische Segmente und Route-Handler.
- Yoga-Layout: flexbox in WebAssembly, auf ganzzahlige Zellen ausgerichtet.
- Turbolog: ein
console.log-Aufruf pro geändertem Frame. - Konsolen-UI: Die Seite enthält nur ein Fokusfeld und ein verborgenes Eingabefeld.
Funktionsweise
Der Zustand fließt nach unten: React, dann das Layout, dann ein Zellenpuffer, dann die Konsole.
React 19 ▼ Yoga ▼ CellBuffer ▼ console.log(format, ...css)Unveränderte Frames werden übersprungen, sodass Apps im Leerlauf nichts protokollieren.
Nächste Schritte
- Installation: Erstelle deine erste App.
- Routing: Seiten, Layouts und Navigation.
- Turbolog: Wie Frames kodiert werden.
- OpenCode: Eine mit Text.js entwickelte Agenten-TUI.