Framework konsol

Bangun aplikasi React full-stack yang di-render di dalam console.log.

Halaman ini berjalan di konsol Anda. Buka dengan ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (aktifkan fitur pengembang dahulu), klik pratinjau di bawah, dan tekan ↑ ↓.

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 mendukung concurrent rendering, Suspense, dan error boundary.

App Router

Folder di app/ menjadi route dan layout, dan Kembali, Maju serta deep link berfungsi.

Grid responsif

Grid menyesuaikan panel DevTools yang ditambatkan pada tingkat zoom halaman apa pun.

Input keyboard

Tombol, tempelan, dan komposisi IME diteruskan ke aplikasi melalui satu <textarea> tersembunyi.

Tabel, grafik, formulir, dan pintasan

Langsung

preview://table:1

↑ ↓ pindah · s urutkan · Space pilih

Dokumentasi

Layout

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

Data

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

Grafik

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

Kontrol

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

Keyboard

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

Setiap frame yang berubah adalah satu panggilan `console.log`

Commit yang tidak mengubah sel tidak pernah mencapai konsol.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Commit
React menjalankan commit lewat reconciler khusus.
Yoga
02Layout
Yoga menata kotak pada sel utuh.
CellBuffer
03Gambar
Hanya baris yang berubah digambar ulang.
Hash baris
04Gerbang perubahan
Frame yang tidak berubah berhenti di sini.
RLE
05Enkode
3.200 sel menjadi 149 span %c.
console.log
06Kirim
Frame ditambahkan di akhir dengan jeda minimal 66 ms.

Frame berubah Frame tidak berubah, 0 panggilan

Frame yang ditambahkan di akhir

Mengosongkan konsol sebelum setiap frame membuatnya kosong sampai DevTools menggambar frame berikutnya. Turbolog menambahkan setiap frame di akhir.

Baca artikel

clear() + log()70.6% kosong

log(), appended1.0% kosong

0.163msGambar ulang penuh (layout, gambar, enkode)

0.011msEdit satu baris, seperti penekanan tombol

0 panggilanFrame diam

149 spanArgumen %c untuk 3.200 sel

Dasbor 100×32, rata-rata 1.000 frame · Apple M5 Pro · Bun 1.4.4Dokumentasi mesin Turbolog

Render route di server

Ekspor runtime = "server" untuk me-render route dan komponen asinkronnya di server. Browser memuat pemutar frame berukuran 21 kB (gzip), bukan aplikasi Anda.

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}

Juga berjalan di terminal dan agen

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

Turbolog menulis setiap frame sebagai span %c dalam satu console.log.

◌ Build docs fra1 42%

Terminal`text run`

text run me-render aplikasi App Router yang sama dalam ANSI truecolor dan menjalankan route handler dalam proses yang sama.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

Agen pemrograman`text mcp`

Lewat MCP, agen menavigasi route, menekan tombol, dan membaca setiap frame sebagai teks biasa.

Tulis kode dengan OpenCode di DevTools

OpenCode Lite adalah TUI OpenCode yang dibangun ulang dengan Text.js untuk berjalan di konsol browser Anda.

Coba sandbox Hubungkan server Anda

   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

Sandbox

Agen berskrip menjawab prompt apa pun, tanpa perlu instalasi.

Satu perintah

Jalankan bunx @textjs/opencode@latest proxy dan masukkan kode yang ditampilkan. Halaman terhubung ke OpenCode di mesin Anda.

Model dan sesi Anda

Pilih model apa pun yang dikonfigurasi di server Anda dengan /models. Sesi, agen, dan model berasal dari server OpenCode Anda.

Buat dasbor deploy di konsol Anda

Kursus gratis ini memiliki 10 bab dan memakan waktu sekitar 65 menit.

Mulai belajar Baca dokumentasi

Framework konsol

React 19

App Router

Grid responsif

Input keyboard

Tabel, grafik, formulir, dan pintasan

Setiap frame yang berubah adalah satu panggilan `console.log`

01Commit

02Layout

03Gambar

04Gerbang perubahan

05Enkode

06Kirim

Frame yang ditambahkan di akhir

Render route di server

Juga berjalan di terminal dan agen

DevTools`text dev`

Terminal`text run`

Agen pemrograman`text mcp`

Tulis kode dengan OpenCode di DevTools

Sandbox

Satu perintah

Model dan sesi Anda

Perkakas editor, lint, dan pengujian

Ekstensi DevTools

VS Code

ESLint

Pengujian

Kode kesalahan

REPL konsol

Kanan ke kiri

Font FIGlet

Buat dasbor deploy di konsol Anda

Framework konsol

React 19

App Router

Grid responsif

Input keyboard

Tabel, grafik, formulir, dan pintasan

Setiap frame yang berubah adalah satu panggilan console.log

01Commit

02Layout

03Gambar

04Gerbang perubahan

05Enkode

06Kirim

Frame yang ditambahkan di akhir

Render route di server

Juga berjalan di terminal dan agen

DevToolstext dev

Terminaltext run

Agen pemrogramantext mcp

Tulis kode dengan OpenCode di DevTools

Sandbox

Satu perintah

Model dan sesi Anda

Perkakas editor, lint, dan pengujian

Ekstensi DevTools

VS Code

ESLint

Pengujian

Kode kesalahan

REPL konsol

Kanan ke kiri

Font FIGlet

Buat dasbor deploy di konsol Anda

Setiap frame yang berubah adalah satu panggilan `console.log`

DevTools`text dev`

Terminal`text run`

Agen pemrograman`text mcp`