Text.js: Build full-stack React apps that render inside console.log

The Console Framework

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() {
  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 gap-1 p-2">
      <AsciiFont text="▼ TEXT.JS" />
      <Text color="muted">React 19 in console.log</Text>
      <Text bold color="accent">count = {count}</Text>
    </Box>
  );
}

▼ Text.js

███████ █████ ████ █ █ █████ ██ ███

█████ █ █ █ █ █ █ █

███ █ ███ █ █ █ ██

█ █ █ █ █ █ █ █ █

█ ████ █ █ █ █ ██ ███

React 19 in console.log

▄▀█▄

█▀ █

▀▀

Geist Dark

↑ ↓ count t theme

viewport:3

React 19

Text.js は、同時実行レンダリング、Suspense、エラー境界をサポートしています。

App Router

app/ 内のフォルダはルートとレイアウトになり、バック、フォワード、ディープリンクが機能します。

レスポンシブグリッド

グリッドは、ドッキングされた DevTools パネルに、あらゆるページズームでフィットします。

キーボード入力

キー、ペースト、IME の構成は、1 つの非表示の <textarea> を介してアプリに到達します。

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

Live

preview://table:1

↑ ↓ move · s sort · Space select

Layout

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

Data

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

Charts

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

Controls

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

Keyboard

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

変更されたフレームごとに console.log 呼び出しが 1 回

セルを変更しないコミットはコンソールに到達しません。

1. React 19

   01Commit

   React はカスタムリコンサイラーを通じてコミットします。

2. Yoga

   02Layout

   Yoga はセル全体にボックスをレイアウトします。

3. CellBuffer

   03Paint

   破損した行のみが再描画されます。

4. Row hash

   04Dirty gate

   変更されていないフレームはここで停止します。

5. RLE

   05Encode

   3,200 セルが 149 個の %c スパンになります。

6. console.log

   06Emit

   フレームは少なくとも 66ms ごとに追加されます。

Changed frame Unchanged frame, 0 calls

追加されたフレーム

各フレームの前にコンソールをクリアすると、DevTools が次のフレームを描画するまで空白のままになります。Turbolog は代わりに各フレームを追加します。

Read the post

clear() + log()70.6% blank

log(), appended1.0% blank

0.163msFull repaint (layout, paint, encode)

0.011msOne-row edit, such as a keystroke

0 callsIdle frame

149 spans%c arguments for 3,200 cells

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

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

DevTools で OpenCode とコードを書く

OpenCode Lite は、ブラウザコンソールで実行されるように Text.js で再構築された OpenCode TUI です。

Sandbox

スクリプト化されたエージェントが、インストール不要で、あらゆるプロンプトに応答します。

One command

bunx @textjs/opencode@latest proxy を実行し、それが表示するコードを入力します。ページは、お使いのコンピュータ上の OpenCode に接続します。

Your models and sessions

/models でサーバーが設定した任意のモデルを選択します。セッション、エージェント、モデルは OpenCode サーバーから提供されます。