概要

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：変更されたフレームごとに1回の console.log 呼び出し。
• コンソールUI：ページに配置するのはフォーカスパッドと非表示の入力欄のみ。

#動作の仕組み

状態はReact、レイアウト、セルバッファー、コンソールの順に流れます。

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

変更のないフレームはスキップされるため、アイドル状態のアプリは何もログに出力しません。

#次のステップ

• インストール：最初のアプリの作成。
• ルーティング：ページ、レイアウト、ナビゲーション。
• Turbolog：フレームのエンコード方法。
• OpenCode：Text.jsで構築されたエージェントTUI。