Das Konsolen-Framework
Entwickle Full-Stack-React-Apps, die in console.log rendern.
Diese Seite läuft in deiner Konsole. Öffne sie mit ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (zuerst Entwicklerfunktionen aktivieren), klicke auf die Vorschau unten und drücke ↑ ↓.
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}React 19
Text.js unterstützt nebenläufiges Rendering, Suspense und Error Boundaries.
App Router
Ordner in app/ werden zu Routen und Layouts, und Zurück, Vorwärts und Deep-Links funktionieren.
Responsives Raster
Das Raster passt bei jeder Zoomstufe in das angedockte DevTools-Panel.
Tastatureingabe
Tastendrücke, Einfügen und IME-Komposition erreichen die App über ein verborgenes <textarea>.
Tabellen, Diagramme, Formulare und Tastenkürzel
<Box><Stack><Grid><SplitPane><ScrollBox><Center>
<List><Table><Tree><Markdown><Code><Diff>
<LineChart><BarChart><Sparkline><ProgressBar><Gradient><Image>
<Input><Select><Checkbox><Switch><Slider><Dialog>
useKeymap<KeyHelp><KeyHints><CommandPalette><StatusBar>useFocus
Jeder geänderte Frame ist ein console.log-Aufruf
Ein Commit ohne geänderte Zellen erreicht die Konsole nie.
- React 19
01Commit
React führt Commits über einen eigenen Reconciler aus.
- Yoga
02Layout
Yoga ordnet Boxen auf ganzen Zellen an.
- CellBuffer
03Zeichnen
Nur beschädigte Zeilen werden neu gezeichnet.
- Zeilen-Hash
04Änderungsfilter
Unveränderte Frames stoppen hier.
- RLE
05Kodieren
3.200 Zellen werden zu 149
%c-Spans. - console.log
06Ausgeben
Frames werden mit mindestens 66 ms Abstand angehängt.
Angehängte Frames
Wird die Konsole vor jedem Frame geleert, bleibt sie leer, bis DevTools den nächsten zeichnet. Turbolog hängt stattdessen jeden Frame an.
Beitrag lesenclear() + log()70.6 % leerlog(), appended1.0 % leer%c-Argumente für 3200 ZellenRouten auf dem Server rendern
Exportiere runtime = "server", um eine Route und ihre asynchronen Komponenten auf dem Server zu rendern. Der Browser lädt einen 21 kB (gzip) großen Frame-Player statt deiner 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}- Partielles PrerenderingDer erste Frame jeder statischen Route steckt in ihrem HTML. Die Konsole zeichnet, bevor JavaScript lädt.
- Middleware
middleware.tsläuft vor passenden Anfragen, mitNextRequest,NextResponseundconfig.matcher. - Caching
revalidate,unstable_cacheundrevalidateTagcachen Route-Handler und Daten mit stale-while-revalidate. - Deployment-Adapter
text build --adapterunterstütztstatic,bun,vercelodercloudflare. Serverseitig gerenderte Routen brauchenbunodertext start.
Auch in Terminals und Agenten ausführen
DevToolstext dev
Turbolog schreibt jeden Frame als %c-Spans in einem console.log.
Terminaltext run
text run rendert dieselbe App Router-App in Truecolor-ANSI und führt Route-Handler im selben Prozess aus.
Coding-Agententext mcp
Über MCP navigieren Agenten durch Routen, drücken Tasten und lesen jeden Frame als Klartext.
Mit OpenCode in DevTools programmieren
OpenCode Lite ist die mit Text.js nachgebaute OpenCode-TUI für deine Browserkonsole.
Sandbox
Ein skriptgesteuerter Agent beantwortet jeden Prompt, ohne Installation.
Ein Befehl
Führe bunx @textjs/opencode@latest proxy aus und gib den ausgegebenen Code ein. Die Seite verbindet sich mit OpenCode auf deinem Rechner.
Deine Modelle und Sitzungen
Wähle mit /models ein Modell, das dein Server konfiguriert hat. Sitzungen, Agenten und Modelle kommen von deinem OpenCode-Server.
Editor-, Lint- und Testwerkzeuge
DevTools-Erweiterung
Ergänzt ein Panel mit Komponentenbaum, Frame-Inspektor und einer Zeitleiste pro Frame.
Text.js-PanelVS Code
Zeigt den Frame neben deinem Code und legt App Router-Dateien an.
⌘K VESLint
Erkennt DOM-Tags in Konsolenkomponenten, Boxen in Text und Glyphen, die Menlo fehlen.
eslint-plugin-textjsTesten
Rendere unsichtbar, drücke Tasten und prüfe lastFrame() in jedem Test-Runner.
Fehlercodes
Fehler und Warnungen mit einem TX-Code verlinken auf eine Seite, die die Lösung erklärt.
Konsolen-REPL
Pausiere, skaliere, zeige das Drahtgitter und kopiere die laufende App über die Konsoleneingabe.
window.textVon rechts nach links
Implementiert den Unicode Bidirectional Algorithm und besteht alle 770.241 Testfälle aus BidiTest.txt.
FIGlet-Schriften
Liest .flf-Dateien und reproduziert 273 aufgezeichnete Ausgaben des figlet-Binary.
Ein Deployment-Dashboard in deiner Konsole bauen
Der kostenlose Kurs hat 10 Kapitel und dauert etwa 65 Minuten.