Фреймворк для консоли

Создавайте full-stack-приложения на React с рендерингом внутри console.log.

Эта страница работает в вашей консоли. Откройте её сочетанием ⌘⌥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`

Коммит, не изменивший ни одной ячейки, не доходит до консоли.

React 19
```
<Box>
 ├ <Text>
 └ <Text> 1
```
01Коммит
React выполняет коммиты через собственный reconciler.
Yoga
02Макет
Yoga размещает блоки по целым ячейкам.
CellBuffer
03Отрисовка
Перерисовываются только повреждённые строки.
Хеш строки
04Проверка изменений
Неизменённые кадры останавливаются здесь.
RLE
05Кодирование
3 200 ячеек превращаются в 149 span с %c.
console.log
06Вывод
Кадры дописываются с интервалом не менее 66 мс.

Изменённый кадр Неизменённый кадр, 0 вызовов

Дописанные кадры

Очистка консоли перед каждым кадром оставляет её пустой, пока DevTools не отрисует следующий. Turbolog вместо этого дописывает каждый кадр.

Читать статью

clear() + log()70.6 % пустых

log(), appended1.0 % пустых

0.163msПолная перерисовка (макет, отрисовка, кодирование)

0.011msПравка одной строки, например нажатие клавиши

0 вызововКадр в простое

149 spanАргументы %c для 3200 ячеек

Панель 100×32, среднее по 1000 кадрам · Apple M5 Pro · Bun 1.4.4Документация движка Turbolog

Рендеринг маршрутов на сервере

Экспортируйте runtime = "server", чтобы рендерить маршрут и его асинхронные компоненты на сервере. Браузер загружает проигрыватель кадров размером 21 КБ (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 записывает каждый кадр как span с %c одним вызовом console.log.

◌ Build docs fra1 42%

Терминал`text run`

text run рендерит то же приложение App Router в truecolor 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 агенты переходят по маршрутам, нажимают клавиши и читают каждый кадр как обычный текст.

Писать код с OpenCode в DevTools

OpenCode Lite — это TUI OpenCode, воссозданный на Text.js для работы в консоли браузера.

Попробовать песочницу Подключить свой сервер

   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

Песочница

Агент по сценарию отвечает на любой промпт, без установки.

Одна команда

Запустите bunx @textjs/opencode@latest proxy и введите выведенный код. Страница подключится к OpenCode на вашем компьютере.

Ваши модели и сессии

Выберите любую настроенную на вашем сервере модель через /models. Сессии, агенты и модели поступают с вашего сервера OpenCode.

Создать панель развёртывания в консоли

Бесплатный курс содержит 10 глав и занимает около 65 минут.

Начать обучение Читать документацию

Фреймворк для консоли

React 19

App Router

Адаптивная сетка

Ввод с клавиатуры

Таблицы, графики, формы и сочетания клавиш

Каждый изменённый кадр — один вызов `console.log`

01Коммит

02Макет

03Отрисовка

04Проверка изменений

05Кодирование

06Вывод

Дописанные кадры

Рендеринг маршрутов на сервере

Работает и в терминалах и агентах

DevTools`text dev`

Терминал`text run`

Агенты для разработки`text mcp`

Писать код с OpenCode в DevTools

Песочница

Одна команда

Ваши модели и сессии

Инструменты редактора, линтинга и тестирования

Расширение DevTools

VS Code

ESLint

Тестирование

Коды ошибок

REPL в консоли

Справа налево

Шрифты FIGlet

Создать панель развёртывания в консоли

Фреймворк для консоли

React 19

App Router

Адаптивная сетка

Ввод с клавиатуры

Таблицы, графики, формы и сочетания клавиш

Каждый изменённый кадр — один вызов console.log

01Коммит

02Макет

03Отрисовка

04Проверка изменений

05Кодирование

06Вывод

Дописанные кадры

Рендеринг маршрутов на сервере

Работает и в терминалах и агентах

DevToolstext dev

Терминалtext run

Агенты для разработкиtext mcp

Писать код с OpenCode в DevTools

Песочница

Одна команда

Ваши модели и сессии

Инструменты редактора, линтинга и тестирования

Расширение DevTools

VS Code

ESLint

Тестирование

Коды ошибок

REPL в консоли

Справа налево

Шрифты FIGlet

Создать панель развёртывания в консоли

Каждый изменённый кадр — один вызов `console.log`

DevTools`text dev`

Терминал`text run`

Агенты для разработки`text mcp`