Getting Started

Over ten chapters you'll build Acme Deploys, a deploy dashboard that renders in the DevTools console. Each chapter ends with the app exactly as your code leaves it, running live in the console on this page.

#Create the app

create-text-app scaffolds a project with the App Router, TypeScript and the text CLI.

bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun dev

Open http://localhost:3000, then open the console with ⌘⌥J (Ctrl+Shift+J elsewhere). The page shows a focus pad. Your app renders in the console.

#Your first page

Every route is a page.tsx in app/. Replace the starter page with the dashboard's title card:

import { Box, Text } from "@textjs/next";export default function Page() {  return (    <Box className="flex-col border rounded px-2 py-1">      <Text bold>▼ Acme Deploys</Text>      <Text color="muted">Hello, console.</Text>    </Box>  );}

Save the file. Fast Refresh redraws the frame and keeps your component state.

#Respond to a key

useInput receives every keystroke while the page has focus. Count the hellos:

That's a complete Text.js app. It has React state, a layout box and one console.log per changed frame, and it logs nothing while idle.