Giới thiệu

Text.js là một framework React dành cho ứng dụng render trong console của DevTools bằng console.log.

import { useState } from "react";import { Box, Text, useInput } from "@textjs/app";export default function Page() {  const [count, setCount] = useState(0);  useInput((e) => {    if (e.key === "up") setCount((c) => c + 1);    if (e.key === "down") setCount((c) => c - 1);  });  return (    <Box className="flex-col p-1 border rounded">      <Text bold>count = {count}</Text>    </Box>  );}

Bản xem trước đang chạy trực tiếp. Nhấp vào đó và nhấn ↑.

#Các tính năng có sẵn

• React 19: render đồng thời, Suspense và ranh giới lỗi.
• App Router: layout, trang, phân đoạn động và route handler.
• Layout Yoga: flexbox trong WebAssembly, căn theo ô có kích thước nguyên.
• Turbolog: một lần gọi console.log cho mỗi frame thay đổi.
• Giao diện console: trang chỉ chứa một vùng focus và một ô nhập ẩn.

#Cách hoạt động

Trạng thái truyền xuống: React, rồi đến layout, rồi bộ đệm ô, rồi console.

React 19 ▼ Yoga ▼ CellBuffer ▼ console.log(format, ...css)

Các frame không thay đổi sẽ bị bỏ qua, nên ứng dụng nhàn rỗi không ghi gì vào console.

#Bước tiếp theo

• Cài đặt: tạo ứng dụng đầu tiên của bạn.
• Định tuyến: trang, layout và điều hướng.
• Turbolog: cách mã hóa frame.
• OpenCode: giao diện TUI cho agent xây dựng bằng Text.js.