インストール
Text.jsアプリを作成し、DevToolsを開いてコンソールを設定します。
動作要件
- Bun 1.2+またはNode.js 22+
- デスクトップ版のChrome、Edge、Firefox、Safari
アプリの作成
bunx create-text-app@latestテンプレート（starter、dashboard、opencode）を選択して、開発サーバーを起動します。
cd my-appbun installbun devコンソールを開く
http://localhost:3000 にアクセスして、コンソールを開きます。
| ブラウザー | macOS | Windows / Linux |
|---|---|---|
| Chrome、Edge、Arc、Brave | ⌘ ⌥ J | Ctrl Shift J |
| Firefox | ⌘ ⌥ K | Ctrl Shift K |
| Safari | ⌘ ⌥ C | macOSのみ |
Safariでは、まず「設定」→「詳細」で「Web開発者向けの機能を表示」を有効にします。
ページをクリックしてフォーカスを移してから、入力します。DevToolsを下部にドッキングすると、グリッドの幅が最大になります。
コンソールの設定
コンソールの設定で「ログを保持」を無効にします。Text.jsはフレームごとに1件のメッセージを追加し、古いフレームを解放するためにコンソールを消去します。「ログを保持」が有効だと、DevToolsは消去を無視するため、古いフレームが蓄積します。
手動セットアップ
bun add @textjs/app react react-dompackage.jsonjson
{ "scripts": { "dev": "text dev", "build": "text build", "start": "text start" }}app/page.tsxtsx
import { Text } from "@textjs/app";export default function Page() { return <Text className="p-1">Hello from console.log</Text>;}フレームワークを使わない場合
既存のサイトから任意のReactツリーをコンソールにマウントします。
main.tsxtsx
import { renderToConsole, Box, Text } from "@textjs/react";await renderToConsole( <Box className="border rounded p-1"> <Text bold>Hello, DevTools</Text> </Box>, { width: 100, height: 32 },);