Le framework console
Créez des applications React full-stack qui s’affichent dans console.log.
Cette page s’exécute dans votre console. Ouvrez-la avec ⌘⌥JCtrl+Shift+J⌘⌥KCtrl+Shift+K⌘⌥C (activez les fonctionnalités de développement au préalable), cliquez sur l’aperçu ci-dessous et appuyez sur ↑ ↓.
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}React 19
Text.js prend en charge le rendu concurrent, Suspense et les périmètres d’erreurs.
App Router
Les dossiers dans app/ deviennent des routes et des layouts, et les commandes « Précédent », « Suivant » et les liens profonds fonctionnent.
Grille adaptative
La grille s’adapte au panneau DevTools ancré, quel que soit le zoom de la page.
Saisie clavier
Les touches, le collage et la composition IME parviennent à l’application via un unique <textarea> masqué.
Tableaux, graphiques, formulaires et raccourcis
<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
Chaque frame modifiée correspond à un appel console.log
Un commit qui ne modifie aucune cellule n’atteint jamais la console.
- React 19
01Commit
React applique les changements via un réconciliateur personnalisé.
- Yoga
02Layout
Yoga dispose les boîtes sur des cellules entières.
- CellBuffer
03Affichage
Seules les lignes modifiées sont repeintes.
- Hachage de ligne
04Filtre des modifications
Les frames inchangées s’arrêtent ici.
- RLE
05Encodage
3 200 cellules deviennent 149 spans
%c. - console.log
06Émission
Les frames sont ajoutées à la suite, espacées d’au moins 66 ms.
Frames ajoutées à la suite
Effacer la console avant chaque frame la laisse vide jusqu’à ce que DevTools affiche la suivante. Turbolog ajoute chaque frame à la suite.
Lire l’articleclear() + log()70.6 % videlog(), appended1.0 % vide%c pour 3200 cellulesRendre les routes sur le serveur
Exportez runtime = "server" pour rendre une route et ses composants asynchrones sur le serveur. Le navigateur charge un lecteur de frames de 21 ko (gzip) au lieu de votre application.
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}- Prérendu partielLa première frame de chaque route statique est incluse dans son HTML. La console l’affiche avant le chargement de JavaScript.
- Middleware
middleware.tss’exécute avant les requêtes correspondantes, avecNextRequest,NextResponseetconfig.matcher. - Mise en cache
revalidate,unstable_cacheetrevalidateTagmettent en cache les gestionnaires de route et les données, avec stale-while-revalidate. - Adaptateurs de déploiement
text build --adapterciblestatic,bun,verceloucloudflare. Les routes avec rendu côté serveur nécessitentbunoutext start.
Exécution aussi dans les terminaux et les agents
DevToolstext dev
Turbolog écrit chaque frame sous forme de spans %c en un seul console.log.
Terminaltext run
text run affiche la même application App Router en ANSI truecolor et exécute les gestionnaires de route dans le même processus.
Agents de programmationtext mcp
Via MCP, les agents parcourent les routes, appuient sur des touches et lisent chaque frame en texte brut.
Coder avec OpenCode dans DevTools
OpenCode Lite reprend l’interface textuelle d’OpenCode avec Text.js pour fonctionner dans la console de votre navigateur.
Bac à sable
Un agent scripté répond à toute requête, sans rien installer.
Une commande
Exécutez bunx @textjs/opencode@latest proxy et saisissez le code affiché. La page se connecte à OpenCode sur votre machine.
Vos modèles et sessions
Choisissez un modèle configuré sur votre serveur avec /models. Les sessions, agents et modèles proviennent de votre serveur OpenCode.
Outils d’édition, de lint et de test
Extension DevTools
Ajoute un panneau avec l’arbre des composants, un inspecteur de frames et une chronologie par frame.
Panneau Text.jsVS Code
Affiche un aperçu de la frame à côté de votre code et génère les fichiers App Router.
⌘K VESLint
Détecte les balises DOM dans les composants de console, les boîtes dans le texte et les glyphes absents de Menlo.
eslint-plugin-textjsTests
Effectuez le rendu hors écran, appuyez sur des touches et vérifiez lastFrame() dans tout exécuteur de tests.
Codes d’erreur
Les erreurs et avertissements avec un code TX renvoient à une page expliquant le correctif.
REPL de la console
Mettez en pause, redimensionnez, affichez en filaire et copiez l’application en cours depuis l’invite de la console.
window.textDe droite à gauche
Implémente l’algorithme bidirectionnel Unicode et réussit les 770 241 tests de BidiTest.txt.
Polices FIGlet
Analyse les fichiers .flf et reproduit 273 sorties enregistrées du binaire figlet.
Créer un tableau de déploiement dans votre console
Le cours gratuit compte 10 chapitres et dure environ 65 minutes.