Введение

Text.js — это фреймворк React для приложений, которые рендерятся в консоли DevTools с помощью console.log.

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: flexbox в WebAssembly с привязкой к целым ячейкам.
• Turbolog: один вызов console.log на каждый изменённый кадр.
• Интерфейс в консоли: на странице размещены только панель фокуса и скрытое поле ввода.

#Принцип работы

Состояние передаётся сверху вниз: React, затем макет, затем буфер ячеек, затем консоль.

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

Неизменённые кадры пропускаются, поэтому простаивающие приложения ничего не выводят в консоль.

#Что дальше

• Установка: создайте своё первое приложение.
• Маршрутизация: страницы, макеты и навигация.
• Turbolog: как кодируются кадры.
• OpenCode: текстовый интерфейс агента, созданный на Text.js.