소개

Text.js는 console.log로 DevTools 콘솔에 렌더링하는 앱을 위한 React 프레임워크예요.

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>  );}

미리보기는 실시간으로 동작해요. 클릭하고 ↑를 누르세요.

#포함된 기능

• React 19: 동시 렌더링, Suspense, 에러 바운더리.
• App Router: 레이아웃, 페이지, 동적 세그먼트, 라우트 핸들러.
• Yoga 레이아웃: 정수 단위 셀에 맞춘 WebAssembly 기반 flexbox.
• Turbolog: 변경된 프레임마다 console.log 1회 호출.
• 콘솔 UI: 포커스 패드와 숨겨진 입력 필드만 있는 페이지.

#동작 방식

상태는 React, 레이아웃, 셀 버퍼, 콘솔 순서로 흘러가요.

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

변경되지 않은 프레임은 건너뛰므로 유휴 상태의 앱은 아무것도 기록하지 않아요.

#다음 단계

• 설치: 첫 앱 만들기.
• 라우팅: 페이지, 레이아웃, 탐색.
• Turbolog: 프레임 인코딩 방식.
• OpenCode: Text.js로 만든 에이전트 TUI.