הפריימוורק למסוף

בניית אפליקציות 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/⁩ הופכות לנתיבים ול-layout, וניווט אחורה, קדימה וקישורים עמוקים פועלים.

רשת רספונסיבית

הרשת מתאימה לחלונית DevTools המעוגנת בכל רמת זום של הדף.

קלט מקלדת

מקשים, הדבקה והרכבת טקסט ב-IME מגיעים ליישום דרך <textarea> מוסתר אחד.

טבלאות, תרשימים, טפסים וקיצורי מקשים

בשידור חי

preview://table:1

↑ ↓ תנועה · s מיון · Space בחירה

תיעוד

⁦layout⁩

<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⁦layout⁩
⁦Yoga⁩ מסדר תיבות על תאים שלמים.
CellBuffer
03צביעה
רק שורות שהשתנו נצבעות מחדש.
גיבוב שורה
04סינון שינויים
פריימים ללא שינוי נעצרים כאן.
RLE
05קידוד
3,200 תאים הופכים ל-149 spans של ⁦%c⁩.
console.log
06פליטה
פריימים נוספים לסוף בהפרש של 66 ms לפחות.

פריים שהשתנה פריים ללא שינוי, 0 קריאות

פריימים שנוספו לסוף

ניקוי המסוף לפני כל פריים משאיר אותו ריק עד ש-DevTools מצייר את הפריים הבא. Turbolog מוסיף כל פריים לסוף במקום זאת.

קריאת הפוסט

clear() + log()70.6% ריק

log(), appended1.0% ריק

0.163msצביעה מחדש מלאה (layout, צביעה, קידוד)

0.011msעריכת שורה אחת, כמו בהקשה

0 קריאותפריים במנוחה

149⁦ spans⁩ארגומנטים של ⁦%c⁩ עבור 3,200 תאים

לוח בקרה ⁦100×32⁩, ממוצע של 1,000 פריימים · Apple M5 Pro · Bun 1.4.4תיעוד מנוע Turbolog

רינדור נתיבים בשרת

יש לייצא runtime = "server" כדי לרנדר נתיב ואת הרכיבים האסינכרוניים שלו בשרת. הדפדפן טוען נגן פריימים בגודל 21 kB (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⁩ כותב כל פריים כ-spans של ⁦%c⁩ בקריאת console.log אחת.

◌ Build docs fra1 42%

טרמינל`text run`

⁦text run⁩ מרנדר את אותה אפליקציית ⁦App Router⁩ ב-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⁦layout⁩

03צביעה

04סינון שינויים

05קידוד

06פליטה

פריימים שנוספו לסוף

רינדור נתיבים בשרת

פועל גם בטרמינלים ובסוכנים

DevTools`text dev`

טרמינל`text run`

סוכני קוד`text mcp`

כתיבת קוד עם OpenCode ב-DevTools

ארגז חול

פקודה אחת

המודלים והסשנים שלך

כלי עריכה, lint ובדיקות

תוסף DevTools

VS Code

ESLint

בדיקות

קודי שגיאה

⁦REPL⁩ במסוף

מימין לשמאל

גופני FIGlet

בניית לוח בקרה לפריסה במסוף

הפריימוורק למסוף

React 19

App Router

רשת רספונסיבית

קלט מקלדת

טבלאות, תרשימים, טפסים וקיצורי מקשים

כל פריים שהשתנה הוא קריאת console.log אחת

01החלת שינויים

02⁦layout⁩

03צביעה

04סינון שינויים

05קידוד

06פליטה

פריימים שנוספו לסוף

רינדור נתיבים בשרת

פועל גם בטרמינלים ובסוכנים

DevToolstext dev

טרמינלtext run

סוכני קודtext mcp

כתיבת קוד עם OpenCode ב-DevTools

ארגז חול

פקודה אחת

המודלים והסשנים שלך

כלי עריכה, lint ובדיקות

תוסף DevTools

VS Code

ESLint

בדיקות

קודי שגיאה

⁦REPL⁩ במסוף

מימין לשמאל

גופני FIGlet

בניית לוח בקרה לפריסה במסוף

כל פריים שהשתנה הוא קריאת `console.log` אחת

DevTools`text dev`

טרמינל`text run`

סוכני קוד`text mcp`