کونسول فریم ورک

فل اسٹیک 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⁩ ایک کسٹم ریکنسائلر سے کمٹ کرتا ہے۔
Yoga
02لے آؤٹ
⁦Yoga⁩ پورے سیلز پر باکسز کا لے آؤٹ بناتا ہے۔
CellBuffer
03پینٹ
صرف متاثرہ قطاریں دوبارہ پینٹ ہوتی ہیں۔
قطار کا ہیش
04ڈرٹی گیٹ
بغیر تبدیلی والے فریم یہاں رک جاتے ہیں۔
RLE
05انکوڈ
3,200 سیل 149 ⁦%c⁩ spans بن جاتے ہیں۔
console.log
06اخراج
فریم کم از کم 66 ms کے وقفے سے آخر میں جوڑے جاتے ہیں۔

تبدیل شدہ فریم بغیر تبدیلی والا فریم، 0 کالز

آخر میں جوڑے گئے فریم

ہر فریم سے پہلے کونسول صاف کرنے سے وہ تب تک خالی رہتا ہے جب تک DevTools اگلا فریم پینٹ نہ کرے۔ Turbolog اس کے بجائے ہر فریم آخر میں جوڑتا ہے۔

پوسٹ پڑھیں

clear() + log()70.6% خالی

log(), appended1.0% خالی

0.163msمکمل ری پینٹ (لے آؤٹ، پینٹ، انکوڈ)

0.011msایک قطار میں ترمیم، جیسے کلید دبانا

0 کالزآئیڈل فریم

149⁦ spans⁩3,200 سیلز کے لیے ⁦%c⁩ آرگیومنٹس

⁦100×32⁩ ڈیش بورڈ، 1,000 فریموں کا اوسط · Apple M5 Pro · Bun 1.4.4⁦Turbolog⁩ انجن کی دستاویزات

سرور پر روٹس کی رینڈرنگ

روٹ اور اس کے async کمپوننٹس کو سرور پر رینڈر کرنے کے لیے 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⁩ ہر فریم کو ایک console.log میں ⁦%c⁩ spans کے طور پر لکھتا ہے۔

◌ 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⁩ پر ایجنٹس روٹس پر جاتے ہیں، کلیدیں دباتے ہیں اور ہر فریم کو سادہ متن کے طور پر پڑھتے ہیں۔

⁦DevTools⁩ میں OpenCode کے ساتھ کوڈ لکھیں

⁦OpenCode Lite⁩، OpenCode کا TUI ہے جسے آپ کے براؤزر کونسول میں چلانے کے لیے 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`

⁦DevTools⁩ میں OpenCode کے ساتھ کوڈ لکھیں

سینڈ باکس

ایک کمانڈ

آپ کے ماڈلز اور سیشنز

ایڈیٹر، لنٹ اور ٹیسٹ ٹولز

⁦DevTools⁩ ایکسٹینشن

VS Code

ESLint

ٹیسٹنگ

ایرر کوڈز

کونسول REPL

دائیں سے بائیں

⁦FIGlet⁩ فونٹس

اپنے کونسول میں ڈیپلائے ڈیش بورڈ بنائیں

کونسول فریم ورک

React 19

App Router

ریسپانسیو گرڈ

کی بورڈ ان پٹ

ٹیبلز، چارٹس، فارمز اور شارٹ کٹس

ہر تبدیل شدہ فریم ایک console.log کال ہے

01کمٹ

02لے آؤٹ

03پینٹ

04ڈرٹی گیٹ

05انکوڈ

06اخراج

آخر میں جوڑے گئے فریم

سرور پر روٹس کی رینڈرنگ

ٹرمینلز اور ایجنٹس میں بھی چلتا ہے

DevToolstext dev

ٹرمینلtext run

کوڈنگ ایجنٹسtext mcp

⁦DevTools⁩ میں OpenCode کے ساتھ کوڈ لکھیں

سینڈ باکس

ایک کمانڈ

آپ کے ماڈلز اور سیشنز

ایڈیٹر، لنٹ اور ٹیسٹ ٹولز

⁦DevTools⁩ ایکسٹینشن

VS Code

ESLint

ٹیسٹنگ

ایرر کوڈز

کونسول REPL

دائیں سے بائیں

⁦FIGlet⁩ فونٹس

اپنے کونسول میں ڈیپلائے ڈیش بورڈ بنائیں

ہر تبدیل شدہ فریم ایک `console.log` کال ہے

DevTools`text dev`

ٹرمینل`text run`

کوڈنگ ایجنٹس`text mcp`