Konsol framework’ü

console.log içinde render edilen full-stack React uygulamaları geliştirin.

Bu sayfa konsolunuzda çalışıyor. ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C ile açın (önce geliştirici özelliklerini açın), aşağıdaki ön izlemeye tıklayın ve ↑ ↓ tuşlarına basın.

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 eşzamanlı render etmeyi, Suspense’i ve hata sınırlarını destekler.

App Router

app/ içindeki klasörler rota ve layout olur; Geri, İleri ve derin bağlantılar çalışır.

Duyarlı ızgara

Izgara, her sayfa yakınlaştırma düzeyinde sabitlenmiş DevTools paneline sığar.

Klavye girdisi

Tuşlar, yapıştırma ve IME kompozisyonu, tek bir gizli <textarea> üzerinden uygulamaya ulaşır.

Tablolar, grafikler, formlar ve kısayollar

Canlı

preview://table:1

↑ ↓ gezinme · s sıralama · Space seçme

Belgeler

Layout

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

Veri

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

Grafikler

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

Kontroller

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

Klavye

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

Değişen her kare bir `console.log` çağrısıdır

Hiçbir hücreyi değiştirmeyen bir commit konsola ulaşmaz.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Commit
React, özel bir reconciler ile commit yapar.
Yoga
02Layout
Yoga kutuları tam hücrelere yerleştirir.
CellBuffer
03Boyama
Yalnızca değişen satırlar yeniden boyanır.
Satır hash’i
04Değişiklik kapısı
Değişmeyen kareler burada durur.
RLE
05Kodlama
3.200 hücre, 149 %c span’ine dönüşür.
console.log
06Çıktı
Kareler en az 66 ms arayla sona eklenir.

Değişen kare Değişmeyen kare, 0 çağrı

Sona eklenen kareler

Her kareden önce konsolu temizlemek, DevTools bir sonrakini boyayana kadar konsolu boş bırakır. Turbolog bunun yerine her kareyi sona ekler.

Yazıyı oku

clear() + log()%70.6 boş

log(), appended%1.0 boş

0.163msTam yeniden boyama (layout, boyama, kodlama)

0.011msTuş vuruşu gibi tek satırlık düzenleme

0 çağrıBoşta kare

149 span3.200 hücre için %c argümanları

100×32 gösterge paneli, 1.000 kare ortalaması · Apple M5 Pro · Bun 1.4.4Turbolog motoru belgeleri

Rotaları sunucuda render etme

Bir rotayı ve asenkron bileşenlerini sunucuda render etmek için runtime = "server" dışa aktarın. Tarayıcı, uygulamanız yerine 21 kB (gzip) kare oynatıcı yükler.

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}

Terminal ve ajanlarda da çalışır

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

Turbolog her kareyi tek bir console.log içinde %c span’leri olarak yazar.

◌ Build docs fra1 42%

Terminal`text run`

text run aynı App Router uygulamasını truecolor ANSI ile render eder ve rota işleyicilerini aynı işlemde çalıştırır.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

Kodlama ajanları`text mcp`

Ajanlar MCP üzerinden rotalarda gezinir, tuşlara basar ve her kareyi düz metin olarak okur.

DevTools’ta OpenCode ile kodlama

OpenCode Lite, tarayıcı konsolunuzda çalışması için Text.js ile yeniden oluşturulan OpenCode TUI’dır.

Deneme ortamını dene Sunucu bağla

   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

Deneme ortamı

Önceden tanımlı bir ajan, kurulum gerektirmeden her prompt’a yanıt verir.

Tek komut

bunx @textjs/opencode@latest proxy komutunu çalıştırın ve yazdırdığı kodu girin. Sayfa, makinenizdeki OpenCode’a bağlanır.

Modelleriniz ve oturumlarınız

/models ile sunucunuzda yapılandırılmış herhangi bir modeli seçin. Oturumlar, ajanlar ve modeller OpenCode sunucunuzdan gelir.

Konsolunuzda dağıtım panosu oluşturma

Ücretsiz kurs 10 bölüm içerir ve yaklaşık 65 dakika sürer.

Öğrenmeye başla Belgeleri oku

Konsol framework’ü

React 19

App Router

Duyarlı ızgara

Klavye girdisi

Tablolar, grafikler, formlar ve kısayollar

Değişen her kare bir `console.log` çağrısıdır

01Commit

02Layout

03Boyama

04Değişiklik kapısı

05Kodlama

06Çıktı

Sona eklenen kareler

Rotaları sunucuda render etme

Terminal ve ajanlarda da çalışır

DevTools`text dev`

Terminal`text run`

Kodlama ajanları`text mcp`

DevTools’ta OpenCode ile kodlama

Deneme ortamı

Tek komut

Modelleriniz ve oturumlarınız

Editör, lint ve test araçları

DevTools uzantısı

VS Code

ESLint

Test

Hata kodları

Konsol REPL’i

Sağdan sola

FIGlet yazı tipleri

Konsolunuzda dağıtım panosu oluşturma

Konsol framework’ü

React 19

App Router

Duyarlı ızgara

Klavye girdisi

Tablolar, grafikler, formlar ve kısayollar

Değişen her kare bir console.log çağrısıdır

01Commit

02Layout

03Boyama

04Değişiklik kapısı

05Kodlama

06Çıktı

Sona eklenen kareler

Rotaları sunucuda render etme

Terminal ve ajanlarda da çalışır

DevToolstext dev

Terminaltext run

Kodlama ajanlarıtext mcp

DevTools’ta OpenCode ile kodlama

Deneme ortamı

Tek komut

Modelleriniz ve oturumlarınız

Editör, lint ve test araçları

DevTools uzantısı

VS Code

ESLint

Test

Hata kodları

Konsol REPL’i

Sağdan sola

FIGlet yazı tipleri

Konsolunuzda dağıtım panosu oluşturma

Değişen her kare bir `console.log` çağrısıdır

DevTools`text dev`

Terminal`text run`

Kodlama ajanları`text mcp`