Giriş

Text.js, DevTools konsolunda console.log ile render edilen uygulamalar için bir React framework’üdür.

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>  );}

Önizleme canlıdır. Üzerine tıklayın ve ↑ tuşuna basın.

#Neler dahil

• React 19: eşzamanlı render etme, Suspense ve hata sınırları.
• App Router: layout’lar, sayfalar, dinamik segmentler ve rota işleyicileri.
• Yoga layout: WebAssembly içinde, tam sayı hücrelere hizalanmış flexbox.
• Turbolog: değişen her kare için bir console.log çağrısı.
• Konsol arayüzü: sayfada yalnızca bir odak alanı ve gizli bir giriş alanı bulunur.

#Çalışma şekli

Durum aşağı doğru akar: React, ardından layout, ardından hücre arabelleği, ardından konsol.

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

Değişmeyen kareler atlanır, bu nedenle boşta duran uygulamalar günlüğe hiçbir şey yazmaz.

#Sonraki adımlar

• Kurulum: ilk uygulamanızı oluşturun.
• Yönlendirme: sayfalar, layout’lar ve gezinme.
• Turbolog: karelerin nasıl kodlandığı.
• OpenCode: Text.js ile oluşturulmuş bir ajan TUI’si.