Framework console

Xây dựng ứng dụng React full-stack render trong console.log.

Trang này đang chạy trong console của bạn. Mở bằng ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (bật tính năng dành cho nhà phát triển trước), nhấp vào bản xem trước bên dưới và nhấ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 hỗ trợ render đồng thời, Suspense và ranh giới lỗi.

App Router

Thư mục trong app/ trở thành route và layout, còn Quay lại, Tiến tới và liên kết sâu đều hoạt động.

Lưới thích ứng

Lưới vừa với bảng DevTools gắn vào cửa sổ ở mọi mức thu phóng trang.

Nhập bằng bàn phím

Phím, thao tác dán và soạn thảo IME đến ứng dụng qua một <textarea> ẩn.

Bảng, biểu đồ, biểu mẫu và phím tắt

Trực tiếp

preview://table:1

↑ ↓ di chuyển · s sắp xếp · Space chọn

Tài liệu

Layout

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

Dữ liệu

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

Biểu đồ

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

Điều khiển

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

Bàn phím

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

Mỗi frame đã đổi là một lần gọi `console.log`

Commit không thay đổi ô nào sẽ không bao giờ đến console.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Commit
React commit qua một reconciler tùy chỉnh.
Yoga
02Layout
Yoga sắp xếp các hộp trên ô nguyên.
CellBuffer
03Vẽ
Chỉ vẽ lại các dòng bị ảnh hưởng.
Mã băm dòng
04Cổng kiểm tra thay đổi
Frame không đổi dừng ở đây.
RLE
05Mã hóa
3.200 ô thành 149 span %c.
console.log
06Xuất
Các frame nối thêm cách nhau ít nhất 66 ms.

Frame đã đổi Frame không đổi, 0 lần gọi

Frame nối thêm

Xóa console trước mỗi frame khiến console trống cho đến khi DevTools vẽ frame tiếp theo. Thay vào đó, Turbolog nối thêm từng frame.

Đọc bài viết

clear() + log()70.6% trống

log(), appended1.0% trống

0.163msVẽ lại toàn bộ (layout, vẽ, mã hóa)

0.011msSửa một dòng, như khi gõ phím

0 lần gọiFrame nhàn rỗi

149 spanĐối số %c cho 3.200 ô

Bảng tổng quan 100×32, trung bình 1.000 frame · Apple M5 Pro · Bun 1.4.4Tài liệu bộ máy Turbolog

Render route trên máy chủ

Xuất runtime = "server" để render route và các component bất đồng bộ của nó trên máy chủ. Trình duyệt tải trình phát frame 21 kB (gzip) thay cho ứng dụng của bạn.

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}

Cũng chạy trong terminal và agent

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

Turbolog ghi từng frame dưới dạng span %c trong một lần gọi console.log.

◌ Build docs fra1 42%

Terminal`text run`

text run render cùng ứng dụng App Router bằng ANSI truecolor và chạy route handler trong cùng tiến trình.

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

Agent lập trình`text mcp`

Qua MCP, agent điều hướng route, nhấn phím và đọc từng frame dưới dạng văn bản thuần.

Viết mã với OpenCode trong DevTools

OpenCode Lite là TUI OpenCode được xây dựng lại bằng Text.js để chạy trong console trình duyệt.

Dùng thử Kết nối máy chủ

   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

Môi trường thử nghiệm

Agent theo kịch bản trả lời mọi prompt, không cần cài đặt gì.

Một lệnh

Chạy bunx @textjs/opencode@latest proxy và nhập mã lệnh in ra. Trang kết nối với OpenCode trên máy bạn.

Mô hình và phiên của bạn

Chọn bất kỳ mô hình nào đã cấu hình trên máy chủ bằng /models. Phiên, agent và mô hình đến từ máy chủ OpenCode của bạn.

Xây dựng bảng triển khai trong console

Khóa học miễn phí có 10 chương và mất khoảng 65 phút.

Bắt đầu học Đọc tài liệu

Framework console

React 19

App Router

Lưới thích ứng

Nhập bằng bàn phím

Bảng, biểu đồ, biểu mẫu và phím tắt

Mỗi frame đã đổi là một lần gọi `console.log`

01Commit

02Layout

03Vẽ

04Cổng kiểm tra thay đổi

05Mã hóa

06Xuất

Frame nối thêm

Render route trên máy chủ

Cũng chạy trong terminal và agent

DevTools`text dev`

Terminal`text run`

Agent lập trình`text mcp`

Viết mã với OpenCode trong DevTools

Môi trường thử nghiệm

Một lệnh

Mô hình và phiên của bạn

Công cụ soạn thảo, lint và kiểm thử

Tiện ích DevTools

VS Code

ESLint

Kiểm thử

Mã lỗi

REPL console

Từ phải sang trái

Phông FIGlet

Xây dựng bảng triển khai trong console

Framework console

React 19

App Router

Lưới thích ứng

Nhập bằng bàn phím

Bảng, biểu đồ, biểu mẫu và phím tắt

Mỗi frame đã đổi là một lần gọi console.log

01Commit

02Layout

03Vẽ

04Cổng kiểm tra thay đổi

05Mã hóa

06Xuất

Frame nối thêm

Render route trên máy chủ

Cũng chạy trong terminal và agent

DevToolstext dev

Terminaltext run

Agent lập trìnhtext mcp

Viết mã với OpenCode trong DevTools

Môi trường thử nghiệm

Một lệnh

Mô hình và phiên của bạn

Công cụ soạn thảo, lint và kiểm thử

Tiện ích DevTools

VS Code

ESLint

Kiểm thử

Mã lỗi

REPL console

Từ phải sang trái

Phông FIGlet

Xây dựng bảng triển khai trong console

Mỗi frame đã đổi là một lần gọi `console.log`

DevTools`text dev`

Terminal`text run`

Agent lập trình`text mcp`