コンソールのフレームワーク

console.logの中に描画されるフルスタックのReactアプリを構築できます。

このページはコンソールで動作しています。⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥Cで開き（先に開発者向け機能を有効化）、下のプレビューをクリックして↑ ↓を押してください。

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は並行レンダリング、Suspense、エラーバウンダリーに対応しています。

App Router

app/内のフォルダーがルートとレイアウトになり、「戻る」「進む」とディープリンクが機能します。

レスポンシブグリッド

ページのズーム倍率にかかわらず、グリッドはドッキングしたDevToolsパネルに収まります。

キーボード入力

キー入力、貼り付け、IME変換は、非表示の<textarea>を通じてアプリに届きます。

テーブル、チャート、フォーム、ショートカット

ライブ

preview://table:1

↑ ↓ 移動 · s 並べ替え · Space 選択

ドキュメント

レイアウト

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

データ

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

チャート

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

コントロール

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

キーボード

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

変更のあるフレームごとに`console.log`を1回呼び出し

セルに変更がないコミットはコンソールに届きません。

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01コミット
Reactはカスタムリコンサイラーを通じてコミットします。
Yoga
02レイアウト
Yogaがボックスを整数セル単位で配置します。
CellBuffer
03描画
変更のある行のみ再描画します。
行ハッシュ
04変更判定ゲート
変更のないフレームはここで止まります。
RLE
05エンコード
3,200セルを149個の%cスパンに変換します。
console.log
06出力
フレームは66ms以上の間隔で追記します。

変更のあるフレーム変更のないフレーム、0回の呼び出し

フレームの追記

フレームごとにコンソールを消去すると、DevToolsが次のフレームを描画するまで空白になります。Turbologは代わりに各フレームを追記します。

記事を読む

clear() + log()70.6%が空白

log(), appended1.0%が空白

0.163ms全面再描画（レイアウト、描画、エンコード）

0.011msキー入力などの1行編集

0回の呼び出しアイドル時のフレーム

149個のスパン3,200セル分の%c引数

100×32ダッシュボード、1,000フレームの平均 · Apple M5 Pro · Bun 1.4.4Turbologエンジンのドキュメント

サーバーでルートをレンダリング

runtime = "server"をエクスポートすると、ルートとその非同期コンポーネントをサーバーでレンダリングします。ブラウザーはアプリの代わりに21 kB（gzip）のフレームプレーヤーを読み込みます。

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}

ターミナルとエージェントでも動作

ElementsConsoleSources

◌ Build docs fra1 42%

DevTools`text dev`

Turbologは各フレームを%cスパンとして1回のconsole.logで書き込みます。

◌ Build docs fra1 42%

ターミナル`text run`

text runは同じApp RouterアプリをトゥルーカラーANSIで描画し、ルートハンドラーを同一プロセス内で実行します。

textjs · read_frame

→ read_frame { "path": "/" }

▼ Acme Deploys main

● Ready web iad1 2m

● Ready api sfo1 4m

◌ Build docs fra1 42%

コーディングエージェント`text mcp`

エージェントはMCP経由でルートを移動し、キーを押し、各フレームをプレーンテキストで読み取ります。

DevToolsのOpenCodeでコーディング

OpenCode Liteは、ブラウザーのコンソールで動くようにText.jsで再構築したOpenCode TUIです。

サンドボックスを試すサーバーを接続

   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

サンドボックス

スクリプトで動くエージェントがあらゆるプロンプトに応答します。インストールは不要です。

1つのコマンド

bunx @textjs/opencode@latest proxyを実行し、表示されたコードを入力します。ページがマシン上のOpenCodeに接続します。

自分のモデルとセッション

/modelsでサーバーに設定済みのモデルを選択します。セッション、エージェント、モデルは自分のOpenCodeサーバーから取得します。

コンソールで作るデプロイダッシュボード

無料コースは10章構成で、所要時間は約65分です。

学習を始めるドキュメントを読む

コンソールのフレームワーク

React 19

App Router

レスポンシブグリッド

キーボード入力

テーブル、チャート、フォーム、ショートカット

変更のあるフレームごとに`console.log`を1回呼び出し

01コミット

02レイアウト

03描画

04変更判定ゲート

05エンコード

06出力

フレームの追記

サーバーでルートをレンダリング

ターミナルとエージェントでも動作

DevTools`text dev`

ターミナル`text run`

コーディングエージェント`text mcp`

DevToolsのOpenCodeでコーディング

サンドボックス

1つのコマンド

自分のモデルとセッション

エディター、Lint、テストツール

DevTools拡張機能

VS Code

ESLint

テスト

エラーコード

コンソールREPL

右から左への表示

FIGletフォント

コンソールで作るデプロイダッシュボード

コンソールのフレームワーク

React 19

App Router

レスポンシブグリッド

キーボード入力

テーブル、チャート、フォーム、ショートカット

変更のあるフレームごとにconsole.logを1回呼び出し

01コミット

02レイアウト

03描画

04変更判定ゲート

05エンコード

06出力

フレームの追記

サーバーでルートをレンダリング

ターミナルとエージェントでも動作

DevToolstext dev

ターミナルtext run

コーディングエージェントtext mcp

DevToolsのOpenCodeでコーディング

サンドボックス

1つのコマンド

自分のモデルとセッション

エディター、Lint、テストツール

DevTools拡張機能

VS Code

ESLint

テスト

エラーコード

コンソールREPL

右から左への表示

FIGletフォント

コンソールで作るデプロイダッシュボード

変更のあるフレームごとに`console.log`を1回呼び出し

DevTools`text dev`

ターミナル`text run`

コーディングエージェント`text mcp`