Framework konsolowy

Twórz aplikacje full-stack w React renderowane wewnątrz console.log.

Ta strona działa w twojej konsoli. Otwórz ją skrótem ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (najpierw włącz funkcje dla deweloperów), kliknij podgląd poniżej i naciśnij ↑ ↓.

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 obsługuje renderowanie współbieżne, Suspense i granice błędów.

App Router

Foldery w app/ stają się trasami i layoutami, a Wstecz, Dalej i linki bezpośrednie działają.

Responsywna siatka

Siatka dopasowuje się do zadokowanego panelu DevTools przy dowolnym powiększeniu strony.

Obsługa klawiatury

Klawisze, wklejanie i kompozycja IME trafiają do aplikacji przez jedno ukryte pole <textarea>.

Tabele, wykresy, formularze i skróty klawiszowe

Na żywo

preview://table:1

↑ ↓ ruch · s sortowanie · Space wybór

Dokumentacja

Layout

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

Dane

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

Wykresy

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

Kontrolki

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

Klawiatura

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

Każda zmieniona klatka to jedno wywołanie `console.log`

Zatwierdzenie bez zmian w komórkach nigdy nie trafia do konsoli.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Zatwierdzanie
React zatwierdza zmiany przez własny reconciler.
Yoga
02Layout
Yoga rozmieszcza bloki na pełnych komórkach.
CellBuffer
03Rysowanie
Przerysowywane są tylko zmienione wiersze.
Hash wiersza
04Filtr zmian
Niezmienione klatki zatrzymują się tutaj.
RLE
05Kodowanie
3200 komórek zmienia się w 149 spanów %c.
console.log
06Wysyłanie
Klatki są dopisywane w odstępach co najmniej 66 ms.

Zmieniona klatka Niezmieniona klatka, 0 wywołań

Dopisywane klatki

Czyszczenie konsoli przed każdą klatką pozostawia ją pustą, aż DevTools narysuje kolejną. Turbolog zamiast tego dopisuje każdą klatkę.

Przeczytaj wpis

clear() + log()70.6% pustych

log(), appended1.0% pustych

0.163msPełne przerysowanie (layout, rysowanie, kodowanie)

0.011msEdycja jednego wiersza, np. naciśnięcie klawisza

0 wywołańKlatka bezczynności

149 spanówArgumenty %c dla 3200 komórek

Panel 100×32, średnia z 1000 klatek · Apple M5 Pro · Bun 1.4.4Dokumentacja silnika Turbolog

Renderowanie tras na serwerze

Wyeksportuj runtime = "server", aby renderować trasę i jej komponenty asynchroniczne na serwerze. Przeglądarka ładuje odtwarzacz klatek o rozmiarze 21 kB (gzip) zamiast twojej aplikacji.

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}

Działa też w terminalach i agentach

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

Turbolog zapisuje każdą klatkę jako spany %c w jednym wywołaniu console.log.

◌ Build docs fra1 42%

Terminal`text run`

text run renderuje tę samą aplikację App Router w ANSI truecolor i uruchamia handlery tras w tym samym procesie.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

Agenci programistyczni`text mcp`

Przez MCP agenci przechodzą między trasami, naciskają klawisze i odczytują każdą klatkę jako zwykły tekst.

Programuj z OpenCode w DevTools

OpenCode Lite to interfejs TUI OpenCode przebudowany przy użyciu Text.js, by działał w konsoli przeglądarki.

Wypróbuj piaskownicę Połącz swój serwer

   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

Piaskownica

Agent skryptowy odpowiada na dowolny prompt bez instalowania czegokolwiek.

Jedno polecenie

Uruchom bunx @textjs/opencode@latest proxy i wpisz wyświetlony kod. Strona łączy się z OpenCode na twoim komputerze.

Twoje modele i sesje

Wybierz dowolny model skonfigurowany na serwerze za pomocą /models. Sesje, agenty i modele pochodzą z twojego serwera OpenCode.

Zbuduj panel wdrożeń w konsoli

Bezpłatny kurs ma 10 rozdziałów i zajmuje około 65 minut.

Zacznij naukę Czytaj dokumentację

Framework konsolowy

React 19

App Router

Responsywna siatka

Obsługa klawiatury

Tabele, wykresy, formularze i skróty klawiszowe

Każda zmieniona klatka to jedno wywołanie `console.log`

01Zatwierdzanie

02Layout

03Rysowanie

04Filtr zmian

05Kodowanie

06Wysyłanie

Dopisywane klatki

Renderowanie tras na serwerze

Działa też w terminalach i agentach

DevTools`text dev`

Terminal`text run`

Agenci programistyczni`text mcp`

Programuj z OpenCode w DevTools

Piaskownica

Jedno polecenie

Twoje modele i sesje

Narzędzia edytora, lintowania i testów

Rozszerzenie DevTools

VS Code

ESLint

Testowanie

Kody błędów

REPL konsoli

Od prawej do lewej

Fonty FIGlet

Zbuduj panel wdrożeń w konsoli

Framework konsolowy

React 19

App Router

Responsywna siatka

Obsługa klawiatury

Tabele, wykresy, formularze i skróty klawiszowe

Każda zmieniona klatka to jedno wywołanie console.log

01Zatwierdzanie

02Layout

03Rysowanie

04Filtr zmian

05Kodowanie

06Wysyłanie

Dopisywane klatki

Renderowanie tras na serwerze

Działa też w terminalach i agentach

DevToolstext dev

Terminaltext run

Agenci programistycznitext mcp

Programuj z OpenCode w DevTools

Piaskownica

Jedno polecenie

Twoje modele i sesje

Narzędzia edytora, lintowania i testów

Rozszerzenie DevTools

VS Code

ESLint

Testowanie

Kody błędów

REPL konsoli

Od prawej do lewej

Fonty FIGlet

Zbuduj panel wdrożeń w konsoli

Każda zmieniona klatka to jedno wywołanie `console.log`

DevTools`text dev`

Terminal`text run`

Agenci programistyczni`text mcp`